Morphing Text

Source: Magic UI ↗
Author: Magic UI
Licence: MIT

Loading…

Words melt into one another through a blur-and-threshold filter.

Code

"use client";

import { MorphingText } from "@/lab/magicui/ui/morphing-text";

const texts = ["Hello", "Morphing", "Text", "Animation", "React", "Component", "Smooth", "Transition", "Engaging"];

export default function MorphingTextDemo() {
  return (
    <div className="@container relative flex h-full w-full items-center justify-center text-neutral-950">
      <MorphingText
        texts={texts}
        className="h-[1.1em] text-[clamp(2rem,9cqw,4.5rem)] md:h-[1.1em] lg:text-[clamp(2rem,9cqw,4.5rem)]"
      />
    </div>
  );
}

Prompt

Build "Morphing Text", a text animation. What it does: Words melt into one another through a blur-and-threshold filter. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS. Technique: a requestAnimationFrame loop, inline SVG. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://magicui.design/docs/components/morphing-text (Magic UI, MIT).