Forked chat

hooks/use-canvas-animation.ts

@@ -0,0 +1,44 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+
+export function useCanvasAnimation() {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const animationRef = useRef<number>()
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+
+    const startTime = Date.now()
+
+    const animate = () => {
+      const elapsed = Date.now() - startTime
+      const cycle = (elapsed % 2000) / 2000 // 2 second cycle
+
+      // Oscillate between 25% and 75% gray
+      const grayValue = Math.floor(64 + (127 * (Math.sin(cycle * Math.PI * 2) + 1)) / 2)
+
+      canvas.width = canvas.offsetWidth
+      canvas.height = canvas.offsetHeight
+
+      ctx.fillStyle = `rgb(${grayValue}, ${grayValue}, ${grayValue})`
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      animationRef.current = requestAnimationFrame(animate)
+    }
+
+    animate()
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+      }
+    }
+  }, [])
+
+  return canvasRef
+}