Text Rotate

1"use client"
2 
3import {
4  ElementType,
5  forwardRef,
6  useCallback,
7  useEffect,
8  useImperativeHandle,
9  useMemo,
10  useState,
11} from "react"
12import {
13  AnimatePresence,
14  AnimatePresenceProps,
15  motion,
16  MotionProps,
17  Transition,
18} from "motion/react"
19 
20import { cn } from "@/lib/utils"
21 
22// handy function to split text into characters with support for unicode and emojis
23const splitIntoCharacters = (text: string): string[] => {
24  if (typeof Intl !== "undefined" && "Segmenter" in Intl) {
25    const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" })
26    return Array.from(segmenter.segment(text), ({ segment }) => segment)
27  }
28  // Fallback for browsers that don't support Intl.Segmenter
29  return Array.from(text)
30}
31 
32interface TextRotateProps {
33  /**
34   * Array of text strings to rotate through.
35   * Required prop with no default value.
36   */
37  texts: string[]
38 
39  /**
40   * render as HTML Tag
41   */
42  as?: ElementType
43 
44  /**
45   * Time in milliseconds between text rotations.
46   * @default 2000
47   */
48  rotationInterval?: number
49 
50  /**
51   * Initial animation state or array of states.
52   * @default { y: "100%", opacity: 0 }
53   */
54  initial?: MotionProps["initial"] | MotionProps["initial"][]
55 
56  /**
57   * Animation state to animate to or array of states.
58   * @default { y: 0, opacity: 1 }
59   */
60  animate?: MotionProps["animate"] | MotionProps["animate"][]
61 
62  /**
63   * Animation state when exiting or array of states.
64   * @default { y: "-120%", opacity: 0 }
65   */
66  exit?: MotionProps["exit"] | MotionProps["exit"][]
67 
68  /**
69   * AnimatePresence mode
70   * @default "wait"
71   */
72  animatePresenceMode?: AnimatePresenceProps["mode"]
73 
74  /**
75   * Whether to run initial animation on first render.
76   * @default false
77   */
78  animatePresenceInitial?: boolean
79 
80  /**
81   * Duration of stagger delay between elements in seconds.
82   * @default 0
83   */
84  staggerDuration?: number
85 
86  /**
87   * Direction to stagger animations from.
88   * @default "first"
89   */
90  staggerFrom?: "first" | "last" | "center" | number | "random"
91 
92  /**
93   * Animation transition configuration.
94   * @default { type: "spring", damping: 25, stiffness: 300 }
95   */
96  transition?: Transition
97 
98  /**
99   * Whether to loop through texts continuously.
100   * @default true
101   */
102  loop?: boolean
103 
104  /**
105   * Whether to auto-rotate texts.
106   * @default true
107   */
108  auto?: boolean
109 
110  /**
111   * How to split the text for animation.
112   * @default "characters"
113   */
114  splitBy?: "words" | "characters" | "lines" | string
115 
116  /**
117// … truncated