flip-words

1"use client";
2import React, { useCallback, useEffect, useRef, useState } from "react";
3import { AnimatePresence, motion, LayoutGroup } from "motion/react";
4import { cn } from "@/lib/utils";
5 
6export const FlipWords = ({
7  words,
8  duration = 3000,
9  className,
10}: {
11  words: string[];
12  duration?: number;
13  className?: string;
14}) => {
15  const [currentWord, setCurrentWord] = useState(words[0]);
16  const [isAnimating, setIsAnimating] = useState<boolean>(false);
17 
18  // thanks for the fix Julian - https://github.com/Julian-AT
19  const startAnimation = useCallback(() => {
20    const word = words[words.indexOf(currentWord) + 1] || words[0];
21    setCurrentWord(word);
22    setIsAnimating(true);
23  }, [currentWord, words]);
24 
25  useEffect(() => {
26    if (!isAnimating)
27      setTimeout(() => {
28        startAnimation();
29      }, duration);
30  }, [isAnimating, duration, startAnimation]);
31 
32  return (
33    <AnimatePresence
34      onExitComplete={() => {
35        setIsAnimating(false);
36      }}
37    >
38      <motion.div
39        initial={{
40          opacity: 0,
41          y: 10,
42        }}
43        animate={{
44          opacity: 1,
45          y: 0,
46        }}
47        transition={{
48          type: "spring",
49          stiffness: 100,
50          damping: 10,
51        }}
52        exit={{
53          opacity: 0,
54          y: -40,
55          x: 40,
56          filter: "blur(8px)",
57          scale: 2,
58          position: "absolute",
59        }}
60        className={cn(
61          "z-10 inline-block relative text-left text-neutral-900 dark:text-neutral-100 px-2",
62          className
63        )}
64        key={currentWord}
65      >
66        {/* edit suggested by Sajal: https://x.com/DewanganSajal */}
67        {currentWord.split(" ").map((word, wordIndex) => (
68          <motion.span
69            key={word + wordIndex}
70            initial={{ opacity: 0, y: 10, filter: "blur(8px)" }}
71            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
72            transition={{
73              delay: wordIndex * 0.3,
74              duration: 0.3,
75            }}
76            className="inline-block whitespace-nowrap"
77          >
78            {word.split("").map((letter, letterIndex) => (
79              <motion.span
80                key={word + letterIndex}
81                initial={{ opacity: 0, y: 10, filter: "blur(8px)" }}
82                animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
83                transition={{
84                  delay: wordIndex * 0.3 + letterIndex * 0.05,
85                  duration: 0.2,
86                }}
87// … truncated