Hero made by @ybouane.

@crazygl/hero-scrollreveal-pro

Multi-line heading where each line is masked and rises into view as the visitor scrolls — staggered, eased, with a small blur dropoff.

Demo

Scroll Reveal Pro

Install

npm install @crazygl/hero-scrollreveal-pro

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.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.