Morphing Glyphs

Use it like any other component. Choose a theme with preset; any prop you pass as well overrides the preset.

import { MorphingText } from '@/components/effects/morphing-glyphs/text'

export function Hero() {
  return (
    <>
      {/* A hero headline word that melts into the next */}
      <h1 style={{ fontSize: 96 }}>
        Make it{' '}
        <MorphingText words={['clearer', 'faster', 'yours']} preset="Sunset" />
      </h1>

      {/* Inside a sentence: the box has the word's width and sits on the text baseline */}
      <p>
        We help teams <MorphingText words={['design', 'build', 'ship']} variant="glow" preset="Aurora" /> faster.
      </p>

      {/* Reserve the widest word's width so nothing around it moves */}
      <MorphingText as="h2" words={['Ink', 'Paper', 'Press']} preset="Ink" width="max" interval={3} />
    </>
  )
}

// Imperative control, and a callback when a morph starts:
//   const ref = useRef<MorphingTextHandle>(null)
//   <MorphingText ref={ref} words={words} autoplay={false} onChange={(i, word) => console.log(i, word)} />
//   <button onClick={() => ref.current?.next()}>Next</button>   // also prev() and goTo(2)
// The stage above is <MorphingGlyphsShowcase />, also exported, if you want the same hero.

<MorphingText preset="Ink" wordSet={"Design · Build · Ship"} />

• Aurora
• Ink
• Chrome
• Sunset
• Mono

What the command adds to your project, and where.

• components/effects/morphing-glyphs/morphing-glyphs.tsx

  The component.

• components/effects/morphing-glyphs/text.tsx

  The component.

• components/effects/morphing-glyphs/showcase.tsx

  The component.

• components/effects/morphing-glyphs/engine.ts

  The component.

• components/effects/morphing-glyphs/look.ts

  The component.

• components/effects/morphing-glyphs/styles.ts

  The component.

• components/effects/morphing-glyphs/stage-styles.ts

  The component.

• lib/effect-runtime.ts

  Shared by every shader effect: resizing, pausing, reduced motion, context loss and the no-WebGL fallback. Installed once.

• The real word is always in the DOM. A visually hidden aria-live="polite" region carries the current word (updates are throttled to about one a second); the drawn letters are aria-hidden. The first word is rendered by the server and all the animation starts after mount, so there is no hydration mismatch.
• Ink draws the outgoing and incoming word on two layers with animated blur and opacity under an SVG alpha-threshold filter, so strokes melt into liquid blobs and snap back. The filter is only on while a morph runs: at rest the word is plain, crisp type.
• Glow blooms the two words through each other additively, with a halo and a red/blue edge fringe that peak mid-morph. Slide-blur rolls the words vertically with a true vertical-only motion blur. A WebGL pass was left out on purpose: the SVG and CSS version is sharper at any size and costs nothing to install.
• The box is an inline-block with an invisible in-flow copy of the word, so it takes the word's font, line-height and text baseline and sits in a sentence like any other word. width="auto" eases the box's width between the (once measured) widths of the words; width="max" reserves the longest word through a CSS grid, so even the server render holds the full width.
• One requestAnimationFrame loop, only while a morph runs. Rotation pauses while the word is offscreen, in a hidden tab and, if pauseOnHover, under the pointer, and resumes where it left off.
• next(), prev() and goTo(i) are on the ref; calls made during a morph queue the latest target. loop={false} stops on the last word; autoplay={false} leaves the changes to you.
• Under prefers-reduced-motion the word does not rotate by itself, and next(), prev() and goTo() swap with a short fade instead of a morph.

See all effects