Loading hero…

@crazygl/text-swap-animation

Text Swap Animation

Phrases swap with a clean two-layer flip — old rises and fades, new rises in from below. The cleanest possible rotator.

React

Font

#swap

#transition

#typography

Usage

import TextSwapAnimation from '@crazygl/hero-text-swap-animation';

export default function Page() {
  return (
    <TextSwapAnimation
      phrases={'Design intentional.\nShip ruthlessly.\nIterate forever.'}
      holdMs={1800}
      transitMs={480}
      textColor="#ffffff"
      fontSize={88}
    />
  );
}

Customise

Content — phrases (one line per phrase), holdMs (dwell time), transitMs (swap duration).
Type — textColor, fontSize, maxWidth, textAlign, lineHeight, letterSpacing, headingFontFamily, headingFontWeight.
Backdrop — transparentBackground, bgColor.

Best for

SaaS / landing headlines that cycle a value proposition.
Portfolio or agency intros that rotate a few taglines.
Anywhere you want a minimal, distraction-free animated headline.

01 · Install the package

One command, zero config.

npm install @crazygl/hero-text-swap-animation

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 TextSwapAnimation from '@crazygl/hero-text-swap-animation';

export default function Landing() {
  return (
    <TextSwapAnimation />
  );
}

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 TextSwapAnimation from '@crazygl/hero-text-swap-animation';

export default function Page() {
  return (
    <section>
      <TextSwapAnimation
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}

Similar heroes

Live customizer