CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/path-text-reveal

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.

ReactFont#clip-path#reveal#typography#stagger#headline#intro

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.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-path-text-reveal
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

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

export default function Landing() {
  return (
    <PathTextReveal />
  );
}
03 · Use it in a page

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.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <PathTextReveal
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Word Blur

Heading that comes in word-by-word — each word lifts out of a deep blur and slides into focus on a small stagger.

Text Reveal

Heading wiped in from a single direction via a hard clip-path mask, with a small per-letter delay — the foundational reveal everyone needs.

Text Cycler

A wordmark that cycles between several words or phrases, each one entering with a character-, word-, or line-staggered fade — pick the stagger order from first / last / center / random.

Text Reveal Lens

A cursor-driven lens that reveals the bright real colour of a heading from underneath a dim default. Five lens shapes — circle, rectangle, diamond, wave, star — with an optional gradient fill on the revealed text.

Rolling Text

Each character rolls through a vertical stack of duplicate copies of itself in a continuous loop, with a blur pulse mid-roll and a per-character stagger.

Text Split Reveal

Heading splits into two halves that slide apart to reveal a secondary line between them — the curtain-pull pattern.Live customizer

Path Text Reveal

TriggerHow the reveal plays. Load fires once; loop replays on an interval.DirectionDuration0.8sPer-line reveal length.Stagger delay0.15sLoop every6sReplay the reveal every N seconds.Text colourAlignmentFont size76pxLine height1.1Letter spacing-0.01emHeading fontHeading weight700Transparent backgroundBackground colourCrazyGL · crazygl.comProgrammable hero sections for real websites.