_{Hero made by @ybouane.}

@crazygl/hero-lettermorph

Heading where each letter cross-fades and morphs through the next phrase — letters that match stay, letters that don't blur-swap.

Demo

Letter Morph

Install

npm install @crazygl/hero-lettermorph

Usage

import LetterMorph from '@crazygl/hero-lettermorph';

export default function Hero() {
  return (
    <LetterMorph
      phrases={`STORY\nSPACE\nSOUND\nSHAPE`}
      holdDuration={1500}
      morphDuration={700}
    />
  );
}

Customise

• Content — phrases (one per line; the heading cycles through them).
• Timing — holdDuration, morphDuration, perLetterStagger, blurAmount.
• Typography — textColor, fontSize, headingFontFamily (Google font), headingFontWeight.
• Backdrop — transparentBackground, bgColor.

Best for

• Brand or product taglines that cycle through related words.
• Agency / studio landing pages with a punchy single-word headline.
• Feature reveals where the message evolves while the layout stays still.

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.