4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T2fa7,"use client" import { ElementType, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState, } from "react" import { AnimatePresence, AnimatePresenceProps, motion, MotionProps, Transition, } from "motion/react" import { cn } from "@/lib/utils" // handy function to split text into characters with support for unicode and emojis const splitIntoCharacters = (text: string): string[] => { if (typeof Intl !== "undefined" && "Segmenter" in Intl) { const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" }) return Array.from(segmenter.segment(text), ({ segment }) => segment) } // Fallback for browsers that don't support Intl.Segmenter return Array.from(text) } interface TextRotateProps { /** * Array of text strings to rotate through. * Required prop with no default value. */ texts: string[] /** * render as HTML Tag */ as?: ElementType /** * Time in milliseconds between text rotations. * @default 2000 */ rotationInterval?: number /** * Initial animation state or array of states. * @default { y: "100%", opacity: 0 } */ initial?: MotionProps["initial"] | MotionProps["initial"][] /** * Animation state to animate to or array of states. * @default { y: 0, opacity: 1 } */ animate?: MotionProps["animate"] | MotionProps["animate"][] /** * Animation state when exiting or array of states. * @default { y: "-120%", opacity: 0 } */ exit?: MotionProps["exit"] | MotionProps["exit"][] /** * AnimatePresence mode * @default "wait" */ animatePresenceMode?: AnimatePresenceProps["mode"] /** * Whether to run initial animation on first render. * @default false */ animatePresenceInitial?: boolean /** * Duration of stagger delay between elements in seconds. * @default 0 */ staggerDuration?: number /** * Direction to stagger animations from. * @default "first" */ staggerFrom?: "first" | "last" | "center" | number | "random" /** * Animation transition configuration. * @default { type: "spring", damping: 25, stiffness: 300 } */ transition?: Transition /** * Whether to loop through texts continuously. * @default true */ loop?: boolean /** * Whether to auto-rotate texts. * @default true */ auto?: boolean /** * How to split the text for animation. * @default "characters" */ splitBy?: "words" | "characters" | "lines" | string /** * Callback function triggered when rotating to next text. * @default undefined */ onNext?: (index: number) => void /** * Class name for the main container element. * @default undefined */ mainClassName?: string /** * Class name for the split level wrapper elements. * @default undefined */ splitLevelClassName?: string /** * Class name for individual animated elements. * @default undefined */ elementLevelClassName?: string } /** * Interface for the ref object exposed by TextRotate component. * Provides methods to control text rotation programmatically. * This allows external components to trigger text changes * without relying on the automatic rotation. */ export interface TextRotateRef { /** * Advance to next text in sequence. * If at the end, will loop to beginning if loop prop is true. */ next: () => void /** * Go back to previous text in sequence. * If at the start, will loop to end if loop prop is true. */ previous: () => void /** * Jump to specific text by index. * Will clamp index between 0 and texts.length - 1. */ jumpTo: (index: number) => void /** * Reset back to first text. * Equivalent to jumpTo(0). */ reset: () => void } /** * Internal interface for representing words when splitting text by characters. * Used to maintain proper word spacing and line breaks while allowing * character-by-character animation. This prevents words from breaking * across lines during animation. */ interface WordObject { /** * Array of individual characters in the word. * Uses Intl.Segmenter when available for proper Unicode handling. */ characters: string[] /** * Whether this word needs a space after it. * True for all words except the last one in a sequence. */ needsSpace: boolean } const TextRotate = forwardRef( ( { texts, as = "p", transition = { type: "spring", damping: 25, stiffness: 300 }, initial = { y: "100%", opacity: 0 }, animate = { y: 0, opacity: 1 }, exit = { y: "-120%", opacity: 0 }, animatePresenceMode = "wait", animatePresenceInitial = false, rotationInterval = 2000, staggerDuration = 0, staggerFrom = "first", loop = true, auto = true, splitBy = "characters", onNext, mainClassName, splitLevelClassName, elementLevelClassName, ...props }, ref ) => { const [currentTextIndex, setCurrentTextIndex] = useState(0) // Splitting the text into animation segments const elements = useMemo(() => { const currentText = texts[currentTextIndex] if (splitBy === "characters") { const text = currentText.split(" ") return text.map((word, i) => ({ characters: splitIntoCharacters(word), needsSpace: i !== text.length - 1, })) } return splitBy === "words" ? currentText.split(" ") : splitBy === "lines" ? currentText.split("\n") : currentText.split(splitBy) }, [texts, currentTextIndex, splitBy]) // Helper function to calculate stagger delay for each text segment const getStaggerDelay = useCallback( (index: number, totalChars: number) => { const total = totalChars if (staggerFrom === "first") return index * staggerDuration if (staggerFrom === "last") return (total - 1 - index) * staggerDuration if (staggerFrom === "center") { const center = Math.floor(total / 2) return Math.abs(center - index) * staggerDuration } if (staggerFrom === "random") { const randomIndex = Math.floor(Math.random() * total) return Math.abs(randomIndex - index) * staggerDuration } return Math.abs(staggerFrom - index) * staggerDuration }, [staggerFrom, staggerDuration] ) // Helper function to handle index changes and trigger callback const handleIndexChange = useCallback( (newIndex: number) => { setCurrentTextIndex(newIndex) onNext?.(newIndex) }, [onNext] ) // Go to next text const next = useCallback(() => { const nextIndex = currentTextIndex === texts.length - 1 ? loop ? 0 : currentTextIndex : currentTextIndex + 1 if (nextIndex !== currentTextIndex) { handleIndexChange(nextIndex) } }, [currentTextIndex, texts.length, loop, handleIndexChange]) // Go back to previous text const previous = useCallback(() => { const prevIndex = currentTextIndex === 0 ? loop ? texts.length - 1 : currentTextIndex : currentTextIndex - 1 if (prevIndex !== currentTextIndex) { handleIndexChange(prevIndex) } }, [currentTextIndex, texts.length, loop, handleIndexChange]) // Jump to specific text by index const jumpTo = useCallback( (index: number) => { const validIndex = Math.max(0, Math.min(index, texts.length - 1)) if (validIndex !== currentTextIndex) { handleIndexChange(validIndex) } }, [texts.length, currentTextIndex, handleIndexChange] ) // Reset back to first text const reset = useCallback(() => { if (currentTextIndex !== 0) { handleIndexChange(0) } }, [currentTextIndex, handleIndexChange]) // Get animation props for each text segment. If array is provided, states will be mapped to text segments cyclically. const getAnimationProps = useCallback( (index: number) => { const getProp = ( prop: | MotionProps["initial"] | MotionProps["initial"][] | MotionProps["animate"] | MotionProps["animate"][] | MotionProps["exit"] | MotionProps["exit"][] ) => { if (Array.isArray(prop)) { return prop[index % prop.length] } return prop } return { initial: getProp(initial) as MotionProps["initial"], animate: getProp(animate) as MotionProps["animate"], exit: getProp(exit) as MotionProps["exit"], } }, [initial, animate, exit] ) // Expose all navigation functions via ref useImperativeHandle( ref, () => ({ next, previous, jumpTo, reset, }), [next, previous, jumpTo, reset] ) // Auto-rotate text useEffect(() => { if (!auto) return const intervalId = setInterval(next, rotationInterval) return () => clearInterval(intervalId) }, [next, rotationInterval, auto]) // Custom motion component to render the text as a custom HTML tag provided via prop const MotionComponent = useMemo(() => motion.create(as ?? "p"), [as]) return ( {texts[currentTextIndex]} {(splitBy === "characters" ? (elements as WordObject[]) : (elements as string[]).map((el, i) => ({ characters: [el], needsSpace: i !== elements.length - 1, })) ).map((wordObj, wordIndex, array) => { const previousCharsCount = array .slice(0, wordIndex) .reduce((sum, word) => sum + word.characters.length, 0) return ( {wordObj.characters.map((char, charIndex) => { const totalIndex = previousCharsCount + charIndex const animationProps = getAnimationProps(totalIndex) return ( sum + word.characters.length, 0 ) ), }} className={"inline-block"} > {char} ) })} {wordObj.needsSpace && ( )} ) })} ) } ) TextRotate.displayName = "TextRotate" export default TextRotate4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"fancy/text/text-rotate.tsx","content":"$51","type":"registry:ui","target":"components/fancy/text/text-rotate.tsx"}],"className":"h-[70svh] min-h-80"}]]}]