Text Generate Effect

A text generate effect that animates words one by one with a blur and opacity effect.

Oxygen gets you high. In a catastrophic emergency, we're taking giant, panicked breaths. Suddenly you become euphoric, docile. You accept your fate. It's all right here. Emergency water landing, six hundred miles an hour. Blank faces, calm as Hindu cows.

Installation

Copy the code

components/text-generate-effect.tsx

"use client";
import { useEffect } from "react";
import { motion, stagger, useAnimate } from "framer-motion";
import { cn } from "@/lib/utils";

export const TextGenerateEffect = ({
words,
className,
filter = true,
duration = 0.5,
}: {
words: string;
className?: string;
filter?: boolean;
duration?: number;
}) => {
const [scope, animate] = useAnimate();
let wordsArray = words.split(" ");
useEffect(() => {
  animate(
    "span",
    {
      opacity: 1,
      filter: filter ? "blur(0px)" : "none",
    },
    {
      duration: duration ? duration : 1,
      delay: stagger(0.2),
    }
  );
}, [scope.current]);

const renderWords = () => {
  return (
    
      {wordsArray.map((word, idx) => {
        return (
          
            {word}{" "}
          
        );
      })}
    
  );
};

return (
  
    
      
        {renderWords()}
      
    
  
);
};

Props

Prop	Type	Default	Description
words*	string	-	The text to be animated.
className	string	-	Custom classes for the container.
filter	boolean	`true`	Whether to apply blur effect.
duration	number	`0.5`	Duration of each word animation.