Words Stagger

1"use client";
2 
3import React from "react";
4import { motion, Transition } from "motion/react";
5import { cn } from "@/lib/utils";
6 
7interface WordsStaggerProps {
8  children: React.ReactNode;
9  className?: string;
10  delay?: number;
11  stagger?: number;
12  speed?: number;
13  autoStart?: boolean;
14  onStart?: () => void;
15  onComplete?: () => void;
16  inView?: boolean;
17  once?: boolean;
18}
19 
20export function WordsStagger({
21  children,
22  className,
23  delay = 0,
24  stagger = 0.1,
25  speed = 0.5,
26  autoStart = true,
27  onStart,
28  onComplete,
29  inView = false,
30  once = true,
31}: WordsStaggerProps) {
32  const text = React.Children.toArray(children)
33    .filter((child) => typeof child === "string")
34    .join("");
35 
36  const words = text.split(" ").filter((word) => word.length > 0);
37 
38  const transition: Transition = {
39    type: "tween",
40    ease: "easeOut",
41    duration: speed,
42  };
43 
44  const containerVariants = {
45    hidden: {},
46    visible: {
47      transition: {
48        staggerChildren: stagger,
49        delayChildren: delay,
50      },
51    },
52  };
53 
54  const wordVariants = {
55    hidden: {
56      opacity: 0,
57      y: 10,
58      filter: "blur(10px)",
59    },
60    visible: {
61      opacity: 1,
62      y: 0,
63      filter: "blur(0px)",
64      transition,
65    },
66  };
67 
68  return (
69    <motion.div
70      className={cn("flex flex-wrap", className)}
71      variants={containerVariants}
72      initial="hidden"
73      whileInView={inView ? "visible" : undefined}
74      animate={inView ? undefined : autoStart ? "visible" : "hidden"}
75      viewport={{ once }}
76      onAnimationStart={onStart}
77      onAnimationComplete={onComplete}
78    >
79      {words.map((word, index) => (
80        <motion.span
81          key={`${word}-${index}`}
82          className="inline-block"
83          variants={wordVariants}
84        >
85          {word}
86          {index < words.length - 1 && (
87            <span className="inline-block">&nbsp;</span>
88          )}
89        </motion.span>
90      ))}
91    </motion.div>
92  );
93}