Text Reveal

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { useEffect } from "react";
5import { motion, stagger, useAnimate } from "motion/react";
6 
7const TextReveal = ({
8  text,
9  className,
10  filter = true,
11  duration = 0.5,
12  staggerDelay = 0.2,
13}: {
14  text: string;
15  className?: string;
16  filter?: boolean;
17  duration?: number;
18  staggerDelay?: number;
19}) => {
20  const [scope, animate] = useAnimate();
21  const textArray = text.split(" ");
22 
23  useEffect(() => {
24    animate(
25      "span",
26      {
27        opacity: 1,
28        filter: filter ? "blur(0px)" : "none",
29      },
30      {
31        duration: duration,
32        delay: stagger(staggerDelay),
33        ease: "easeOut",
34      },
35    );
36  }, [animate, duration, filter, staggerDelay]);
37 
38  return (
39    <div className={cn("leading-normal", className)}>
40      <motion.div ref={scope}>
41        {textArray.map((word, idx) => {
42          return (
43            <motion.span
44              key={word + idx}
45              className="inline-block"
46              style={{
47                filter: filter ? "blur(8px)" : "none",
48                marginRight: "0.25rem",
49                opacity: 0,
50              }}
51            >
52              {word}
53            </motion.span>
54          );
55        })}
56      </motion.div>
57    </div>
58  );
59};
60 
61export default TextReveal;