Blur In

Animate text or elements into view with a blur-to-focus effect. Ideal for hero headings and section reveals.

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.

Blur InAnimate text or elements into view with a blur-to-focus effect. Ideal for hero headings and section reveals.

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

type BlurInProps = {
  children: React.ReactNode;
  duration?: number;
  delay?: number;
};

export function BlurIn({ children, duration = 0.6, delay = 0 }: BlurInProps) {
  return (
    <motion.div
      initial={{ filter: "blur(12px)", opacity: 0 }}
      animate={{ filter: "blur(0px)", opacity: 1 }}
      transition={{ duration, delay, ease: "easeOut" }}
    >
      {children}
    </motion.div>
  );
}

Installnpm install framer-motion

Props

Prop	Type	Default	Description
childrenrequired	ReactNode	—	Content to animate
duration	number	0.6	Animation duration in seconds
delay	number	0	Delay before animation starts