Hero made by @ybouane.

@crazygl/hero-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.

Demo

Clip Type Stagger

Install

npm install @crazygl/hero-clip-type-stagger

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

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.