CrazyGLText Rotation
A static prefix with a vertical slot-machine rotator behind it — each word slides up, settles, and the next one rises into place.
Usage
import TextRotation from '@crazygl/hero-text-rotation';
export default function Hero() {
return (
<TextRotation
prefix="Built for"
rotators={"designers.\nfounders.\nstorytellers.\nbuilders."}
rotatorColor="#5b8def"
/>
);
}Customise
- Content —
prefix,rotators(one word per line),suffix. - Timing —
holdDuration(ms a word stays),transitionDuration(ms of the flip). - Typography —
textColor,rotatorColor,fontSize,headingFontFamily,headingFontWeight. - Backdrop —
transparentBackground,bgColor.
Best for
- SaaS / product landing headlines with multiple audiences or value props.
- Agency and portfolio intros.
- Any "Built for X / Y / Z" rotating tagline.
One command, zero config.
npm install @crazygl/hero-text-rotationImport 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 TextRotation from '@crazygl/hero-text-rotation';
export default function Landing() {
return (
<TextRotation />
);
}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 TextRotation from '@crazygl/hero-text-rotation';
export default function Page() {
return (
<section>
<TextRotation
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
