CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/clip-type-stagger

Clip Type Stagger

Each character is clipped from below and rises into place on a stagger — like setting movable type one piece at a time. Plays once on load or loops with a configurable hold.

ReactFont#clip#stagger#typography

Usage

import ClipTypeStagger from '@crazygl/hero-clip-type-stagger';

export default function Hero() {
  return (
    <ClipTypeStagger
      heading="set in motion"
      trigger="loop"
      stagger={50}
    />
  );
}

Customise

  • Content — heading text.
  • Trigger — trigger (loop replays after a hold, or load one-shot), loopAfter hold seconds.
  • Reveal — perLetterDur (ms) and stagger (ms between letters).
  • Typography — textColor, fontSize, headingFontFamily (Google font), headingFontWeight.
  • Backdrop — transparentBackground, bgColor.

Best for

  • Editorial and brand landing pages
  • Product launches and announcement headers
  • Portfolio and agency intros
  • Any hero where a clean typographic reveal is the centerpiece
01 · Install the package

One command, zero config.

npm install @crazygl/hero-clip-type-stagger
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 ClipTypeStagger from '@crazygl/hero-clip-type-stagger';

export default function Landing() {
  return (
    <ClipTypeStagger />
  );
}
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 ClipTypeStagger from '@crazygl/hero-clip-type-stagger';

export default function Page() {
  return (
    <section>
      <ClipTypeStagger
        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.

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 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.

Ultimate Scroll Text

A long paragraph that reveals as the viewer scrolls — word-by-word, letter-by-letter, or line-by-line — with a soft ghost copy underneath that hints at the next words just before they arrive.

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.

Type Writer Custom

A typewriter with fully customisable per-step sequencing: type N chars, pause, delete M chars, type more, then loop.Live customizer

Clip Type Stagger

Animation triggerPer-letter duration (ms)700msStagger (ms)50msLoop hold (s)3.5sHold time before the choreography replays. Only used when trigger is Loop.Text colourFont size110pxFontWeight800Transparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.