Flickering Grid

1"use client";
2 
3import { useEffect, useRef } from "react";
4import { cn } from "@/registry/default/utils";
5 
6interface FlickeringGridProps {
7	className?: string;
8	squareSize?: number;
9	gridGap?: number;
10	color?: string;
11	maxOpacity?: number;
12	flickerChance?: number;
13	width?: number;
14	height?: number;
15}
16 
17export default function FlickeringGrid({
18	className,
19	squareSize = 4,
20	gridGap = 6,
21	color = "#60A5FA",
22	maxOpacity = 0.5,
23	flickerChance = 0.1,
24	width = 800,
25	height = 800,
26}: FlickeringGridProps) {
27	const canvasRef = useRef<HTMLCanvasElement>(null);
28 
29	useEffect(() => {
30		const canvas = canvasRef.current;
31		if (!canvas) return;
32 
33		const ctx = canvas.getContext("2d");
34		if (!ctx) return;
35 
36		// Set canvas size
37		canvas.width = width;
38		canvas.height = height;
39 
40		// Calculate grid dimensions
41		const cellSize = squareSize + gridGap;
42		const cols = Math.ceil(width / cellSize);
43		const rows = Math.ceil(height / cellSize);
44 
45		// Create grid state
46		const grid: number[][] = [];
47		for (let i = 0; i < rows; i++) {
48			grid[i] = [];
49			for (let j = 0; j < cols; j++) {
50				const row = grid[i];
51				if (row) {
52					row[j] = Math.random() * maxOpacity;
53				}
54			}
55		}
56 
57		// Animation loop with frame throttling
58		let animationFrameId: number;
59		let lastFrameTime = 0;
60		const frameDelay = 1000 / 5; // 20fps for slower animation
61 
62		const animate = (currentTime: number) => {
63			animationFrameId = requestAnimationFrame(animate);
64 
65			// Throttle to ~20fps for slower, more subtle animation
66			const deltaTime = currentTime - lastFrameTime;
67			if (deltaTime < frameDelay) return;
68			lastFrameTime = currentTime;
69 
70			ctx.clearRect(0, 0, width, height);
71 
72			// Draw grid
73			for (let i = 0; i < rows; i++) {
74				for (let j = 0; j < cols; j++) {
75					const row = grid[i];
76					if (!row) continue;
77 
78					const cell = row[j];
79					if (cell === undefined) continue;
80 
81					// Randomly flicker cells (less frequently)
82					if (Math.random() < flickerChance) {
83						row[j] = Math.random() * maxOpacity;
84					} else {
85						// Gradually fade (slower fade)
86						row[j] = cell * 0.95;
87					}
88 
89					// Draw cell if visible
90					const currentCell = row[j];
91					if (currentCell !== undefined && currentCell > 0.01) {
92						ctx.fillStyle = color;
93						ctx.globalAlpha = currentCell;
94						ctx.fillRect(j * cellSize, i * cellSize, squareSize, squareSize);
95					}
96				}
97			}
98 
99			ctx.globalAlpha = 1;
100		};
101 
102		animationFrameId = requestAnimationFrame(animate);
103 
104		return () => {
105// … truncated