"use client"; import React, { useEffect, useRef, useCallback, 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; } function valueNoise(x: number, y: number): number { const ix = Math.floor(x); const iy = Math.floor(y); const fx = x - ix; const fy = y - iy; const ux = fx * fx * (3 - 2 * fx); const uy = fy * fy * (3 - 2 * fy); function r(xi: number, yi: number): number { return Math.abs(Math.sin(xi * 127.1 + yi * 311.7) * 43758.5453) % 1; } const a = r(ix, iy); const b = r(ix + 1, iy); const c = r(ix, iy + 1); const d = r(ix + 1, iy + 1); return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy; } function flowAngle(x: number, y: number, t: number): number { const s = 0.003; const n1 = valueNoise(x * s, y * s + t * 0.4); const n2 = valueNoise(x * s + 5.2, y * s + 1.3 + t * 0.3); return (n1 - 0.5) * Math.PI * 4 + (n2 - 0.5) * Math.PI * 2; } export interface FlowFieldProps { strokeColor?: string; spacing?: number; strokeLength?: number; speed?: number; influenceRadius?: number; style?: React.CSSProperties; className?: string; children?: React.ReactNode; } export function FlowField({ strokeColor, spacing = 22, strokeLength = 16, speed = 1, influenceRadius = 130, style, className, children, }: FlowFieldProps) { const inkRgb = useInkRgb(); const resolvedStrokeColor = strokeColor ?? `rgba(${inkRgb}, 0.12)`; const canvasRef = useRef(null); const rafRef = useRef(0); const timeRef = useRef(0); const mouseRef = useRef<{ x: number; y: number } | null>(null); const sizeRef = useRef({ w: 0, h: 0 }); const draw = useCallback( (timestamp: number) => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const { w: W, h: H } = sizeRef.current; if (!W || !H) { rafRef.current = requestAnimationFrame(draw); return; } ctx.clearRect(0, 0, canvas.width, canvas.height); timeRef.current += 0.004 * speed; const t = timeRef.current; const mouse = mouseRef.current; const half = strokeLength / 2; const cols = Math.ceil(W / spacing) + 1; const rows = Math.ceil(H / spacing) + 1; const offX = (W % spacing) / 2; const offY = (H % spacing) / 2; ctx.beginPath(); ctx.strokeStyle = resolvedStrokeColor; ctx.lineWidth = 0.7; type ActiveStroke = { x: number; y: number; angle: number; inf: number }; const active: ActiveStroke[] = []; for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { const x = offX + col * spacing; const y = offY + row * spacing; let angle = flowAngle(x, y, t); let inf = 0; if (mouse) { const dx = x - mouse.x; const dy = y - mouse.y; const dist = Math.hypot(dx, dy); if (dist < influenceRadius) { inf = Math.pow(1 - dist / influenceRadius, 2); const attract = Math.atan2(mouse.y - y, mouse.x - x); let da = attract - angle; while (da > Math.PI) da -= 2 * Math.PI; while (da < -Math.PI) da += 2 * Math.PI; angle += da * inf * 0.75; } } const cx2 = Math.cos(angle); const cy2 = Math.sin(angle); if (inf > 0.02) { active.push({ x, y, angle, inf }); } else { ctx.moveTo(x - cx2 * half, y - cy2 * half); ctx.lineTo(x + cx2 * half, y + cy2 * half); } } } ctx.stroke(); for (const { x, y, angle, inf } of active) { const cx2 = Math.cos(angle); const cy2 = Math.sin(angle); ctx.beginPath(); ctx.moveTo(x - cx2 * half, y - cy2 * half); ctx.lineTo(x + cx2 * half, y + cy2 * half); ctx.strokeStyle = `rgba(${inkRgb},${(0.12 + inf * 0.65).toFixed(3)})`; ctx.lineWidth = 0.7 + inf * 1.1; ctx.stroke(); } rafRef.current = requestAnimationFrame(draw); }, [resolvedStrokeColor, inkRgb, spacing, strokeLength, speed, influenceRadius] ); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const reduced = window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches; const ro = new ResizeObserver((entries) => { for (const entry of entries) { const { width, height } = entry.contentRect; const dpr = Math.min(window.devicePixelRatio, 2); sizeRef.current = { w: width, h: height }; canvas.width = width * dpr; canvas.height = height * dpr; const ctx = canvas.getContext("2d"); if (ctx) ctx.scale(dpr, dpr); canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; } }); ro.observe(canvas.parentElement!); const onMouseMove = (e: MouseEvent) => { if (reduced) return; const rect = canvas.getBoundingClientRect(); mouseRef.current = { x: e.clientX - rect.left, y: e.clientY - rect.top }; }; const onMouseLeave = () => { mouseRef.current = null; }; canvas.parentElement?.addEventListener("mousemove", onMouseMove); canvas.parentElement?.addEventListener("mouseleave", onMouseLeave); if (!reduced) { rafRef.current = requestAnimationFrame(draw); } return () => { cancelAnimationFrame(rafRef.current); ro.disconnect(); canvas.parentElement?.removeEventListener("mousemove", onMouseMove); canvas.parentElement?.removeEventListener("mouseleave", onMouseLeave); }; }, [draw]); return (

); } export default FlowField;