"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; } export interface PhosphorSweepProps { dotColor?: string; dotSize?: number; spacing?: number; speed?: number; decay?: number; style?: React.CSSProperties; className?: string; children?: React.ReactNode; } export function PhosphorSweep({ dotColor, dotSize = 1.5, spacing = 28, speed = 0.12, decay = 2.5, style, className, children, }: PhosphorSweepProps) { const inkRgb = useInkRgb(); const resolvedDotColor = dotColor ?? `rgba(${inkRgb}, 0.07)`; const canvasRef = useRef(null); const rafRef = useRef(0); const angleRef = useRef(0); const lastHitsRef = useRef>(new Map()); const prevTimeRef = useRef(0); 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 now = timestamp / 1000; const dt = prevTimeRef.current ? Math.min(now - prevTimeRef.current, 0.05) : 0.016; prevTimeRef.current = now; const { w: W, h: H } = sizeRef.current; if (!W || !H) { rafRef.current = requestAnimationFrame(draw); return; } ctx.clearRect(0, 0, canvas.width, canvas.height); const cx = W / 2; const cy = H / 2; angleRef.current += speed * Math.PI * 2 * dt; const beamAngle = angleRef.current; const lastHits = lastHitsRef.current; const cols = Math.ceil(W / spacing) + 1; const rows = Math.ceil(H / spacing) + 1; const offX = (W % spacing) / 2; const offY = (H % spacing) / 2; for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { const x = offX + col * spacing; const y = offY + row * spacing; const key = `${col},${row}`; const dotAngle = Math.atan2(y - cy, x - cx); let diff = ((dotAngle - beamAngle) % (Math.PI * 2) + Math.PI * 2) % (Math.PI * 2); if (diff > Math.PI) diff -= Math.PI * 2; if (Math.abs(diff) < 0.05) { lastHits.set(key, now); } const lastHit = lastHits.get(key); let intensity = 0; if (lastHit !== undefined) { const age = now - lastHit; if (age < decay) { intensity = Math.exp((-age * 4) / decay); } else { lastHits.delete(key); } } ctx.beginPath(); ctx.arc( x, y, dotSize * (1 + intensity * 1.2), 0, Math.PI * 2 ); if (intensity > 0.01) { ctx.fillStyle = `rgba(${inkRgb},${(0.07 + intensity * 0.83).toFixed(3)})`; } else { ctx.fillStyle = resolvedDotColor; } ctx.fill(); } } const reach = Math.hypot(W, H); const bx = cx + Math.cos(beamAngle) * reach; const by = cy + Math.sin(beamAngle) * reach; const grad = ctx.createLinearGradient(cx, cy, bx, by); grad.addColorStop(0, `rgba(${inkRgb},0.18)`); grad.addColorStop(0.35, `rgba(${inkRgb},0.06)`); grad.addColorStop(1, `rgba(${inkRgb},0)`); ctx.beginPath(); ctx.moveTo(cx, cy); ctx.lineTo(bx, by); ctx.strokeStyle = grad; ctx.lineWidth = 1.5; ctx.stroke(); rafRef.current = requestAnimationFrame(draw); }, [resolvedDotColor, inkRgb, dotSize, spacing, speed, decay] ); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const reduced = window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches; if (reduced) return; 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`; lastHitsRef.current.clear(); } }); ro.observe(canvas.parentElement!); rafRef.current = requestAnimationFrame(draw); return () => { cancelAnimationFrame(rafRef.current); ro.disconnect(); }; }, [draw]); return (

); } export default PhosphorSweep;