Letter 3d Swap

1"use client"
2 
3import React, { ElementType, useCallback, useMemo, useState } from "react"
4import {
5  AnimationOptions,
6  useAnimate,
7  ValueAnimationTransition,
8} from "motion/react"
9 
10import { cn } from "@/lib/utils"
11 
12// handy function to split text into characters with support for unicode and emojis
13const splitIntoCharacters = (text: string): string[] => {
14  if (typeof Intl !== "undefined" && "Segmenter" in Intl) {
15    const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" })
16    return Array.from(segmenter.segment(text), ({ segment }) => segment)
17  }
18  // Fallback for browsers that don't support Intl.Segmenter
19  return Array.from(text)
20}
21 
22// handy function to extract text from children
23const extractTextFromChildren = (children: React.ReactNode): string | undefined => {
24  // Handle null/undefined
25  if (children == null) return ""
26 
27  // Handle string
28  if (typeof children === "string") return children
29 
30  // Handle number
31  if (typeof children === "number") return String(children)
32 
33  // Handle arrays (including fragments)
34  if (Array.isArray(children)) {
35    return children.map(extractTextFromChildren).join("")
36  }
37 
38  // Handle React elements
39  if (React.isValidElement(children)) {
40    const props = (children as React.ReactElement).props
41    const childText = (props as any).children as React.ReactNode
42 
43    // Recursively extract text from children
44    if (childText != null) {
45      return extractTextFromChildren(childText)
46    }
47 
48    return ""
49  }
50}
51 
52/**
53 * Internal helper interface for representing a word in the text with its characters and spacing information
54 */
55interface WordObject {
56  /**
57   * Array of individual characters in the word
58   */
59  characters: string[]
60  /**
61   * Whether this word needs a space after it
62   */
63  needsSpace: boolean
64}
65 
66interface Letter3DSwapProps {
67  /**
68   * The content to be displayed and animated
69   */
70  children: React.ReactNode
71 
72  /**
73   * HTML Tag to render the component as
74   */
75  as?: ElementType
76  /**
77   * Class name for the main container element.
78   */
79  mainClassName?: string
80 
81  /**
82   * Class name for the front face element.
83   */
84  frontFaceClassName?: string
85 
86  /**
87   * Class name for the secondary face element.
88   */
89  secondFaceClassName?: string
90 
91  /**
92   * Duration of stagger delay between elements in seconds.
93   * @default 0.05
94   */
95  staggerDuration?: number
96 
97  /**
98   * Direction to stagger animations from.
99   * @default "first"
100   */
101// … truncated