Text Effect

Animates text entrance per-character or per-word with fade, blur, or slide variants. Staggered with framer-motion.

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 EffectAnimates text entrance per-character or per-word with fade, blur, or slide variants. Staggered with framer-motion.

"use client";
import { motion, type Variants } from "framer-motion";

type TextEffectProps = {
  text: string;
  variant?: "fade" | "blur" | "slide";
  per?: "char" | "word";
  delay?: number;
};

function buildItemVariants(variant: "fade" | "blur" | "slide"): Variants {
  if (variant === "blur")
    return {
      hidden: { opacity: 0, filter: "blur(8px)" },
      show: { opacity: 1, filter: "blur(0px)", transition: { duration: 0.4, ease: "easeOut" } },
    };
  if (variant === "slide")
    return {
      hidden: { opacity: 0, y: 16 },
      show: { opacity: 1, y: 0, transition: { duration: 0.35, ease: "easeOut" } },
    };
  return {
    hidden: { opacity: 0 },
    show: { opacity: 1, transition: { duration: 0.35 } },
  };
}

export function TextEffect({ text, variant = "fade", per = "char", delay = 0 }: TextEffectProps) {
  const pieces = per === "char" ? text.split("") : text.split(" ");
  const containerVariants: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: 0.04, delayChildren: delay } },
  };
  const itemVariants = buildItemVariants(variant);
  return (
    <motion.span
      className="mp-text-effect"
      variants={containerVariants}
      initial="hidden"
      animate="show"
      aria-label={text}
    >
      {pieces.map((piece, i) => (
        <motion.span key={i} variants={itemVariants} className="mp-text-effect-piece">
          {piece}
          {per === "word" && i < pieces.length - 1 ? " " : ""}
        </motion.span>
      ))}
    </motion.span>
  );
}

Installnpm install framer-motion

Props

Prop	Type	Default	Description
textrequired	string	—	Text to animate
variant	"fade" \| "blur" \| "slide"	"fade"	Animation style
per	"char" \| "word"	"char"	Split by character or word
delay	number	0	Delay before animation starts