Bouncing Text

Each character bounces up and back in a continuous staggered loop. Great for playful headings.

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.

Bouncing TextEach character bounces up and back in a continuous staggered loop. Great for playful headings.

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

type BouncingTextProps = {
  text: string;
  height?: number;
  duration?: number;
  stagger?: number;
};

export function BouncingText({
  text,
  height = 10,
  duration = 0.55,
  stagger = 0.08,
}: BouncingTextProps) {
  const chars = text.split("");

  return (
    <span
      className="mp-bouncing-text"
      style={{ display: "inline-flex" }}
      aria-label={text}
    >
      {chars.map((char, i) => (
        <motion.span
          key={i}
          className="mp-bouncing-text-char"
          style={{ display: "inline-block" }}
          animate={{ y: [0, -height, 0] }}
          transition={{
            duration,
            ease: "easeInOut",
            repeat: Infinity,
            repeatDelay: 0.2,
            delay: i * stagger,
          }}
        >
          {char === " " ? "\u00A0" : char}
        </motion.span>
      ))}
    </span>
  );
}

Installnpm install framer-motion

Props

Prop	Type	Default	Description
textrequired	string	—	Text to bounce
height	number	10	Bounce height in px
duration	number	0.55	Bounce cycle duration in seconds
stagger	number	0.08	Delay between characters in seconds