'use client'; import { useCallback, useEffect, useRef } from 'react'; // -------------------------------------------------------------------------- // // Types // -------------------------------------------------------------------------- // interface PixelTrailProps { pixelSize?: number; gap?: number; fadeDuration?: number; color?: string; /** When true, listens to document mousemove and uses pointer-events-none for pass-through overlay */ global?: boolean; } // -------------------------------------------------------------------------- // // Pixel Trail Component // -------------------------------------------------------------------------- // /** * PixelTrail component * * A full grid of pixels that light up as the cursor moves over them and fade away. */ export function PixelTrail({ pixelSize = 12, gap = 0, fadeDuration = 600, color = '#ffffff', global = false, }: PixelTrailProps) { // -------------------------------------------------------------------------- // // Data Access // -------------------------------------------------------------------------- // const containerRef = useRef(null); const canvasRef = useRef(null); const litRef = useRef>(new Map()); const rafRef = useRef(0); // -------------------------------------------------------------------------- // // Computed Values // -------------------------------------------------------------------------- // const cell = pixelSize + gap; // -------------------------------------------------------------------------- // // Handlers // -------------------------------------------------------------------------- // const updateLit = useCallback( (clientX: number, clientY: number) => { const rect = containerRef.current?.getBoundingClientRect(); if (!rect) return; const x = clientX - rect.left; const y = clientY - rect.top; const col = Math.floor(x / cell); const row = Math.floor(y / cell); const cols = Math.floor(rect.width / cell); const key = row * cols + col; litRef.current.set(key, Date.now()); }, [cell], ); const handleMouseMove = useCallback( (e: React.MouseEvent) => updateLit(e.clientX, e.clientY), [updateLit], ); useEffect(() => { if (!global) return; const handler = (e: MouseEvent) => updateLit(e.clientX, e.clientY); document.addEventListener('mousemove', handler); return () => document.removeEventListener('mousemove', handler); }, [global, updateLit]); // -------------------------------------------------------------------------- // // Effects // -------------------------------------------------------------------------- // useEffect(() => { const canvas = canvasRef.current; const container = containerRef.current; if (!canvas || !container) return; const ctx = canvas.getContext('2d'); if (!ctx) return; const rgb = color.match(/\w\w/g)?.map((x) => parseInt(x, 16)) ?? [255, 255, 255]; const draw = () => { const { width, height } = container.getBoundingClientRect(); if (canvas.width !== width || canvas.height !== height) { canvas.width = width; canvas.height = height; } ctx.clearRect(0, 0, width, height); const cols = Math.floor(width / cell); const rows = Math.floor(height / cell); const now = Date.now(); for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { const key = row * cols + col; const litAt = litRef.current.get(key); const age = litAt ? now - litAt : Infinity; if (age > fadeDuration) { litRef.current.delete(key); continue; } const opacity = Math.max(0, 1 - age / fadeDuration); ctx.fillStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`; ctx.fillRect(col * cell, row * cell, pixelSize, pixelSize); } } rafRef.current = requestAnimationFrame(draw); }; rafRef.current = requestAnimationFrame(draw); return () => cancelAnimationFrame(rafRef.current); }, [fadeDuration, pixelSize, gap, color, cell]); // -------------------------------------------------------------------------- // // Main Render // -------------------------------------------------------------------------- // return (

); }

Purchase Required