CrazyGLTextFluxUnveil
A paragraph whose first N words start fully revealed (setting up context) and the rest fade in as the viewer scrolls — perfect for 'context → reveal' headlines.
Usage
import TextFluxUnveil from '@crazygl/hero-textfluxunveil';
export default function Hero() {
return (
<TextFluxUnveil
text="Your text will reveal word by word as you scroll down the page."
startFromWord={5}
initialOpacity={0.1}
/>
);
}Customise
- Reveal —
startFromWord(0–30, how many words start fully visible),initialOpacity(resting opacity of un-revealed words),fadeDurationandfadeDelay(per-word transition length and cascade). - Scroll window —
scrollStart/scrollEnd(% of scroll progress over which the reveal runs) in scroll mode, orautoplaySecondsfor the one-shotnonemode. - Typography —
textColor,textAlign,fontSize,lineHeight,letterSpacing,maxWidth,headingFontFamily,headingFontWeight. - Backdrop —
transparentBackgroundandbgColor.
Best for
- Brand reveal lines ("We build the future of __").
- Product punchlines and conference / talk teases.
- Manifesto blocks where the opening is the question and the closing is the answer.
One command, zero config.
npm install @crazygl/hero-textfluxunveilImport 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 TextFluxUnveil from '@crazygl/hero-textfluxunveil';
export default function Landing() {
return (
<TextFluxUnveil />
);
}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 TextFluxUnveil from '@crazygl/hero-textfluxunveil';
export default function Page() {
return (
<section>
<TextFluxUnveil
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
