dither-gradient

1"use client"
2 
3import { useEffect, useRef } from "react"
4import { cn } from "@/lib/utils"
5 
6interface DitherGradientProps {
7  className?: string
8  colorFrom?: string
9  colorTo?: string
10  colorMid?: string
11  intensity?: number
12  speed?: number
13  angle?: number
14}
15 
16export function DitherGradient({
17  className,
18  colorFrom = "#4f46e5",
19  colorTo = "#ec4899",
20  colorMid = "#a855f7",
21  intensity = 0.15,
22  speed = 3,
23  angle = 45,
24}: DitherGradientProps) {
25  const canvasRef = useRef<HTMLCanvasElement>(null)
26  const animationRef = useRef<number>(0)
27 
28  useEffect(() => {
29    const canvas = canvasRef.current
30    if (!canvas) return
31 
32    const ctx = canvas.getContext("2d")
33    if (!ctx) return
34 
35    const resize = () => {
36      const rect = canvas.getBoundingClientRect()
37      canvas.width = rect.width
38      canvas.height = rect.height
39    }
40 
41    resize()
42    window.addEventListener("resize", resize)
43 
44    let time = 0
45    const bayerMatrix = [
46      [0, 8, 2, 10],
47      [12, 4, 14, 6],
48      [3, 11, 1, 9],
49      [15, 7, 13, 5],
50    ]
51 
52    const hexToRgb = (hex: string) => {
53      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
54      if (!result) return { r: 0, g: 0, b: 0 }
55      return {
56        r: parseInt(result[1]!, 16),
57        g: parseInt(result[2]!, 16),
58        b: parseInt(result[3]!, 16),
59      }
60    }
61 
62    const smoothstep = (t: number) => t * t * (3 - 2 * t)
63 
64    const animate = () => {
65      const { width, height } = canvas
66      const imageData = ctx.createImageData(width, height)
67      const data = imageData.data
68 
69      const from = hexToRgb(colorFrom)
70      const mid = hexToRgb(colorMid)
71      const to = hexToRgb(colorTo)
72      const rad = (angle * Math.PI) / 180
73 
74      for (let y = 0; y < height; y++) {
75        for (let x = 0; x < width; x++) {
76          const normalizedX = x / width
77          const normalizedY = y / height
78          
79          const gradientPos = 
80            (normalizedX * Math.cos(rad) + normalizedY * Math.sin(rad)) * 0.8 + 
81            0.1 + 
82            Math.sin(time * speed * 0.0008) * 0.1
83 
84          const clampedPos = Math.max(0, Math.min(1, gradientPos))
85 
86          let r: number, g: number, b: number
87          if (clampedPos < 0.5) {
88            const t = smoothstep(clampedPos * 2)
89            r = from.r + (mid.r - from.r) * t
90            g = from.g + (mid.g - from.g) * t
91            b = from.b + (mid.b - from.b) * t
92          } else {
93            const t = smoothstep((clampedPos - 0.5) * 2)
94// … truncated