Hero made by @ybouane.

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

Demo

Font Changer

Install

npm install @crazygl/hero-font-changer

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.

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.