Text Morph

Morphs smoothly between strings using opacity and blur fade with AnimatePresence.

Use and inspectUse this when the motion supports the surrounding content. Connect callbacks and state to your app, keep the reset preview as a local demonstration, and add a reduced-motion fallback for movement or looping. The preview is synthetic; it does not call a backend.Next: inspect the source below and replace the demo inputs with your own data.

Text MorphMorphs smoothly between strings using opacity and blur fade with AnimatePresence.

"use client";
import { useState, useEffect } from "react";
import { AnimatePresence, motion } from "framer-motion";

type TextMorphProps = {
  texts: string[];
  duration?: number;
};

export function TextMorph({ texts, duration = 0.4 }: TextMorphProps) {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setIndex((i) => (i + 1) % texts.length), 2000);
    return () => clearInterval(id);
  }, [texts.length]);

  return (
    <span className="mp-text-morph">
      <AnimatePresence mode="wait">
        <motion.span
          key={index}
          initial={{ opacity: 0, filter: "blur(6px)", scale: 0.96 }}
          animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
          exit={{ opacity: 0, filter: "blur(6px)", scale: 0.96 }}
          transition={{ duration, ease: "easeOut" }}
          className="mp-text-morph-item"
        >
          {texts[index]}
        </motion.span>
      </AnimatePresence>
    </span>
  );
}

Installnpm install framer-motion

Props

Prop	Type	Default	Description
textsrequired	string[]	—	Strings to morph through
duration	number	0.4	Transition duration in seconds