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[544296,["/_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"],"ItemStyles"] 61:I[8513,["/_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"],"ScrollArea"] 62:I[8513,["/_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"],"ScrollBar"] 63: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"] 64:T2491,"use client"; import { useEffect, useRef } from "react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; const SPACING = 16; const DOT = 1.5; // Dots within this radius feel the cursor; falloff is quadratic to the edge. const FIELD = 88; // Far enough to read as a push, small enough that neighbours never overlap. const PUSH = 7; const GROW = 1.3; // Slightly underdamped (ratio about 0.7), so dots spring back with a hint of // give instead of sliding home. const STIFFNESS = 170; const DAMPING = 18; // A click ring crosses the 480px grid in about 0.9s. const RING_SPEED = 620; const RING_WIDTH = 22; const RING_PUSH = 9; const REST = 0.01; type Ring = { x: number; y: number; born: number }; export function DotGrid({ className }: { className?: string }) { const reduce = useReducedMotion() ?? false; const wrapRef = useRef(null); const canvasRef = useRef(null); useEffect(() => { const wrap = wrapRef.current; const canvas = canvasRef.current; const ctx = canvas?.getContext("2d"); if (!wrap || !canvas || !ctx) return; let width = 0; let height = 0; let count = 0; // Flat typed arrays keep the per-frame loop allocation free. let baseX = new Float32Array(0); let baseY = new Float32Array(0); let offX = new Float32Array(0); let offY = new Float32Array(0); let velX = new Float32Array(0); let velY = new Float32Array(0); let size = new Float32Array(0); let velSize = new Float32Array(0); let pointer: { x: number; y: number } | null = null; let rings: Ring[] = []; let frameId = 0; let last = 0; let visible = true; let dim = ""; let lit = ""; const readColors = () => { // Computed colors resolve light-dark(), which a raw custom property doesn't. dim = getComputedStyle(canvas).color; lit = getComputedStyle(wrap).color; }; const layout = () => { const dpr = window.devicePixelRatio || 1; width = wrap.clientWidth; height = wrap.clientHeight; canvas.width = Math.round(width * dpr); canvas.height = Math.round(height * dpr); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); const cols = Math.floor(width / SPACING); const rows = Math.floor(height / SPACING); // Centre the lattice so the margins match on every side. const startX = (width - (cols - 1) * SPACING) / 2; const startY = (height - (rows - 1) * SPACING) / 2; count = cols * rows; baseX = new Float32Array(count); baseY = new Float32Array(count); offX = new Float32Array(count); offY = new Float32Array(count); velX = new Float32Array(count); velY = new Float32Array(count); size = new Float32Array(count); velSize = new Float32Array(count); for (let r = 0, i = 0; r < rows; r++) { for (let c = 0; c < cols; c++, i++) { baseX[i] = startX + c * SPACING; baseY[i] = startY + r * SPACING; } } }; const draw = () => { ctx.clearRect(0, 0, width, height); ctx.fillStyle = dim; // Resting dots sit back as texture; the lit pass supplies the contrast. ctx.globalAlpha = 0.5; ctx.beginPath(); for (let i = 0; i < count; i++) { const x = baseX[i] + offX[i]; const y = baseY[i] + offY[i]; const r = DOT * (1 + (reduce ? 0 : GROW) * size[i]); ctx.moveTo(x + r, y); ctx.arc(x, y, r, 0, Math.PI * 2); } ctx.fill(); // Only the few energised dots get a second, brighter pass. ctx.fillStyle = lit; for (let i = 0; i < count; i++) { const s = size[i]; if (s < 0.02) continue; const x = baseX[i] + offX[i]; const y = baseY[i] + offY[i]; const r = DOT * (1 + (reduce ? 0 : GROW) * s); ctx.globalAlpha = Math.min(1, s); ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill(); } ctx.globalAlpha = 1; }; const step = (now: number) => { // Clamped so a dropped frame or a background tab can't explode the spring. const dt = Math.min((now - last) / 1000, 1 / 30); last = now; const t = now / 1000; rings = rings.filter( (ring) => (t - ring.born) * RING_SPEED < Math.hypot(width, height) + RING_WIDTH, ); let moving = rings.length > 0; for (let i = 0; i < count; i++) { let targetX = 0; let targetY = 0; let targetSize = 0; if (pointer) { const dx = baseX[i] - pointer.x; const dy = baseY[i] - pointer.y; const d = Math.hypot(dx, dy); if (d < FIELD) { const f = (1 - d / FIELD) ** 2; targetSize = f; if (!reduce && d > 0.001) { targetX = (dx / d) * PUSH * f; targetY = (dy / d) * PUSH * f; } } } for (const ring of rings) { const dx = baseX[i] - ring.x; const dy = baseY[i] - ring.y; const d = Math.hypot(dx, dy); const radius = (t - ring.born) * RING_SPEED; const band = Math.exp(-(((d - radius) / RING_WIDTH) ** 2)); // The ring weakens as it spreads, like a real shockwave. const fade = Math.max(0, 1 - radius / Math.hypot(width, height)); const f = band * fade; if (f < 0.01 || d < 0.001) continue; targetX += (dx / d) * RING_PUSH * f; targetY += (dy / d) * RING_PUSH * f; targetSize = Math.max(targetSize, f); } velX[i] += (STIFFNESS * (targetX - offX[i]) - DAMPING * velX[i]) * dt; velY[i] += (STIFFNESS * (targetY - offY[i]) - DAMPING * velY[i]) * dt; velSize[i] += (STIFFNESS * (targetSize - size[i]) - DAMPING * velSize[i]) * dt; offX[i] += velX[i] * dt; offY[i] += velY[i] * dt; size[i] = Math.max(0, size[i] + velSize[i] * dt); // Settled means at its target, not at home: a resting cursor costs nothing. if ( Math.abs(targetX - offX[i]) > REST || Math.abs(targetY - offY[i]) > REST || Math.abs(targetSize - size[i]) > REST || Math.abs(velX[i]) > REST || Math.abs(velY[i]) > REST || Math.abs(velSize[i]) > REST ) { moving = true; } } draw(); frameId = moving && visible ? requestAnimationFrame(step) : 0; }; // Sleeps when everything settles; any input wakes it. const wake = () => { if (frameId || !visible) return; last = performance.now(); frameId = requestAnimationFrame(step); }; const local = (e: PointerEvent) => { const box = canvas.getBoundingClientRect(); return { x: e.clientX - box.left, y: e.clientY - box.top }; }; const onMove = (e: PointerEvent) => { if (e.pointerType === "touch") return; pointer = local(e); wake(); }; const onLeave = () => { pointer = null; wake(); }; const onDown = (e: PointerEvent) => { if (reduce || e.button !== 0) return; // Three rings at once is already a lot; older ones make way. rings = [...rings.slice(-2), { ...local(e), born: performance.now() / 1000 }]; wake(); }; readColors(); layout(); draw(); const resize = new ResizeObserver(() => { layout(); draw(); }); resize.observe(wrap); const repaint = () => requestAnimationFrame(() => { readColors(); if (!frameId) draw(); }); const theme = new MutationObserver(repaint); theme.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"], }); const scheme = window.matchMedia("(prefers-color-scheme: dark)"); scheme.addEventListener("change", repaint); // Offscreen, the loop pauses entirely. const seen = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; if (visible) wake(); else if (frameId) { cancelAnimationFrame(frameId); frameId = 0; } }); seen.observe(wrap); canvas.addEventListener("pointermove", onMove); canvas.addEventListener("pointerleave", onLeave); canvas.addEventListener("pointerdown", onDown); return () => { cancelAnimationFrame(frameId); resize.disconnect(); theme.disconnect(); seen.disconnect(); scheme.removeEventListener("change", repaint); canvas.removeEventListener("pointermove", onMove); canvas.removeEventListener("pointerleave", onLeave); canvas.removeEventListener("pointerdown", onDown); }; }, [reduce]); return (

); } export default function DotGridDemo() { return ; } 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"]}]]}],["$","$L60",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--shadow-raised)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L63",null,{"files":[{"path":"components/dot-grid.tsx","content":"$64","type":"registry:component"},{"path":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n","type":"registry:hook","target":"hooks/use-reduced-motion.ts"}],"className":"h-[70svh] min-h-80"}]]}]