CrazyGLCode to Product Transformation
A panel of live syntax-highlighted source code dissolves into a stream of glowing character particles that stream across the canvas and reassemble into a polished product UI screenshot. A continuous 'code becomes product' loop for developer-tool and SaaS landing pages.
Usage
import CodeToProductTransformation from '@crazygl/hero-code-to-product-transformation';
export default function Hero() {
return (
<CodeToProductTransformation
heading="From a single line of code to a finished product."
subheading="Real components, real syntax — no mockups, no detours."
codeText={`export function Dashboard() { /* … */ }`}
screenshot="/your-app-screenshot.png"
onCTAClick="/signup"
/>
);
}Customise
- Content / CTA —
heading,subheading,ctaLabel,onCTAClick(URL or function), CTA colours. - Code panel —
codeText,codeLanguage(tsx/python/go/rust/css/json…),codePanelLabel,codePanelTheme(Dracula, One Dark, GitHub…). - Product —
screenshot,productLabel,productMetaText. - Transformation —
transformationSpeed,particleDensity,particleSize,arcCurvature,trailLength,pointerInfluence. - Theme / Background —
colorThemepresets (Midnight/Daylight/Aurora/Citrus/Custom),transparentBackground,bgColor.
Best for
- Developer tools, SDKs and API products.
- AI / code-generation landing pages literally pitching "code to product."
- Premium SaaS launch sites with a shipping-speed hero statement.
- Build / deploy / preview platforms showing their core loop.
One command, zero config.
npm install @crazygl/hero-code-to-product-transformationImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import CodeToProductTransformation from '@crazygl/hero-code-to-product-transformation';
export default function Landing() {
return (
<CodeToProductTransformation />
);
}SSR-safe by default.
The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import CodeToProductTransformation from '@crazygl/hero-code-to-product-transformation';
export default function Page() {
return (
<section>
<CodeToProductTransformation
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
