Falnix UI

Text Generate Effect

A cool typewriter-style animation that reveals text word-by-word with a smooth blur and fade-in effect.

TextAnimation

Component Preview

Oxygen gets you high. In a catastrophic emergency, we're taking giant, panicked breaths. Suddenly you become euphoric, docile. You accept your fate.

Installation

npm install framer-motion clsx tailwind-merge

Copy the source code below into components/ui/text-generate-effect.tsx:

1"use client";
2import { useEffect } from "react";
3import { motion, stagger, useAnimate } from "framer-motion";
4import { cn } from "@falnix/ui";
5
6export const TextGenerateEffect = ({
7 words,
8 className,
9 filter = true,
10 duration = 0.5,
11}: {
12 words: string;
13 className?: string;
14 filter?: boolean;
15 duration?: number;
16}) => {
17 const [scope, animate] = useAnimate();
18 let wordsArray = words.split(" ");
19 useEffect(() => {
20 animate(
21 "span",
22 {
23 opacity: 1,
24 filter: filter ? "blur(0px)" : "none",
25 },
26 {
27 duration: duration ? duration : 1,
28 delay: stagger(0.2),
29 }
30 );
31 }, [scope.current]);
32
33 const renderWords = () => {
34 return (
35 <motion.div ref={scope}>
36 {wordsArray.map((word, idx) => {
37 return (
38 <motion.span
39 key={word + idx}
40 className="dark:text-white text-black opacity-0"
41 style={{
42 filter: filter ? "blur(10px)" : "none",
43 }}
44 >
45 {word}{" "}
46 </motion.span>
47 );
48 })}
49 </motion.div>
50 );
51 };
52
53 return (
54 <div className={cn("font-bold", className)}>
55 <div className="mt-4">
56 <div className=" dark:text-white text-black text-2xl leading-snug tracking-wide">
57 {renderWords()}
58 </div>
59 </div>
60 </div>
61 );
62};

Props & Customization

PropTypeDefaultDescription
wordsstringrequiredThe text to animate.
classNamestring-Additional class names for styling.