Text Loop

Cycles through an array of strings with AnimatePresence crossfade. Replaces content inline, perfect for hero subtitles.

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 LoopCycles through an array of strings with AnimatePresence crossfade. Replaces content inline, perfect for hero subtitles.

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

type TextLoopProps = {
  texts: string[];
  interval?: number;
};

export function TextLoop({ texts, interval = 2000 }: TextLoopProps) {
  const [index, setIndex] = useState(0);

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

  return (
    <span className="mp-text-loop">
      <AnimatePresence mode="wait">
        <motion.span
          key={index}
          className="mp-text-loop-item"
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -8 }}
          transition={{ duration: 0.22, ease: "easeOut" }}
        >
          {texts[index]}
        </motion.span>
      </AnimatePresence>
    </span>
  );
}

Installnpm install framer-motion

Props

Prop	Type	Default	Description
textsrequired	string[]	—	Strings to cycle through
interval	number	2000	Time between each string in ms