51: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/3j06ow7w40nxu.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"] 52: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/3j06ow7w40nxu.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"] 53:Tb95,"use client"; import * as React from "react"; import { gsap, motionScale } from "@/lib/motion"; import { cn } from "@/lib/utils"; type RotatingTextProps = Omit, "children"> & { words: string[]; /** Milliseconds each word stays. */ interval?: number; }; /** * Cycles through words in place: the old word rolls up and away letter by letter, the new one rolls in, and * the box eases to the new width so surrounding text never jumps. Stops on hover; static with motion off. */ function RotatingText({ words, interval = 2400, className, ...props }: RotatingTextProps) { const [index, setIndex] = React.useState(0); const [paused, setPaused] = React.useState(false); const boxRef = React.useRef(null); const previous = React.useRef(null); React.useEffect(() => { const box = boxRef.current; if (paused || words.length < 2 || !box || !motionScale(box)) return; const id = setInterval(() => setIndex((i) => (i + 1) % words.length), interval); return () => clearInterval(id); }, [paused, interval, words.length]); React.useLayoutEffect(() => { const box = boxRef.current; if (!box) return; const current = box.querySelector('[data-slot="rotating-word"]'); const old = box.querySelector('[data-slot="rotating-old"]'); if (!current || previous.current === null) { previous.current = words[index] ?? ""; return; } const scale = motionScale(box); const fromWidth = old?.offsetWidth ?? current.offsetWidth; gsap.fromTo(box, { width: fromWidth }, { width: current.offsetWidth, duration: 0.5, ease: "cue", clearProps: "width" }); gsap.fromTo(current.children, { yPercent: 100, opacity: 0 }, { yPercent: 0, opacity: 1, duration: 0.5, ease: "cue", stagger: 0.025 * scale }); if (old) gsap.to(old.children, { yPercent: -100, opacity: 0, duration: 0.35, ease: "cue", stagger: 0.02 * scale }); previous.current = words[index] ?? ""; }, [index, words]); const letters = (word: string) => [...word].map((c, i) => {c}); const word = words[index] ?? ""; const old = previous.current !== null && previous.current !== word ? previous.current : null; return ( setPaused(true)} onPointerLeave={() => setPaused(false)} {...props} > {old && ( )} {letters(word)} ); } export { RotatingText }; export type { RotatingTextProps }; 50:["$","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":[null,["$","$L51",null,{"namespace":"@cuelark","registryDependencies":["utils","https://ui.cuelark.com/r/theme.json","https://ui.cuelark.com/r/motion.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"src/registry/cuelark/ui/rotating-text.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]