Text Generate Effect
by Dax · tsx · 26 lines
Words fade in one at a time with a blur-to-sharp animation, like the text is being typed by an AI. Perfect for hero headlines and loading states.
textanimationheroframer-motion
26 lines
"use client";
import { motion } from "framer-motion";
export function TextGenerate({ text, className = "" }: {
text: string;
className?: string;
}) {
const words = text.split(" ");
return (
<div className={className}>
{words.map((word, i) => (
<motion.span
key={i}
initial={{ opacity: 0, filter: "blur(8px)" }}
animate={{ opacity: 1, filter: "blur(0px)" }}
transition={{ delay: i * 0.08, duration: 0.4, ease: "easeOut" }}
className="inline-block mr-[0.25em]"
>
{word}
</motion.span>
))}
</div>
);
}