Morphing Text

Motion

Free, copy-pasteable Tailwind CSS & Framer Motion Morphing Text component. Accessible, fully responsive, dark-mode ready, and customizable.

On this page

Implementation Usage Inline Morphing Standalone Props

Cycle through core value propositions elegantly with Tailwind morphing text. These Tailwind CSS typography animation components melt smoothly from one phrase to the next using precisely timed blur transitions, allowing you to communicate multiple ideas without cluttering the layout.

Morphing text is highly effective in a Hero section headline, or when placed alongside a prominent Call to Action.

Implementation

"use client";

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

interface MorphingTextProps {
  texts: string[];
  className?: string;
  interval?: number;
}

export const MorphingText: React.FC<MorphingTextProps> = ({
  texts, className = "", interval = 3000,
}) => {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setIndex((prev) => (prev + 1) % texts.length);
    }, interval);
    return () => clearInterval(timer);
  }, [texts.length, interval]);

  return (
    <div className={`relative inline-block overflow-hidden ${className}`}>
      <AnimatePresence mode="wait">
        <motion.span
          key={texts[index]}
          initial={{ opacity: 0, y: 20, filter: "blur(8px)" }}
          animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
          exit={{ opacity: 0, y: -20, filter: "blur(8px)" }}
          transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
          className="inline-block"
        >
          {texts[index]}
        </motion.span>
      </AnimatePresence>
    </div>
  );
};

Usage

Inline Morphing

Build beautiful interfaces.

<p>
  Build <MorphingText texts={["beautiful", "accessible", "performant"]} /> interfaces.
</p>

Standalone

Think different.

<MorphingText
  texts={["Think different.", "Stay hungry.", "Stay foolish."]}
  interval={3000}
/>

Props

Prop	Type	Default	Description
`texts`	`string[]`	—	Array of phrases to cycle through
`className`	`string`	`""`	Additional CSS classes
`interval`	`number`	`3000`	Time between transitions (ms)

Fade In

Magnetic Element