Text Shimmer Wave

Per-character opacity wave shimmer using staggered framer-motion animations. Great for loading states.

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 Shimmer WavePer-character opacity wave shimmer using staggered framer-motion animations. Great for loading states.

"use client";
import { motion } from "framer-motion";

type TextShimmerWaveProps = {
  text: string;
  duration?: number;
};

export function TextShimmerWave({ text, duration = 1.5 }: TextShimmerWaveProps) {
  const chars = text.split("");
  return (
    <span className="mp-text-shimmer-wave" aria-label={text}>
      {chars.map((char, i) => (
        <motion.span
          key={i}
          className="mp-text-shimmer-wave-char"
          animate={{ opacity: [0.3, 1, 0.3] }}
          transition={{
            duration,
            repeat: Infinity,
            delay: i * 0.05,
            ease: "easeInOut",
          }}
        >
          {char === " " ? "\u00A0" : char}
        </motion.span>
      ))}
    </span>
  );
}

Installnpm install framer-motion

Props

Prop	Type	Default	Description
textrequired	string	—	Text to apply wave shimmer to
duration	number	1.5	Wave cycle duration in seconds