50: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"] 51:T4e8f,"use client"; import { useEffect, useRef, useSyncExternalStore, type ReactNode } from "react"; // A full-bleed grid of dots on a 2D canvas. Every dot has a home spot and a spring that pulls it // back there. Near the cursor the dots are pushed away (or pulled in), swell and take the accent // colour; when the cursor leaves the springs carry them home with a little overshoot. A click // sends a shockwave ring through the grid. The loop sleeps when nothing is moving. export type MagneticDotGridProps = { /** Distance between dots, in pixels. */ gap?: number; /** Radius of a dot at rest, in pixels. */ dotSize?: number; /** How far the cursor reaches, in pixels. */ radius?: number; /** "repel" pushes the dots away from the cursor, "attract" pulls them in. */ mode?: "repel" | "attract"; /** How hard each dot's spring pulls it home. Higher is snappier. */ stiffness?: number; /** How quickly the springs stop wobbling. Lower overshoots more. */ damping?: number; /** The colour dots take near the cursor and in a shockwave. Any CSS colour, including var(--x). */ accentColour?: string; /** The colour of a dot at rest. "currentColor" follows the text colour around it. */ baseColour?: string; /** How strong a resting dot's colour is, from 0 to 1, so the grid stays quiet behind content. */ baseOpacity?: number; /** A click (or tap) sends a ring through the grid. */ shockwave?: boolean; /** Extra classes for the outer box. Give it a size (it fills it). */ className?: string; /** Content shown over the grid, e.g. a headline and a button. The grid keeps reacting under it. */ children?: ReactNode; }; type Dot = { homeX: number; homeY: number; x: number; y: number; vx: number; vy: number; heat: number }; type Ring = { x: number; y: number; age: number }; type Rgb = [number, number, number]; // How many colour steps between base and accent. Dots are drawn in one path per step, which keeps // a few thousand dots cheap to draw. const STEPS = 10; const RING_SPEED = 1100; // px per second const RING_WIDTH = 80; // px // prefers-reduced-motion, live function subscribeToMotion(onChange: () => void) { const query = window.matchMedia("(prefers-reduced-motion: reduce)"); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); } const prefersReducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches; // Any CSS colour (currentColor and var(--x) included) to [r, g, b]. A hidden probe inside the box // lets the browser resolve it in place, then the canvas normalises whatever format comes back. function resolveRgb(probe: HTMLElement, context: CanvasRenderingContext2D, colour: string): Rgb { probe.style.color = ""; probe.style.color = colour; const computed = getComputedStyle(probe).color; context.fillStyle = "#000"; context.fillStyle = computed; const value = String(context.fillStyle); if (value.startsWith("#")) { const n = parseInt(value.slice(1, 7), 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; } const parts = value.match(/[\d.]+/g)?.map(Number) ?? [0, 0, 0]; return [parts[0] ?? 0, parts[1] ?? 0, parts[2] ?? 0]; } // sRGB <-> OKLab. Blending in OKLab keeps the steps between ink and lime clean (an RGB blend runs // through muddy olive on the way). const toLinear = (c: number) => { const v = c / 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }; const fromLinear = (v: number) => { const c = v <= 0.0031308 ? v * 12.92 : 1.055 * Math.max(0, v) ** (1 / 2.4) - 0.055; return Math.round(Math.min(1, Math.max(0, c)) * 255); }; function rgbToOklab([r8, g8, b8]: Rgb): Rgb { const r = toLinear(r8); const g = toLinear(g8); const b = toLinear(b8); const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b); const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b); const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b); return [ 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s, 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s, 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s, ]; } function oklabToRgb([L, A, B]: Rgb): Rgb { const l = (L + 0.3963377774 * A + 0.2158037573 * B) ** 3; const m = (L - 0.1055613458 * A - 0.0638541728 * B) ** 3; const s = (L - 0.0894841775 * A - 1.291485548 * B) ** 3; return [ fromLinear(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s), fromLinear(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s), fromLinear(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s), ]; } // 0 at the edge of the reach, 1 under the cursor, with soft ends function falloff(distance: number, reach: number) { const t = Math.max(0, 1 - distance / reach); return t * t * (3 - 2 * t); } export function MagneticDotGrid({ gap = 24, dotSize = 1.6, radius = 160, mode = "repel", stiffness = 170, damping = 13, accentColour = "#ddfc3e", baseColour = "currentColor", baseOpacity = 0.32, shockwave = true, className = "", children, }: MagneticDotGridProps) { const boxRef = useRef(null); const canvasRef = useRef(null); const probeRef = useRef(null); const reducedMotion = useSyncExternalStore(subscribeToMotion, prefersReducedMotion, () => false); // The loop reads these every frame, so changing a prop never rebuilds the grid const settings = useRef({ dotSize, radius, mode, stiffness, damping, accentColour, baseColour, baseOpacity, shockwave }); // Set by the effect below: wakes the loop after a prop change const wakeRef = useRef<() => void>(() => {}); useEffect(() => { settings.current = { dotSize, radius, mode, stiffness, damping, accentColour, baseColour, baseOpacity, shockwave }; wakeRef.current(); }, [dotSize, radius, mode, stiffness, damping, accentColour, baseColour, baseOpacity, shockwave]); useEffect(() => { const box = boxRef.current; const canvas = canvasRef.current; const probe = probeRef.current; const context = canvas?.getContext("2d"); if (!box || !canvas || !probe || !context) return; const ctx = context; let dots: Dot[] = []; let rings: Ring[] = []; let width = 0; let height = 0; let frame = 0; let running = false; let visible = true; let lastTime = 0; // The biggest change any dot made in the last frame, so the loop can sleep once nothing moves, // even with the cursor resting on the grid let motion = { speed: 0, offset: 0, heat: 0 }; // One fill style per colour step, worked out only when a colour, the theme or the size changes let bucketStyles: string[] = []; function computeColours() { const { accentColour: accent, baseColour: base, baseOpacity: opacity } = settings.current; const from = rgbToOklab(resolveRgb(probe!, ctx, base)); const to = rgbToOklab(resolveRgb(probe!, ctx, accent)); bucketStyles = []; for (let index = 0; index <= STEPS; index++) { const t = index / STEPS; const [r, g, b] = oklabToRgb([from[0] + (to[0] - from[0]) * t, from[1] + (to[1] - from[1]) * t, from[2] + (to[2] - from[2]) * t]); const alpha = opacity + (1 - opacity) * Math.min(1, t * 1.6); bucketStyles.push(`rgba(${r}, ${g}, ${b}, ${alpha.toFixed(3)})`); } } // The raw pointer, and a smoothed copy the dots actually react to, so fast flicks feel liquid const pointer = { x: 0, y: 0, active: false }; const follow = { x: 0, y: 0, strength: 0 }; // Lay the dots out on a grid centred in the box, so the margins match on every side function build() { const pixelRatio = Math.min(window.devicePixelRatio || 1, 2); width = Math.max(1, box!.clientWidth); height = Math.max(1, box!.clientHeight); canvas!.width = Math.round(width * pixelRatio); canvas!.height = Math.round(height * pixelRatio); ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0); computeColours(); const columns = Math.floor(width / gap) + 1; const rows = Math.floor(height / gap) + 1; const left = (width - (columns - 1) * gap) / 2; const top = (height - (rows - 1) * gap) / 2; dots = []; for (let row = 0; row < rows; row++) { for (let column = 0; column < columns; column++) { const homeX = left + column * gap; const homeY = top + row * gap; dots.push({ homeX, homeY, x: homeX, y: homeY, vx: 0, vy: 0, heat: 0 }); } } wake(); } // One physics step of dt seconds function step(dt: number) { const { radius: reach, mode: pull, stiffness: k, damping: c } = settings.current; motion = { speed: 0, offset: 0, heat: 0 }; // The smoothed pointer catches up in about a tenth of a second, and fades in and out const catchUp = 1 - Math.exp(-dt * 16); follow.x += (pointer.x - follow.x) * catchUp; follow.y += (pointer.y - follow.y) * catchUp; follow.strength += ((pointer.active ? 1 : 0) - follow.strength) * (1 - Math.exp(-dt * 7)); for (const ring of rings) ring.age += dt; rings = rings.filter((ring) => ring.age * RING_SPEED < Math.hypot(width, height) + RING_WIDTH); for (const dot of dots) { let targetX = dot.homeX; let targetY = dot.homeY; let warmth = 0; if (follow.strength > 0.001) { const dx = dot.homeX - follow.x; const dy = dot.homeY - follow.y; const distance = Math.hypot(dx, dy) || 0.0001; const force = falloff(distance, reach) * follow.strength; if (force > 0) { // Repel opens a clearing about a third of the reach wide; attract gathers the dots // toward the cursor but stops them a little over half a gap short, so they never pile up const shift = pull === "repel" ? force * reach * 0.34 : -Math.min(force * reach * 0.3, Math.max(0, distance - gap * 0.6)); targetX += (dx / distance) * shift; targetY += (dy / distance) * shift; warmth = force; } } // Each ring kicks the dots it passes outward and lights them up, fading as it travels for (const ring of rings) { const dx = dot.homeX - ring.x; const dy = dot.homeY - ring.y; const distance = Math.hypot(dx, dy) || 0.0001; const front = ring.age * RING_SPEED; const band = Math.max(0, 1 - Math.abs(distance - front) / RING_WIDTH); if (band <= 0) continue; const fade = Math.max(0, 1 - front / (Math.hypot(width, height) * 0.9)); const kick = band * band * fade * 5200 * dt; dot.vx += (dx / distance) * kick; dot.vy += (dy / distance) * kick; warmth = Math.max(warmth, band * fade); } // A damped spring toward the target spot (semi-implicit Euler: stable at these steps) dot.vx += (k * (targetX - dot.x) - c * dot.vx) * dt; dot.vy += (k * (targetY - dot.y) - c * dot.vy) * dt; dot.x += dot.vx * dt; dot.y += dot.vy * dt; // Heat rises fast and cools a little slower, so the colour leaves a short afterglow const rate = warmth > dot.heat ? 14 : 4.5; dot.heat += (warmth - dot.heat) * (1 - Math.exp(-dt * rate)); motion.speed = Math.max(motion.speed, Math.abs(dot.vx), Math.abs(dot.vy)); motion.offset = Math.max(motion.offset, Math.abs(targetX - dot.x), Math.abs(targetY - dot.y)); motion.heat = Math.max(motion.heat, Math.abs(warmth - dot.heat)); } } // Reduced motion: no springs, no rings. The dots stay home and only the colour follows. function stepStill(dt: number) { const { radius: reach } = settings.current; motion = { speed: 0, offset: 0, heat: 0 }; follow.x = pointer.x; follow.y = pointer.y; follow.strength += ((pointer.active ? 1 : 0) - follow.strength) * (1 - Math.exp(-dt * 7)); rings = []; for (const dot of dots) { dot.x = dot.homeX; dot.y = dot.homeY; dot.vx = 0; dot.vy = 0; const warmth = falloff(Math.hypot(dot.homeX - follow.x, dot.homeY - follow.y), reach) * follow.strength; dot.heat += (warmth - dot.heat) * (1 - Math.exp(-dt * 10)); motion.heat = Math.max(motion.heat, Math.abs(warmth - dot.heat)); } } // Colour buckets made once and emptied each frame, so long hovers make no garbage const buckets: Dot[][] = Array.from({ length: STEPS + 1 }, () => []); function draw() { const { dotSize: size, mode: pull } = settings.current; // Attract packs the dots closer, so they swell less there and never overlap const swell = pull === "attract" ? 1 : 1.6; ctx.clearRect(0, 0, width, height); // Sort the dots into colour steps, then draw each step as one path for (const bucket of buckets) bucket.length = 0; for (const dot of dots) buckets[Math.min(STEPS, Math.round(dot.heat * STEPS))]!.push(dot); buckets.forEach((bucket, index) => { if (bucket.length === 0) return; const t = index / STEPS; // Hot dots swell to about 2.6 times their size (not in reduced motion: colour only) const dotRadius = reducedMotion ? size : size * (1 + t * swell); ctx.fillStyle = bucketStyles[index] ?? "transparent"; ctx.beginPath(); for (const dot of bucket) { ctx.moveTo(dot.x + dotRadius, dot.y); ctx.arc(dot.x, dot.y, dotRadius, 0, Math.PI * 2); } ctx.fill(); }); } // Nothing left to animate: no rings, the smoothed pointer has caught up and no dot moved or // changed colour last frame. With the cursor gone, every dot must also be home and cool. function settled() { if (rings.length > 0) return false; if (Math.abs(pointer.x - follow.x) + Math.abs(pointer.y - follow.y) > 0.1) return false; if (Math.abs((pointer.active ? 1 : 0) - follow.strength) > 0.002) return false; if (motion.speed > 0.5 || motion.offset > 0.05 || motion.heat > 0.01) return false; if (pointer.active) return true; for (const dot of dots) { if (Math.abs(dot.vx) > 0.5 || Math.abs(dot.vy) > 0.5 || Math.abs(dot.x - dot.homeX) > 0.05 || Math.abs(dot.y - dot.homeY) > 0.05 || dot.heat > 0.01) return false; } return true; } function tick(now: number) { // Fixed 1/120 s physics steps, so the springs feel the same at 60 Hz and 120 Hz let elapsed = Math.min((now - lastTime) / 1000, 1 / 20); lastTime = now; while (elapsed > 0) { const dt = Math.min(elapsed, 1 / 120); if (reducedMotion) stepStill(dt); else step(dt); elapsed -= dt; } draw(); if (settled()) { // With the cursor gone, snap the last fractions home so the final frame is exact. With it // resting on the grid, leave the dots where they are: the next move wakes the loop. if (!pointer.active) { for (const dot of dots) { dot.x = dot.homeX; dot.y = dot.homeY; dot.heat = 0; } draw(); } running = false; return; } frame = requestAnimationFrame(tick); } function wake() { if (!visible) return; if (running) return; running = true; lastTime = performance.now(); frame = requestAnimationFrame(tick); } // Draw once even when asleep (a new colour or size shows straight away) function wakeAndDraw() { computeColours(); draw(); wake(); } wakeRef.current = wakeAndDraw; function place(clientX: number, clientY: number) { const rect = box!.getBoundingClientRect(); pointer.x = clientX - rect.left; pointer.y = clientY - rect.top; // The first touch of a visit starts at the finger, not at the old spot if (follow.strength < 0.01) { follow.x = pointer.x; follow.y = pointer.y; } pointer.active = true; wake(); } // Mouse and pen: pointer events. Touch: touch events, which keep firing while the page scrolls, // so the grid follows the finger without blocking scroll. function onPointerMove(event: PointerEvent) { if (event.pointerType === "touch") return; place(event.clientX, event.clientY); } function onPointerLeave(event: PointerEvent) { if (event.pointerType === "touch") return; pointer.active = false; // The loop may be asleep with the cursor parked: wake it so the dots go home wake(); } function onTouch(event: TouchEvent) { const touch = event.touches[0]; if (touch) place(touch.clientX, touch.clientY); } function onTouchEnd(event: TouchEvent) { if (event.touches.length === 0) { pointer.active = false; wake(); } } // Click rather than pointerdown, so a finger that starts a scroll does not fire a ring. A click // made with Enter or Space on a button inside the grid has detail 0 and sits at (0, 0): skip it. function onClick(event: MouseEvent) { if (!settings.current.shockwave || reducedMotion || event.detail === 0) return; const rect = box!.getBoundingClientRect(); rings.push({ x: event.clientX - rect.left, y: event.clientY - rect.top, age: 0 }); if (rings.length > 4) rings.shift(); wake(); } box.addEventListener("pointermove", onPointerMove); box.addEventListener("pointerdown", onPointerMove); box.addEventListener("pointerleave", onPointerLeave); box.addEventListener("touchstart", onTouch, { passive: true }); box.addEventListener("touchmove", onTouch, { passive: true }); box.addEventListener("touchend", onTouchEnd); box.addEventListener("touchcancel", onTouchEnd); box.addEventListener("click", onClick); // A new size lays the grid out again const resizer = new ResizeObserver(build); resizer.observe(box); // No work while the box is off screen const visibility = new IntersectionObserver(([entry]) => { visible = entry?.isIntersecting ?? true; if (visible) wakeAndDraw(); else { cancelAnimationFrame(frame); running = false; } }); visibility.observe(box); // "currentColor" changes with the site theme, so redraw when the theme flips const themeWatcher = new MutationObserver(wakeAndDraw); themeWatcher.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme", "style"] }); const scheme = window.matchMedia("(prefers-color-scheme: dark)"); scheme.addEventListener("change", wakeAndDraw); build(); return () => { cancelAnimationFrame(frame); running = false; wakeRef.current = () => {}; resizer.disconnect(); visibility.disconnect(); themeWatcher.disconnect(); scheme.removeEventListener("change", wakeAndDraw); box.removeEventListener("pointermove", onPointerMove); box.removeEventListener("pointerdown", onPointerMove); box.removeEventListener("pointerleave", onPointerLeave); box.removeEventListener("touchstart", onTouch); box.removeEventListener("touchmove", onTouch); box.removeEventListener("touchend", onTouchEnd); box.removeEventListener("touchcancel", onTouchEnd); box.removeEventListener("click", onClick); }; }, [gap, reducedMotion]); return (

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"registry/dimaac/magnetic-dot-grid/magnetic-dot-grid.tsx","content":"$51","type":"registry:component","target":"components/dimaac/magnetic-dot-grid.tsx"}],"className":"h-[70svh] min-h-80"}]]}]