50: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"] 51: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"] 52:Tdb4,"use client"; import { useEffect, useState, type TransitionEvent } from "react"; import { cn } from "@/lib/utils"; export interface TextLoopProps { items: string[]; /** Ms between steps. */ interval?: number; /** Ms for one slide. */ duration?: number; /** Lines shown in the window (odd numbers keep the active line centered). */ visibleLines?: number; /** Blur and dim lines that are not active. */ dimInactive?: boolean; align?: "left" | "center" | "right"; className?: string; } const LINE = 1.2; // em per line export function TextLoop({ items, interval = 2200, duration = 800, visibleLines = 3, dimInactive = true, align = "left", className, }: TextLoopProps) { const [step, setStep] = useState(0); const [instant, setInstant] = useState(false); const n = items.length; const pad = Math.floor(Math.max(1, visibleLines) / 2); const i = Math.min(step, n); useEffect(() => { if (n < 2) return; const id = window.setInterval(() => { const still = window.matchMedia("(prefers-reduced-motion: reduce)").matches; // At the cloned end, wait for the snap back to 0 before moving on. setStep((s) => (still ? (s + 1) % n : s >= n ? s : s + 1)); }, interval); return () => window.clearInterval(id); }, [n, interval]); useEffect(() => { if (!instant) return; let raf = requestAnimationFrame(() => (raf = requestAnimationFrame(() => setInstant(false)))); return () => cancelAnimationFrame(raf); }, [instant]); const onEnd = (e: TransitionEvent) => { if (e.target !== e.currentTarget || e.propertyName !== "transform" || step < n) return; setInstant(true); setStep(0); }; // pad lines before, the list, then pad + 1 wrapped lines so the loop point looks identical. const track = Array.from({ length: n + pad * 2 + 1 }, (_, k) => items[(((k - pad) % n) + n) % n]); const ease = "cubic-bezier(.76,0,.24,1)"; const transition = instant ? "none" : `${duration}ms ${ease}`; const edge = (pad / Math.max(1, visibleLines)) * 90; const fade = `linear-gradient(transparent, #000 ${edge}%, #000 ${100 - edge}%, transparent)`; return ( {items.join(", ")} {n > 0 && ( {track.map((t, k) => { const d = Math.abs(k - i - pad); return ( {t} ); })} )} ); } 4f:["$","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,["$","$L50",null,{"namespace":"@glint-ui","registryDependencies":["utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ui/text-loop.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]