5f: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 60: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 61:T21b1,"use client"; import { useEffect, useRef, useSyncExternalStore } from "react"; import { cn } from "@/lib/utils"; const REDUCE = "(prefers-reduced-motion: reduce)"; const subscribeReduce = (onChange: () => void) => { const query = window.matchMedia(REDUCE); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; // The markup differs with reduced motion (one copy or two, dimmed or not), // so hydration renders the server's answer first and switches right after, // instead of mismatching. function useReducedMotion() { return useSyncExternalStore( subscribeReduce, () => window.matchMedia(REDUCE).matches, () => false, ); } // Braking is a response to the pointer, so it stays inside the 300ms budget. const STOP_MS = 300; // Picking back up is ambient, not a response, so it eases in a little slower // and never feels like the row lurches away from the cursor. const RESUME_MS = 450; export function Marquee({ items, // px per second, so a longer list scrolls at the same pace, not faster. speed = 40, direction = "left", label, // Dims the row except for a reading window in the middle. lens = true, className, }: { items: string[]; speed?: number; direction?: "left" | "right"; label?: string; lens?: boolean; className?: string; }) { const reduceMotion = useReducedMotion(); const trackRef = useRef(null); const lensRef = useRef(null); const groupRef = useRef(null); const anims = useRef([]); const raf = useRef(0); // A still row has nothing crossing the window, and hand-scrolling it // would slide the base copy out from under the lit one. const showLens = lens && !reduceMotion; useEffect(() => { const track = trackRef.current; const group = groupRef.current; if (!track || !group || reduceMotion) return; // Constant motion is the one place linear is right: any easing would make // the loop visibly surge and settle at the seam. WAAPI keyframes run on // the compositor like CSS ones, with no JS per frame, but also expose // playbackRate for the hover brake. const run = (el: HTMLElement) => el.animate( [{ transform: "translateX(0)" }, { transform: "translateX(-50%)" }], { duration: (group.offsetWidth / speed) * 1000, iterations: Infinity, easing: "linear", direction: direction === "right" ? "reverse" : "normal", }, ); // The lit copy runs its own animation, created in the same frame so the // two start together; every later change is applied to both. const all = [track, lensRef.current] .filter((el): el is HTMLDivElement => el !== null) .map(run); anims.current = all; // Width changes (fonts loading, resizes) retime the loop, keeping the // current progress so the row never jumps. const ro = new ResizeObserver(() => { const next = (group.offsetWidth / speed) * 1000; const [a] = all; const prev = Number(a.effect?.getTiming().duration) || next; if (Math.abs(next - prev) < 1) return; const at = (((Number(a.currentTime) || 0) % prev) / prev) * next; for (const b of all) { b.effect?.updateTiming({ duration: next }); b.currentTime = at; } }); ro.observe(group); return () => { cancelAnimationFrame(raf.current); ro.disconnect(); all.forEach((a) => a.cancel()); anims.current = []; }; }, [reduceMotion, speed, direction, showLens]); // animation-play-state can only snap and playbackRate can't be // transitioned, so ease the rate by hand. Starting from the current rate // means re-entering mid-resume brakes smoothly from wherever it got to. const rampTo = (target: number) => { const all = anims.current; const a = all[0]; if (!a) return; cancelAnimationFrame(raf.current); if (target > 0 && a.playState === "paused") all.forEach((b) => b.play()); const from = a.playbackRate; // A partial ramp takes a proportional share of the time. const ms = (target === 0 ? STOP_MS : RESUME_MS) * Math.abs(target - from); const start = performance.now(); const tick = (now: number) => { const t = ms > 0 ? Math.min(1, (now - start) / ms) : 1; // Braking bites hard then coasts (ease-out cubic); resuming builds up // gently (ease-in-out quad) so the speed change reads as momentum. const e = target === 0 ? 1 - (1 - t) ** 3 : t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2; for (const b of all) b.playbackRate = from + (target - from) * e; if (t < 1) raf.current = requestAnimationFrame(tick); // Fully stopped: pause so the compositor stops ticking an idle loop. // Both pause on the same frame, so the copies stay locked together. else if (target === 0) all.forEach((b) => b.pause()); }; raf.current = requestAnimationFrame(tick); }; const group = (hidden: boolean) => (

{item} {/* Sized in em so the dot and gap scale with whatever text size the row is given. */}

); return (

{ if (e.pointerType !== "touch") rampTo(0); }} onPointerLeave={(e) => { if (e.pointerType !== "touch") rampTo(1); }} className={cn( "relative overflow-hidden py-2 select-none", // Fades 12% of each edge so items drift in and out instead of being // cut by a hard wall. "[mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)]", // Standing still, clipped items would be unreachable, so the row // scrolls by hand instead. reduceMotion && "overflow-x-auto [scrollbar-width:none] select-auto [&::-webkit-scrollbar]:hidden", className, )} >

{group(false)} {!reduceMotion && group(true)}

{showLens && ( // A second copy of the row at full strength, revealed only through a // soft window in the middle: words brighten as they cross it, and // braking on hover leaves one sitting in the lens, read.

{group(true)} {group(true)}

)}

); } export default function MarqueeDemo() { return (

{/* Slower, quieter and moving the other way, so it reads as a layer further back rather than a second copy. */} ); } 5e:["$","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,["$","$L5f",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],null]}],["$","$L60",null,{"files":[{"path":"components/marquee.tsx","content":"$61","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]