{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flip-text",
  "type": "registry:ui",
  "dependencies": [],
  "files": [
    {
      "path": "components/ui/flip-text.tsx",
      "content": "\"use client\";\n\nimport React, { useMemo } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface FlipTextProps {\n    /**\n     * Additional CSS classes for the wrapper\n     */\n    className?: string;\n\n    /**\n     * The text content to animate (will be split by spaces)\n     */\n    children: string;\n\n    /**\n     * Duration of the flip animation in seconds\n     * @default 2.2\n     */\n    duration?: number;\n\n    /**\n     * Initial delay before animation starts in seconds\n     * @default 0\n     */\n    delay?: number;\n\n    /**\n     * Whether the animation should loop infinitely\n     * @default true\n     */\n    loop?: boolean;\n\n    /**\n     * Custom separator for splitting text (default is space)\n     * @default \" \"\n     */\n    separator?: string;\n\n    /**\n     * Whether all characters should animate together (no stagger)\n     * @default false\n     */\n    together?: boolean;\n}\n\nexport function FlipText({\n    className,\n    children,\n    duration = 2.2,\n    delay = 0,\n    loop = true,\n    separator = \" \",\n    together = false,\n}: FlipTextProps) {\n    const words = useMemo(() => children.split(separator), [children, separator]);\n    const totalChars = children.length;\n\n    // Calculate character index for each position\n    const getCharIndex = (wordIndex: number, charIndex: number) => {\n        let index = 0;\n        for (let i = 0; i < wordIndex; i++) {\n            index += words[i].length + (separator === \" \" ? 1 : separator.length);\n        }\n        return index + charIndex;\n    };\n\n    return (\n        <div\n            className={cn(\n                \"flip-text-wrapper inline-block leading-none\",\n                className\n            )}\n            style={{ perspective: \"1000px\" }}\n        >\n            {words.map((word, wordIndex) => {\n                const chars = word.split(\"\");\n\n                return (\n                    <span\n                        key={wordIndex}\n                        className=\"word inline-block whitespace-nowrap\"\n                        style={{ transformStyle: \"preserve-3d\" }}\n                    >\n                        {chars.map((char, charIndex) => {\n                            const currentGlobalIndex = getCharIndex(wordIndex, charIndex);\n\n                            // Calculate delay - if together, use same delay for all\n                            let calculatedDelay = delay;\n                            if (!together) {\n                                const normalizedIndex = currentGlobalIndex / totalChars;\n                                const sineValue = Math.sin(normalizedIndex * (Math.PI / 2));\n                                calculatedDelay = sineValue * (duration * 0.25) + delay;\n                            }\n\n                            return (\n                                <span\n                                    key={charIndex}\n                                    className=\"flip-char inline-block relative\"\n                                    data-char={char}\n                                    style={\n                                        {\n                                            \"--flip-duration\": `${duration}s`,\n                                            \"--flip-delay\": `${calculatedDelay}s`,\n                                            \"--flip-iteration\": loop ? \"infinite\" : \"1\",\n                                            transformStyle: \"preserve-3d\",\n                                        } as React.CSSProperties\n                                    }\n                                >\n                                    {char}\n                                </span>\n                            );\n                        })}\n                        {separator === \" \" && wordIndex < words.length - 1 && (\n                            <span className=\"whitespace inline-block\">&nbsp;</span>\n                        )}\n                        {separator !== \" \" && wordIndex < words.length - 1 && (\n                            <span className=\"separator inline-block\">{separator}</span>\n                        )}\n                    </span>\n                );\n            })}\n        </div>\n    );\n}\n\nexport default FlipText;\n",
      "type": "registry:ui",
      "target": "components/ui/flip-text.tsx"
    }
  ]
}