Text Generate Effect

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};