noise-texture

1"use client"
2 
3import { useEffect, useRef } from "react"
4import { cn } from "@/lib/utils"
5 
6interface NoiseTextureProps {
7  className?: string
8  opacity?: number
9  speed?: number
10  grain?: "fine" | "medium" | "coarse"
11  blend?: "overlay" | "soft-light" | "multiply" | "screen" | "normal"
12  animate?: boolean
13}
14 
15export function NoiseTexture({
16  className,
17  opacity = 0.4,
18  speed = 10,
19  grain = "medium",
20  blend = "normal",
21  animate = true,
22}: NoiseTextureProps) {
23  const canvasRef = useRef<HTMLCanvasElement>(null)
24  const animationRef = useRef<number | NodeJS.Timeout>(0)
25 
26  useEffect(() => {
27    const canvas = canvasRef.current
28    if (!canvas) return
29 
30    const ctx = canvas.getContext("2d")
31    if (!ctx) return
32 
33    const grainSizes: Record<string, number> = {
34      fine: 1,
35      medium: 2,
36      coarse: 3,
37    }
38    const grainSize = grainSizes[grain] ?? 2
39 
40    const resize = () => {
41      const rect = canvas.getBoundingClientRect()
42      const dpr = Math.min(window.devicePixelRatio || 1, 2)
43      canvas.width = Math.ceil(rect.width / grainSize) * dpr
44      canvas.height = Math.ceil(rect.height / grainSize) * dpr
45      canvas.style.width = `${rect.width}px`
46      canvas.style.height = `${rect.height}px`
47    }
48 
49    resize()
50    window.addEventListener("resize", resize)
51 
52    const renderNoise = () => {
53      const { width, height } = canvas
54      if (width === 0 || height === 0) return
55      
56      const imageData = ctx.createImageData(width, height)
57      const data = imageData.data
58 
59      for (let i = 0; i < data.length; i += 4) {
60        const value = Math.random() * 255
61        data[i] = value
62        data[i + 1] = value
63        data[i + 2] = value
64        data[i + 3] = 255
65      }
66 
67      ctx.putImageData(imageData, 0, 0)
68    }
69 
70    renderNoise()
71 
72    if (animate) {
73      const animateNoise = () => {
74        renderNoise()
75        animationRef.current = setTimeout(() => {
76          requestAnimationFrame(animateNoise)
77        }, 1000 / speed)
78      }
79      animateNoise()
80    }
81 
82    return () => {
83      window.removeEventListener("resize", resize)
84      if (animationRef.current) {
85        clearTimeout(animationRef.current as NodeJS.Timeout)
86      }
87    }
88  }, [grain, speed, animate])
89 
90  const grainSizes: Record<string, number> = {
91    fine: 1,
92    medium: 2,
93    coarse: 3,
94  }
95 
96  return (
97    <canvas
98      ref={canvasRef}
99      className={cn("pointer-events-none absolute inset-0", className)}
100      style={{
101        opacity,
102        mixBlendMode: blend,
103// … truncated