CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/text-cycler

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.

ReactFont#cycler#rotating-text#typography#stagger#headline

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.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-text-cycler
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 TextCycler from '@crazygl/hero-text-cycler';

export default function Landing() {
  return (
    <TextCycler />
  );
}
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 TextCycler from '@crazygl/hero-text-cycler';

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

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.

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.

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.

Blend Text

A heading with CSS mix-blend-mode applied so it changes appearance against whatever sits behind it — picks the inverse colour of the backdrop pixel, like ink on a poster.

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.

Highlight Text

A heading with marker-highlighter strokes drawn behind specific words — like a printed page someone marked up. Words wrapped in *asterisks* get highlighted with the accent colour.Live customizer

Text Cycler

Rotation interval2sTransition duration0.5sPer-unit stagger0.025sSwap delay0.1sGap between the OUT and IN animations. 0 = both run together; positive = IN starts after OUT (sequential feel); negative = IN starts before OUT (heavy overlap).Split byStagger fromText colourFont size160pxLetter spacing-0.02emFontWeight900Transparent backgroundBackground colourCrazyGL · crazygl.comProgrammable hero sections for real websites.