"use client"; import { animate, stagger } from "animejs"; import { useEffect, useRef, useState } from "react"; type RippleGridProps = { className?: string; itemSize?: number; color?: string; rippleColor?: string; speed?: number; /** Forces reduced motion: the grid stays static, as it does for the OS preference. */ reducedMotion?: boolean; }; type Ripple = ReturnType; export function RippleGridBg({ className = "", itemSize = 28, color = "rgba(255, 255, 255, 0.1)", rippleColor = "rgba(255, 255, 255, 0.8)", speed = 800, reducedMotion = false, }: RippleGridProps) { const containerRef = useRef(null); const gridRef = useRef(null); const [gridSize, setGridSize] = useState({ columns: 0, rows: 0 }); useEffect(() => { const container = containerRef.current; if (!container) return; const updateGrid = () => { const { width, height } = container.getBoundingClientRect(); const columns = Math.max(0, Math.floor(width / itemSize)); const rows = Math.max(0, Math.floor(height / itemSize)); setGridSize((current) => (current.columns === columns && current.rows === rows ? current : { columns, rows })); }; updateGrid(); const observer = new ResizeObserver(updateGrid); observer.observe(container); return () => observer.disconnect(); }, [itemSize]); useEffect(() => { const container = containerRef.current; const grid = gridRef.current; if (!container || !grid || gridSize.columns === 0 || gridSize.rows === 0) return; const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)"); let ripple: Ripple | undefined; let frame = 0; let lastIndex = -1; let pending: { x: number; y: number } | undefined; const cellAt = (x: number, y: number) => { const rect = grid.getBoundingClientRect(); const column = Math.floor((x - rect.left) / itemSize); const row = Math.floor((y - rect.top) / itemSize); if (!Number.isFinite(column) || !Number.isFinite(row)) return -1; if (column < 0 || row < 0 || column >= gridSize.columns || row >= gridSize.rows) return -1; return row * gridSize.columns + column; }; const play = (index: number) => { if (index < 0 || reducedMotion || motionQuery.matches) return; // One ripple at a time: stop the previous wave instead of stacking hundreds of tweens. ripple?.cancel(); ripple = animate(grid.querySelectorAll(".netter-ripple-dot"), { backgroundColor: [rippleColor, color], scale: [1.5, 1], duration: speed, delay: stagger(40, { grid: [gridSize.columns, gridSize.rows], from: index }), ease: "out(4)", }); }; const flush = () => { frame = 0; if (!pending) return; const index = cellAt(pending.x, pending.y); pending = undefined; if (index === lastIndex) return; lastIndex = index; play(index); }; // A single delegated, rAF-throttled handler replaces per-cell listeners. const handleMove = (event: PointerEvent) => { pending = { x: event.clientX, y: event.clientY }; if (!frame) frame = window.requestAnimationFrame(flush); }; const handleDown = (event: PointerEvent) => { const index = cellAt(event.clientX, event.clientY); lastIndex = index; play(index); }; const handleLeave = () => { lastIndex = -1; pending = undefined; }; container.addEventListener("pointermove", handleMove); container.addEventListener("pointerdown", handleDown); container.addEventListener("pointerleave", handleLeave); return () => { container.removeEventListener("pointermove", handleMove); container.removeEventListener("pointerdown", handleDown); container.removeEventListener("pointerleave", handleLeave); if (frame) window.cancelAnimationFrame(frame); // Restore every dot to its rendered style so nothing keeps animating after unmount or option changes. ripple?.revert(); ripple = undefined; }; }, [color, gridSize.columns, gridSize.rows, itemSize, reducedMotion, rippleColor, speed]); const dotSize = Math.max(2, Math.round(itemSize * 0.25)); return (

); }