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:T2c2a,"use client"; import { AnimatePresence, motion } from "motion/react"; import { ArrowUpRight } from "lucide-react"; import { useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; export interface InfiniteMenuItem { image: string; title: string; description?: string; href?: string; } export interface InfiniteMenuProps { items: InfiniteMenuItem[]; /** Number of discs on the sphere; items repeat to fill it. */ count?: number; /** Disc diameter in px. */ itemSize?: number; /** Slowly spin while idle instead of settling. */ autoRotate?: boolean; className?: string; } type V3 = [number, number, number]; type M3 = number[]; // row-major 3x3 const mul = (a: M3, b: M3): M3 => { const o = new Array(9); for (let r = 0; r < 3; r++) for (let c = 0; c < 3; c++) o[r * 3 + c] = a[r * 3] * b[c] + a[r * 3 + 1] * b[3 + c] + a[r * 3 + 2] * b[6 + c]; return o; }; const apply = (m: M3, v: V3): V3 => [ m[0] * v[0] + m[1] * v[1] + m[2] * v[2], m[3] * v[0] + m[4] * v[1] + m[5] * v[2], m[6] * v[0] + m[7] * v[1] + m[8] * v[2], ]; /** Rotation matrix around a unit axis (Rodrigues). */ const axisAngle = ([x, y, z]: V3, a: number): M3 => { const c = Math.cos(a); const s = Math.sin(a); const t = 1 - c; return [t * x * x + c, t * x * y - s * z, t * x * z + s * y, t * x * y + s * z, t * y * y + c, t * y * z - s * x, t * x * z - s * y, t * y * z + s * x, t * z * z + c]; }; /** Evenly spread points on a unit sphere (golden spiral). */ const fibonacci = (n: number): V3[] => Array.from({ length: n }, (_, i) => { const y = 1 - ((i + 0.5) / n) * 2; const r = Math.sqrt(1 - y * y); const t = i * Math.PI * (3 - Math.sqrt(5)); return [Math.cos(t) * r, y, Math.sin(t) * r]; }); export function InfiniteMenu({ items, count = 42, itemSize = 84, autoRotate = false, className }: InfiniteMenuProps) { const rootRef = useRef(null); const discRefs = useRef<(HTMLDivElement | null)[]>([]); const [active, setActive] = useState(0); const [moving, setMoving] = useState(false); const n = Math.max(items.length, Math.round(count)); const cfg = useRef({ autoRotate }); useEffect(() => { cfg.current = { autoRotate }; }, [autoRotate]); useEffect(() => { const root = rootRef.current!; const pts = fibonacci(n); const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let m: M3 = [1, 0, 0, 0, 1, 0, 0, 0, 1]; let omega: V3 = [0, 0, 0]; // angular velocity, axis * rad/s let target = -1; // disc index to bring to front (keyboard) let drag: { x: number; y: number; t: number } | null = null; let raf = 0; let last = 0; let visible = true; let front = -1; let isMoving = false; const radius = () => Math.min(root.clientWidth, root.clientHeight) * 0.36; const setMovingOnce = (v: boolean) => { if (v === isMoving) return; isMoving = v; setMoving(v); }; const rotate = (axis: V3, angle: number) => { const len = Math.hypot(...axis); if (len < 1e-9 || !angle) return; m = mul(axisAngle([axis[0] / len, axis[1] / len, axis[2] / len], angle), m); }; const render = () => { const R = radius(); let best = 0; let bestZ = -2; for (let i = 0; i < n; i++) { const [x, y, z] = apply(m, pts[i]); if (z > bestZ) { bestZ = z; best = i; } const el = discRefs.current[i]; if (!el) continue; // Billboard squashed along the radial direction: reads as a disc on a sphere. const theta = Math.atan2(y, x); const squash = Math.max(0.25, Math.abs(z)); const depth = (z + 1) / 2; el.style.transform = `translate3d(${x * R}px,${y * R}px,${z * R}px) rotate(${theta}rad) scaleX(${squash}) rotate(${-theta}rad)`; el.style.opacity = String(0.12 + depth * 0.88); el.style.zIndex = String(Math.round(z * 1000) + 1000); el.style.filter = z < 0 ? `blur(${(-z * 3).toFixed(1)}px) grayscale(.6)` : "none"; } if (best !== front) { front = best; setActive(best % items.length); discRefs.current.forEach((el, i) => el?.toggleAttribute("data-front", i === best)); } return best; }; const tick = (now: number) => { const dt = Math.min(0.05, (now - last) / 1000 || 0.016); last = now; let settled = false; if (!drag) { const speed = Math.hypot(...omega); if (speed > 0.05) { rotate(omega, speed * dt); const k = Math.exp(-dt * 2.5); omega = [omega[0] * k, omega[1] * k, omega[2] * k]; } else if (cfg.current.autoRotate && !reduced && target < 0) { rotate([0, 1, 0], 0.18 * dt); } else { // Settle: swing the chosen disc to dead center. omega = [0, 0, 0]; const i = target >= 0 ? target : front; const q = apply(m, pts[Math.max(0, i)]); const angle = Math.acos(Math.max(-1, Math.min(1, q[2]))); if (angle < 0.002) settled = true; else rotate([q[1], -q[0], 0], reduced ? angle : angle * (1 - Math.exp(-dt * 9))); if (settled) target = -1; } } render(); setMovingOnce(!!drag || Math.hypot(...omega) > 0.4); raf = visible && !settled ? requestAnimationFrame(tick) : 0; }; const wake = () => { if (raf || !visible) return; last = performance.now(); raf = requestAnimationFrame(tick); }; const onDown = (e: PointerEvent) => { root.setPointerCapture(e.pointerId); drag = { x: e.clientX, y: e.clientY, t: performance.now() }; omega = [0, 0, 0]; target = -1; wake(); }; const onMove = (e: PointerEvent) => { if (!drag) return; const now = performance.now(); const dx = e.clientX - drag.x; const dy = e.clientY - drag.y; const angle = Math.hypot(dx, dy) / radius(); rotate([-dy, dx, 0], angle); const dts = Math.max(0.008, (now - drag.t) / 1000); const blend = 0.6; omega = [ omega[0] * (1 - blend) + ((-dy / radius()) / dts) * blend, omega[1] * (1 - blend) + ((dx / radius()) / dts) * blend, 0, ]; drag = { x: e.clientX, y: e.clientY, t: now }; }; const onUp = () => { if (drag && performance.now() - drag.t > 80) omega = [0, 0, 0]; // held still before letting go drag = null; wake(); }; const onKey = (e: KeyboardEvent) => { const dir: Record = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }; const d = dir[e.key]; if (!d) return; e.preventDefault(); // Nearest front-facing disc in the pressed direction. let best = -1; let bestScore = Infinity; for (let i = 0; i < n; i++) { if (i === front) continue; const [x, y, z] = apply(m, pts[i]); const along = x * d[0] + y * d[1]; if (z < 0 || along < 0.12) continue; const score = Math.hypot(x, y) + Math.abs(x * d[1] - y * d[0]) * 1.5; if (score < bestScore) { bestScore = score; best = i; } } if (best >= 0) { target = best; omega = [0, 0, 0]; wake(); } }; const io = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; if (visible) wake(); }); const ro = new ResizeObserver(() => render()); io.observe(root); ro.observe(root); root.addEventListener("pointerdown", onDown); root.addEventListener("pointermove", onMove); root.addEventListener("pointerup", onUp); root.addEventListener("pointercancel", onUp); root.addEventListener("keydown", onKey); // Start with a little spin so the sphere reads as 3D right away. omega = reduced ? [0, 0, 0] : [0.3, 2.4, 0]; wake(); return () => { cancelAnimationFrame(raf); io.disconnect(); ro.disconnect(); root.removeEventListener("pointerdown", onDown); root.removeEventListener("pointermove", onMove); root.removeEventListener("pointerup", onUp); root.removeEventListener("pointercancel", onUp); root.removeEventListener("keydown", onKey); }; }, [n, items.length]); const item = items[active]; return (

{Array.from({ length: n }, (_, i) => { const it = items[i % items.length]; return (

{ discRefs.current[i] = el; }} aria-hidden className="absolute overflow-hidden rounded-full bg-muted ring-1 ring-white/10 transition-[box-shadow] duration-300 will-change-transform data-[front]:shadow-[0_0_0_3px_var(--primary),0_0_40px_-4px_var(--primary)]" style={{ width: itemSize, height: itemSize, left: -itemSize / 2, top: -itemSize / 2 }} > {/* eslint-disable-next-line @next/next/no-img-element */}

); })}

{!moving && item && (

{item.title}

{item.description &&

{item.description}

} )} {item?.href && ( )}

); } 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":[["$","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"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L51",null,{"namespace":"@glint-ui","registryDependencies":["utils"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/ui/infinite-menu.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]