Font Changer

Heading cycles through a curated stack of Google Fonts on a timer — each crossfade preserves the line so the words stay readable while the personality changes. Per-font scale is auto-normalised so display, mono, and handwriting faces all read at the same visual size. Prefix and suffix stay in a fixed font when you only want part of the line to flip.

React

#font

#cycle

#typography

Usage

import FontChanger from '@crazygl/hero-font-changer';

export default function Hero() {
  return (
    <FontChanger
      prefix="Type, in every"
      heading="voice"
      fontList={`Inter\nPlayfair Display\nMonoton\nLobster`}
      holdDuration={140}
      fadeDuration={90}
    />
  );
}

Customise

Content — prefix (fixed font), heading (the cycling word), suffix (fixed font), fontList (one Google font per line).
Timing — holdDuration (ms each font holds), fadeDuration (ms crossfade).
Typography — textColor, fontSize, fontWeight.
Backdrop — transparentBackground, bgColor.

Best for

Type foundry / design-tool landing pages.
Brand or agency heroes that want to show range and personality.
Showcasing multilingual or multi-voice messaging.

01 · Install the package

One command, zero config.

npm install @crazygl/hero-font-changer

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 FontChanger from '@crazygl/hero-font-changer';

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

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 FontChanger from '@crazygl/hero-font-changer';

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