Morphing Text

Installation

pnpm dlx @glinui/cli@latest add morphing-text

Credits. Adapted from Magic UI (MIT, (c) Magic UI). Per instance SVG filter id, off screen pause, reduced motion levels, an accessible word list and token colors. Attribution details.

Prefer the package? npm install @glinui/ui @glinui/motion @glinui/tokens

Usage

Improvements: the SVG filter id is unique per instance (the original used a global id that collides), the loop pauses off screen, large frame gaps are clamped, text size is container relative with clamp, and initial markup is the first text, readable before JS runs.

Difference from Word Rotate: Morphing Text is a blur and threshold gooey crossfade in place, Word Rotate swaps words with a vertical slide.

Engines: the `engine` prop is not applicable. Continuous glyph cross-fade driven by a css filter loop; an engine adds nothing.

import { MorphingText } from "@glinui/ui"
export function Demo() {
  return (

import { MorphingText } from "@glinui/ui"


export function Demo() {
  return (
    <MorphingText
      texts={["Calm", "Clear", "Considered"]}
      morphTime={2.4}
      cooldownTime={1.2}
      className="text-[var(--color-accent)]"
    />
  )
}

Accessibility

• All texts are exposed once in a screen reader only span, so the animation never spams a live region.
• The visual layer is aria-hidden.
• The loop pauses while the component is off screen and in background tabs.

Reduced Motion

Motion level none (or prefers-reduced-motion) shows the first text and runs no loop. Level subtle swaps texts with a plain opacity crossfade, no blur and no filter.

API Reference

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

import { MorphingText } from "@glinui/ui"