flip-fade-text

1"use client"
2 
3import { useEffect, useState, useMemo, useCallback, memo } from "react"
4import { motion, AnimatePresence } from "framer-motion"
5import { cn } from "@/lib/utils"
6 
7interface FlipFadeTextProps {
8    /**
9     * Array of words to cycle through
10     * @default ["LOADING", "COMPUTING", "SEARCHING", "RETRIEVING", "ASSEMBLING"]
11     */
12    words?: string[]
13    /**
14     * Interval between word changes in milliseconds
15     * @default 2500
16     */
17    interval?: number
18    /**
19     * Additional CSS classes for the container
20     */
21    className?: string
22    /**
23     * Additional CSS classes for the text
24     */
25    textClassName?: string
26    /**
27     * Animation duration for each letter in seconds
28     * @default 0.6
29     */
30    letterDuration?: number
31    /**
32     * Stagger delay between letters on enter in seconds
33     * @default 0.1
34     */
35    staggerDelay?: number
36    /**
37     * Stagger delay between letters on exit in seconds
38     * @default 0.05
39     */
40    exitStaggerDelay?: number
41}
42 
43const defaultWords = ["LOADING", "COMPUTING", "SEARCHING", "RETRIEVING", "ASSEMBLING"]
44 
45// Memoized Letter component for performance
46const Letter = memo(function Letter({
47    char,
48    letterDuration
49}: {
50    char: string
51    letterDuration: number
52}) {
53    return (
54        <motion.span
55            style={{ transformStyle: "preserve-3d" }}
56            variants={{
57                initial: {
58                    rotateX: 90,
59                    y: 20,
60                    opacity: 0,
61                    filter: "blur(8px)",
62                },
63                animate: {
64                    rotateX: 0,
65                    y: 0,
66                    opacity: 1,
67                    filter: "blur(0px)",
68                    transition: {
69                        duration: letterDuration,
70                        ease: [0.2, 0.65, 0.3, 0.9],
71                    },
72                },
73                exit: {
74                    rotateX: -90,
75                    y: -20,
76                    opacity: 0,
77                    filter: "blur(8px)",
78                    transition: {
79                        duration: letterDuration * 0.67,
80                        ease: "easeIn",
81                    },
82                },
83            }}
84            className="inline-block"
85        >
86            {char}
87        </motion.span>
88    )
89})
90 
91// Memoized Word component for performance
92const Word = memo(function Word({
93    text,
94    staggerDelay,
95    exitStaggerDelay,
96    letterDuration,
97// … truncated