52: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"] 53: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"] 54:T18b1,"use client"; import { useEffect, useRef } from "react"; import { cn } from "@/lib/utils"; export interface InfiniteSpiralProps { images: string[]; /** Cards on the spiral; images repeat to fill it. */ count?: number; /** Spiral radius in px. */ radius?: number; /** Degrees between neighbouring cards. */ step?: number; /** Vertical px between neighbouring cards. */ pitch?: number; /** Card width in px. */ cardWidth?: number; /** Idle rotation in cards per second (negative spins the other way). */ speed?: number; className?: string; } export function InfiniteSpiral({ images, count = 30, radius = 300, step = 30, pitch = 30, cardWidth = 150, speed = 0.8, className, }: InfiniteSpiralProps) { const rootRef = useRef(null); const cardRefs = useRef<(HTMLDivElement | null)[]>([]); const n = Math.max(images.length, Math.round(count)); const cfg = useRef({ radius, step, pitch, speed, cardWidth }); useEffect(() => { cfg.current = { radius, step, pitch, speed, cardWidth }; }, [radius, step, pitch, speed, cardWidth]); useEffect(() => { const root = rootRef.current!; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let offset = 0; let vel = 0; let raf = 0; let last = performance.now(); let visible = true; let drag: { x: number; y: number; t: number } | null = null; const render = () => { const { radius: R, step: st, pitch: pt, cardWidth: cw } = cfg.current; const h = root.clientHeight; const edge = h / 2 + cw * 0.35; for (let i = 0; i < n; i++) { const el = cardRefs.current[i]; if (!el) continue; const s = ((((i + offset) % n) + n) % n) - n / 2; // wrapped slot, -n/2..n/2 const a = (s * st * Math.PI) / 180; const x = Math.sin(a) * R; const z = Math.cos(a) * R; const y = -s * pt; const fade = Math.max(0, Math.min(1, (edge - Math.abs(y)) / (cw * 0.6))); const facing = (Math.cos(a) + 1) / 2; // 1 = facing viewer, 0 = far side el.style.transform = `translate3d(${x}px,${y}px,${z}px) rotateY(${(a * 180) / Math.PI}deg)`; el.style.opacity = String(fade * (0.25 + facing * 0.75)); el.style.filter = `brightness(${(0.35 + facing * 0.65).toFixed(2)})`; el.style.zIndex = String(Math.round(z) + 1000); el.style.visibility = fade <= 0 ? "hidden" : "visible"; } }; const tick = (now: number) => { const dt = Math.min(0.05, (now - last) / 1000); last = now; if (!drag) { offset += (vel + (reduced ? 0 : cfg.current.speed)) * dt; vel *= Math.exp(-dt * 2); } render(); raf = visible ? requestAnimationFrame(tick) : 0; }; const start = () => { if (raf || !visible) return; last = performance.now(); raf = requestAnimationFrame(tick); }; const unit = () => cfg.current.pitch * 1.6; // px of drag per card const onWheel = (e: WheelEvent) => { e.preventDefault(); const d = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY; vel = Math.max(-30, Math.min(30, vel + (d * (e.deltaMode === 1 ? 16 : 1)) / 60)); }; const onDown = (e: PointerEvent) => { root.setPointerCapture(e.pointerId); drag = { x: e.clientX, y: e.clientY, t: performance.now() }; vel = 0; }; const onMove = (e: PointerEvent) => { if (!drag) return; const now = performance.now(); // Dragging left or up winds the spiral forward. const d = (drag.x - e.clientX + (drag.y - e.clientY)) / unit(); offset += d; vel = (d / Math.max(1, now - drag.t)) * 1000 * 0.6; drag = { x: e.clientX, y: e.clientY, t: now }; }; const onUp = () => { drag = null; }; const onKey = (e: KeyboardEvent) => { const d = e.key === "ArrowUp" || e.key === "ArrowRight" ? 1 : e.key === "ArrowDown" || e.key === "ArrowLeft" ? -1 : 0; if (!d) return; e.preventDefault(); vel += d * 4; }; const io = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; if (visible) start(); }); io.observe(root); root.addEventListener("wheel", onWheel, { passive: false }); root.addEventListener("pointerdown", onDown); root.addEventListener("pointermove", onMove); root.addEventListener("pointerup", onUp); root.addEventListener("pointercancel", onUp); root.addEventListener("keydown", onKey); render(); start(); return () => { cancelAnimationFrame(raf); io.disconnect(); root.removeEventListener("wheel", onWheel); root.removeEventListener("pointerdown", onDown); root.removeEventListener("pointermove", onMove); root.removeEventListener("pointerup", onUp); root.removeEventListener("pointercancel", onUp); root.removeEventListener("keydown", onKey); }; }, [n]); const cardHeight = cardWidth * 0.68; return (

{Array.from({ length: n }, (_, i) => (

{ cardRefs.current[i] = el; }} className="absolute overflow-hidden rounded-xl bg-muted shadow-[0_20px_40px_-12px_rgba(0,0,0,.6)] ring-1 ring-white/10 will-change-transform" style={{ width: cardWidth, height: cardHeight, left: -cardWidth / 2, top: -cardHeight / 2, visibility: "hidden" }} > {/* eslint-disable-next-line @next/next/no-img-element */}

))}

); } 51:["$","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,["$","$L52",null,{"namespace":"@glint-ui","registryDependencies":["utils"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/ui/infinite-spiral.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]