Hero made by @ybouane.

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

Demo

Text Cycler

Install

npm install @crazygl/hero-text-cycler

Usage

import TextCycler from '@crazygl/hero-text-cycler';

export default function Page() {
  return (
    <TextCycler
      texts={"LOOPING\nTEXT\nCYCLER"}
      splitBy="characters"
      staggerFrom="last"
      rotationInterval={2}
    />
  );
}

texts is a newline-separated string — one word or phrase per line — and the cycler rotates through them.

Customise

• Content — texts (one phrase per line) and an optional label caption beneath the wordmark.
• Cycle — rotationInterval, animationDuration, staggerDuration (per-unit delay), swapDelay (gap between the outgoing and incoming layers), splitBy (characters / words / lines) and staggerFrom (first / last / center / random).
• Typography — textColor, fontSize, letterSpacing, headingFontFamily (Google font) and headingFontWeight.
• Backdrop — transparentBackground and bgColor.

Best for

• Landing-page hero headlines that need to say several things ("Ship. Scale. Sell.").
• SaaS and product sites rotating value props or feature names.
• Portfolio and agency intros that animate a list of disciplines or services.

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.