"use client"; import React, { useRef, useEffect, useState } from "react"; export default function AbstractTypographicGridBackground() { const containerRef = useRef(null); const canvasRef = useRef(null); const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); useEffect(() => { if (!mounted) return; const container = containerRef.current; const canvas = canvasRef.current; if (!container || !canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; let animationFrameId: number; let time = 0; const resize = () => { canvas.width = container.clientWidth; canvas.height = container.clientHeight; }; const observer = new ResizeObserver(resize); observer.observe(container); resize(); const animate = () => { ctx.fillStyle = "#F4F4F5"; // Off-White base ctx.fillRect(0, 0, canvas.width, canvas.height); time += 0.01; const spacing = 80; const cols = Math.ceil(canvas.width / spacing); const rows = Math.ceil(canvas.height / spacing); ctx.font = "12px Inter, sans-serif"; ctx.fillStyle = "#18181B"; for (let i = 0; i < cols; i++) { for (let j = 0; j < rows; j++) { const x = i * spacing; const y = j * spacing; const opacity = 0.05 + Math.sin(time + i + j) * 0.03; ctx.globalAlpha = opacity; if ((i + j) % 3 === 0) { ctx.fillText("UI", x, y); } else if ((i + j) % 3 === 1) { ctx.fillText("X", x + 20, y); } else { ctx.fillText("TRA", x, y + 20); } } } animationFrameId = requestAnimationFrame(animate); }; animate(); return () => { cancelAnimationFrame(animationFrameId); observer.disconnect(); }; }, [mounted]); if (!mounted) return null; return (