Hero made by @ybouane.

@crazygl/hero-kinetic-text

Stacked lines where each word is timed independently — bounce in, rotate, scale, on a choreographed sequence. Pick whether the show plays on load, follows scroll, or loops forever.

Demo

Kinetic Text

Install

npm install @crazygl/hero-kinetic-text

Usage

import KineticText from '@crazygl/hero-kinetic-text';

export default function Hero() {
  return (
    <KineticText
      lines={`MOVE\nTHINGS\nFORWARD`}
      trigger="reveal"
      accentColor="#ff5c8a"
    />
  );
}

Customise

• Content — lines (one line per row; the second line takes the accent colour).
• Trigger — trigger (loop, load, or reveal scroll-driven), loopAfter hold.
• Timing — perWordMs, stagger.
• Scroll window — scrollStart / scrollEnd (% progress mapping the reveal).
• Typography — textColor, accentColor, fontSize, headingFontFamily, headingFontWeight.
• Backdrop — transparentBackground, bgColor.

Best for

• Brand and campaign landing pages
• Product launches and announcement heroes
• Agency and portfolio intros
• Scroll-told stories where the headline animates as you arrive

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.