CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/rotatetextfx

Rotate Text FX

Each letter rotates independently with offset phase. Trigger the rotation as a one-shot entrance on load, or let it spin forever.

ReactFont#rotate#spin#typography

Usage

import RotateTextFx from '@crazygl/hero-rotatetextfx';

export default function Hero() {
  return (
    <RotateTextFx
      heading="ROTATION"
      trigger="loop"
      speed={0.5}
      phaseOffset={0.4}
    />
  );
}

Customise

  • Trigger — trigger: loop (continuous spin) or load (one-shot entrance).
  • Motion — speed (loop rate), phaseOffset (per-letter lag), revealDurationMs (entrance length in load mode).
  • Typography — textColor, fontSize, headingFontFamily, headingFontWeight.
  • Backdrop — transparentBackground, bgColor.

Best for

  • Playful product / brand splash headlines.
  • Landing-page title reveals and "coming soon" teasers.
  • Portfolio and agency heroes that want a kinetic typographic moment.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-rotatetextfx
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 RotateTextFX from '@crazygl/hero-rotatetextfx';

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

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

Spin Text Circle FX

Up to three concentric rings of text spinning around an optional centre badge or image. Each ring has its own text, colour and speed (negative speed reverses direction); the radii pack inward automatically based on font sizes.

Unblur Text Reveal

A paragraph that resolves word-by-word as the viewer scrolls, with a choice of six animation styles — blur, slide-up, scale, rotate, wave, or glow — and a colour transition from an initial muted hue to the final readable colour.

Jumpy Text FX

Each letter bounces in independently with spring-damped physics, then idles with a subtle hover-bounce — text that feels alive.

Scroll Text FX

Each letter scales, rotates and brightens as it passes the scroll midpoint — an editorial mid-line emphasis effect.

Blurry Text FX

Each word starts heavily blurred and resolves into focus on a stagger. Plays once on load or loops with a configurable hold.

Proximity Text FX

Letters near the cursor scale up and brighten; letters further away dim and shrink — an inverse-distance attention effect.Live customizer

Rotate Text FX

Animation triggerLoop speed0.5Spin rate when trigger is Loop.Per-letter phase0.4How much each letter lags behind the previous one.Load duration (ms)1400msTotal duration of the entrance when trigger is Load.Text colourFont size160pxFontWeight800Transparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.