"use client"; import React, { useEffect, useRef, useState } from "react"; function useInkRgb(): string { const [rgb, setRgb] = useState("244, 241, 236"); useEffect(() => { const read = () => { const v = getComputedStyle(document.documentElement) .getPropertyValue("--ink-rgb") .trim(); if (v) setRgb(v); }; read(); const obs = new MutationObserver(read); obs.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "style", "data-theme"], }); return () => obs.disconnect(); }, []); return rgb; } export interface WarpGridProps { lineColor?: string; spacing?: number; lineWidth?: number; strength?: number; speed?: number; cursor?: boolean; influenceRadius?: number; style?: React.CSSProperties; className?: string; children?: React.ReactNode; } function hash(x: number, y: number): number { const n = Math.sin(x * 127.1 + y * 311.7) * 43758.5453; return n - Math.floor(n); } function vnoise(x: number, y: number): number { const ix = Math.floor(x), iy = Math.floor(y); const fx = x - ix, fy = y - iy; const ux = fx * fx * (3 - 2 * fx); const uy = fy * fy * (3 - 2 * fy); const ab = hash(ix, iy) + (hash(ix + 1, iy) - hash(ix, iy)) * ux; const cd = hash(ix, iy + 1) + (hash(ix + 1, iy + 1) - hash(ix, iy + 1)) * ux; return ab + (cd - ab) * uy; } function smoothstep(t: number): number { return t * t * (3 - 2 * t); } export function WarpGrid({ lineColor, spacing = 40, lineWidth = 0.6, strength = 28, speed = 1, cursor = false, influenceRadius = 180, style, className, children, }: WarpGridProps) { const inkRgb = useInkRgb(); const resolvedLineColor = lineColor ?? `rgba(${inkRgb}, 0.15)`; const wrapperRef = useRef(null); const canvasRef = useRef(null); const sizeRef = useRef({ w: 0, h: 0 }); const cursorRef = useRef({ x: -99999, y: -99999 }); useEffect(() => { if (!cursor) return; const wrapper = wrapperRef.current; if (!wrapper) return; const onMove = (e: MouseEvent) => { const rect = wrapper.getBoundingClientRect(); cursorRef.current = { x: e.clientX - rect.left, y: e.clientY - rect.top }; }; const onLeave = () => { cursorRef.current = { x: -99999, y: -99999 }; }; wrapper.addEventListener("mousemove", onMove); wrapper.addEventListener("mouseleave", onLeave); return () => { wrapper.removeEventListener("mousemove", onMove); wrapper.removeEventListener("mouseleave", onLeave); }; }, [cursor]); useEffect(() => { const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduced) return; if (!canvasRef.current) return; const canvas: HTMLCanvasElement = canvasRef.current; const ctxOrNull = canvas.getContext("2d"); if (!ctxOrNull) return; const ctx: CanvasRenderingContext2D = ctxOrNull; let rafId: number; let t = 0; function resize() { const dpr = Math.min(window.devicePixelRatio, 2); const rect = canvas.getBoundingClientRect(); sizeRef.current = { w: rect.width, h: rect.height }; canvas.width = rect.width * dpr; canvas.height = rect.height * dpr; ctx.scale(dpr, dpr); } const ro = new ResizeObserver(resize); ro.observe(canvas); resize(); function draw() { const { w, h } = sizeRef.current; if (w === 0 || h === 0) { rafId = requestAnimationFrame(draw); return; } ctx.clearRect(0, 0, w, h); const noiseScale = 0.003; const pad = Math.ceil(strength / spacing) + 1; const cols = Math.ceil(w / spacing) + pad * 2 + 1; const rows = Math.ceil(h / spacing) + pad * 2 + 1; const offX = -pad * spacing; const offY = -pad * spacing; const cx = cursorRef.current.x; const cy = cursorRef.current.y; const vx: number[][] = []; const vy: number[][] = []; for (let row = 0; row < rows; row++) { vx[row] = []; vy[row] = []; for (let col = 0; col < cols; col++) { const bx = offX + col * spacing; const by = offY + row * spacing; const nx = bx * noiseScale; const ny = by * noiseScale; let s = strength; if (cursor) { const dist = Math.sqrt((bx - cx) ** 2 + (by - cy) ** 2); const raw = Math.max(0, 1 - dist / influenceRadius); s = strength * smoothstep(raw); } vx[row][col] = bx + (vnoise(nx, ny + t) * 2 - 1) * s; vy[row][col] = by + (vnoise(nx + 5.2, ny + 1.3 + t) * 2 - 1) * s; } } ctx.strokeStyle = resolvedLineColor; ctx.lineWidth = lineWidth; ctx.beginPath(); for (let row = 0; row < rows; row++) { ctx.moveTo(vx[row][0], vy[row][0]); for (let col = 1; col < cols; col++) { ctx.lineTo(vx[row][col], vy[row][col]); } } for (let col = 0; col < cols; col++) { ctx.moveTo(vx[0][col], vy[0][col]); for (let row = 1; row < rows; row++) { ctx.lineTo(vx[row][col], vy[row][col]); } } ctx.stroke(); t += 0.003 * speed; rafId = requestAnimationFrame(draw); } rafId = requestAnimationFrame(draw); return () => { cancelAnimationFrame(rafId); ro.disconnect(); }; }, [resolvedLineColor, spacing, lineWidth, strength, speed, cursor, influenceRadius]); return (

); } export default WarpGrid;