flip-text

1"use client";
2 
3import React, { useMemo } from "react";
4import { cn } from "@/lib/utils";
5 
6interface FlipTextProps {
7    /**
8     * Additional CSS classes for the wrapper
9     */
10    className?: string;
11 
12    /**
13     * The text content to animate (will be split by spaces)
14     */
15    children: string;
16 
17    /**
18     * Duration of the flip animation in seconds
19     * @default 2.2
20     */
21    duration?: number;
22 
23    /**
24     * Initial delay before animation starts in seconds
25     * @default 0
26     */
27    delay?: number;
28 
29    /**
30     * Whether the animation should loop infinitely
31     * @default true
32     */
33    loop?: boolean;
34 
35    /**
36     * Custom separator for splitting text (default is space)
37     * @default " "
38     */
39    separator?: string;
40 
41    /**
42     * Whether all characters should animate together (no stagger)
43     * @default false
44     */
45    together?: boolean;
46}
47 
48export function FlipText({
49    className,
50    children,
51    duration = 2.2,
52    delay = 0,
53    loop = true,
54    separator = " ",
55    together = false,
56}: FlipTextProps) {
57    const words = useMemo(() => children.split(separator), [children, separator]);
58    const totalChars = children.length;
59 
60    // Calculate character index for each position
61    const getCharIndex = (wordIndex: number, charIndex: number) => {
62        let index = 0;
63        for (let i = 0; i < wordIndex; i++) {
64            index += words[i].length + (separator === " " ? 1 : separator.length);
65        }
66        return index + charIndex;
67    };
68 
69    return (
70        <div
71            className={cn(
72                "flip-text-wrapper inline-block leading-none",
73                className
74            )}
75            style={{ perspective: "1000px" }}
76        >
77            {words.map((word, wordIndex) => {
78                const chars = word.split("");
79 
80                return (
81                    <span
82                        key={wordIndex}
83                        className="word inline-block whitespace-nowrap"
84                        style={{ transformStyle: "preserve-3d" }}
85                    >
86                        {chars.map((char, charIndex) => {
87                            const currentGlobalIndex = getCharIndex(wordIndex, charIndex);
88 
89                            // Calculate delay - if together, use same delay for all
90                            let calculatedDelay = delay;
91                            if (!together) {
92                                const normalizedIndex = currentGlobalIndex / totalChars;
93// … truncated