CrazyGLScroll Reveal Pro
Multi-line heading where each line is masked and rises into view as the visitor scrolls — staggered, eased, with a small blur dropoff.
Usage
import ScrollRevealPro from '@crazygl/hero-scrollreveal-pro';
export default function Hero() {
return (
<ScrollRevealPro
lines={"Design with intent.\nShip with confidence."}
staggerPct={10}
scrollStart={15}
scrollEnd={70}
/>
);
}Customise
- Content —
lines(one heading line per newline). - Reveal —
staggerPct(delay between lines),riseDistance(how far each line travels),blurAmount(blur as it rises). - Scroll window —
scrollStart/scrollEnd(the scroll-progress range over which the reveal plays). - Typography —
textColor,fontSize,headingFontFamily,headingFontWeight,lineHeight. - Backdrop —
transparentBackground,bgColor.
Best for
- Editorial and statement landing-page headlines.
- Story / manifesto sections revealed on scroll.
- Portfolio and agency intros that want a polished entrance.
One command, zero config.
npm install @crazygl/hero-scrollreveal-proImport 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 ScrollRevealPro from '@crazygl/hero-scrollreveal-pro';
export default function Landing() {
return (
<ScrollRevealPro />
);
}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 ScrollRevealPro from '@crazygl/hero-scrollreveal-pro';
export default function Page() {
return (
<section>
<ScrollRevealPro
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
