Hero made by @ybouane.

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

Demo

Rolling Text

Install

npm install @crazygl/hero-rolling-text

Usage

import RollingText from '@crazygl/hero-rolling-text';

export default function Hero() {
  return (
    <RollingText
      heading="ROLLING TEXT"
      duplicateCount={8}
      rollDuration={2}
      animationPattern="alternating"
    />
  );
}

Customise

• Content — heading (the wordmark), optional subheading, ctaLabel / onCTAClick.
• Roll — duplicateCount (copies stacked), rollDuration, staggerDelay, blurIntensity, animationPattern (sequential / alternating), loopInterval.
• Typography — textColor, fontSize, letterSpacing, headingFontFamily, headingFontWeight.
• Backdrop — bgColor, accentColor / accentStrength (diagonal vignette), transparentBackground.

Best for

• Brand wordmarks and product launches where the headline performs.
• Sports / streetwear and music drop pages.
• Conference and "Manufactured / Built / Made" hero blocks.

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.