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:T10aa,"use client"; import * as React from "react"; import { motionScale } from "@/lib/motion"; import { cn } from "@/lib/utils"; type DotFieldProps = React.ComponentProps<"div"> & { /** Distance between dots in px. */ gap?: number; /** Radius (px) around the pointer where dots react. */ radius?: number; /** Clicking sends a ripple across the field. */ ripple?: boolean; }; /** * An interactive dot grid background on canvas: dots near the pointer swell and take the signal color, and a click * sends a ripple across the field. Theme-aware (reads tokens), DPR-sharp, paused when off screen; static with motion off. */ function DotField({ className, gap = 22, radius = 120, ripple = true, children, ...props }: DotFieldProps) { const ref = React.useRef(null); React.useEffect(() => { const host = ref.current; const canvas = host?.querySelector("canvas"); const ctx = canvas?.getContext("2d"); if (!host || !canvas || !ctx) return; let w = 0; let h = 0; let frame = 0; let visible = true; const pointer = { x: -9999, y: -9999 }; const waves: { x: number; y: number; t: number }[] = []; const animated = motionScale(host) > 0; const color = (name: string) => getComputedStyle(host).getPropertyValue(name).trim() || "#888"; const resize = () => { const dpr = Math.min(window.devicePixelRatio || 1, 2); w = host.clientWidth; h = host.clientHeight; canvas.width = w * dpr; canvas.height = h * dpr; canvas.style.width = `${w}px`; canvas.style.height = `${h}px`; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); }; const draw = (time: number) => { ctx.clearRect(0, 0, w, h); const base = color("--cl-mark"); const signal = color("--signal"); for (let x = gap / 2; x < w; x += gap) { for (let y = gap / 2; y < h; y += gap) { let k = 0; const d = Math.hypot(x - pointer.x, y - pointer.y); if (d < radius) k = 1 - d / radius; for (const wv of waves) { const r = (time - wv.t) * 0.45; const dd = Math.abs(Math.hypot(x - wv.x, y - wv.y) - r); if (dd < 30) k = Math.max(k, (1 - dd / 30) * Math.max(0, 1 - r / Math.max(w, h))); } ctx.globalAlpha = 0.35 + k * 0.65; ctx.fillStyle = k > 0.15 ? signal : base; ctx.beginPath(); ctx.arc(x, y, 1 + k * 2.2, 0, Math.PI * 2); ctx.fill(); } } ctx.globalAlpha = 1; while (waves.length && time - waves[0]!.t > 4000) waves.shift(); if (animated && visible) frame = requestAnimationFrame(draw); }; const onMove = (e: PointerEvent) => { const r = host.getBoundingClientRect(); pointer.x = e.clientX - r.left; pointer.y = e.clientY - r.top; }; const onLeave = () => { pointer.x = pointer.y = -9999; }; const onDown = (e: PointerEvent) => { if (!ripple) return; const r = host.getBoundingClientRect(); waves.push({ x: e.clientX - r.left, y: e.clientY - r.top, t: performance.now() }); }; resize(); const ro = new ResizeObserver(() => { resize(); if (!animated) draw(0); }); ro.observe(host); const io = new IntersectionObserver(([entry]) => { visible = !!entry?.isIntersecting; cancelAnimationFrame(frame); if (visible && animated) frame = requestAnimationFrame(draw); }); io.observe(host); host.addEventListener("pointermove", onMove); host.addEventListener("pointerleave", onLeave); host.addEventListener("pointerdown", onDown); draw(performance.now()); return () => { cancelAnimationFrame(frame); ro.disconnect(); io.disconnect(); host.removeEventListener("pointermove", onMove); host.removeEventListener("pointerleave", onLeave); host.removeEventListener("pointerdown", onDown); }; }, [gap, radius, ripple]); return (

); } export { DotField }; export type { DotFieldProps }; 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":"@cuelark","registryDependencies":["utils","https://ui.cuelark.com/r/theme.json","https://ui.cuelark.com/r/motion.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/cuelark/ui/dot-field.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]