Hero made by @ybouane.

@crazygl/hero-path-text-reveal

Multi-line heading where each line wipes in via a CSS clip-path from top, bottom, left, right, or centre — with a configurable stagger between lines.

Demo

Path Text Reveal

Install

npm install @crazygl/hero-path-text-reveal

Usage

import PathTextReveal from '@crazygl/hero-path-text-reveal';

export default function Hero() {
  return (
    <PathTextReveal
      text={`Transform your content
into premium narrative
with a single line.`}
      direction="bottom"
      staggerDelay={0.15}
    />
  );
}

Customise

• Content — text (one line per row).
• Reveal — trigger (load / loop), direction (top / bottom / left / right / center), duration, staggerDelay, loopInterval.
• Typography — textColor, textAlign, fontSize, lineHeight, letterSpacing, headingFontFamily, headingFontWeight.
• Backdrop — transparentBackground, bgColor.

Best for

• Magazine-style intro cards and brand mission statements.
• Agency homepage one-liners.
• Conference and film teaser openers where the wipe carries the tone.

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.