Container Text Flip

1"use client";
2 
3import React, { useState, useEffect, useId } from "react";
4 
5import { motion } from "motion/react";
6import { cn } from "@/utils/cn";
7 
8export interface ContainerTextFlipProps {
9  /** Array of words to cycle through in the animation */
10  words?: string[];
11  /** Time in milliseconds between word transitions */
12  interval?: number;
13  /** Additional CSS classes to apply to the container */
14  className?: string;
15  /** Additional CSS classes to apply to the text */
16  textClassName?: string;
17  /** Duration of the transition animation in milliseconds */
18  animationDuration?: number;
19}
20 
21export function ContainerTextFlip({
22  words = ["better", "modern", "beautiful", "awesome"],
23  interval = 3000,
24  className,
25  textClassName,
26  animationDuration = 700,
27}: ContainerTextFlipProps) {
28  const id = useId();
29  const [currentWordIndex, setCurrentWordIndex] = useState(0);
30  const [width, setWidth] = useState(100);
31  const textRef = React.useRef(null);
32 
33  const updateWidthForWord = () => {
34    if (textRef.current) {
35      // Add some padding to the text width (30px on each side)
36      // @ts-ignore
37      const textWidth = textRef.current.scrollWidth + 30;
38      setWidth(textWidth);
39    }
40  };
41 
42  useEffect(() => {
43    // Update width whenever the word changes
44    updateWidthForWord();
45  }, [currentWordIndex]);
46 
47  useEffect(() => {
48    const intervalId = setInterval(() => {
49      setCurrentWordIndex((prevIndex) => (prevIndex + 1) % words.length);
50      // Width will be updated in the effect that depends on currentWordIndex
51    }, interval);
52 
53    return () => clearInterval(intervalId);
54  }, [words, interval]);
55 
56  return (
57    <motion.p
58      layout
59      layoutId={`words-here-${id}`}
60      animate={{ width }}
61      transition={{ duration: animationDuration / 2000 }}
62      className={cn(
63        "relative inline-block rounded-lg pt-2 pb-3 text-center text-4xl font-bold text-black md:text-7xl dark:text-white",
64        "[background:linear-gradient(to_bottom,#f3f4f6,#e5e7eb)]",
65        "shadow-[inset_0_-1px_#d1d5db,inset_0_0_0_1px_#d1d5db,_0_4px_8px_#d1d5db]",
66        "dark:[background:linear-gradient(to_bottom,#374151,#1f2937)]",
67        "dark:shadow-[inset_0_-1px_#10171e,inset_0_0_0_1px_hsla(205,89%,46%,.24),_0_4px_8px_#00000052]",
68        className,
69      )}
70      key={words[currentWordIndex]}
71    >
72      <motion.div
73        transition={{
74          duration: animationDuration / 1000,
75          ease: "easeInOut",
76        }}
77// … truncated