Dither Shader

1"use client";
2import React, { useEffect, useRef, useCallback, useState } from "react";
3import { cn } from "@/lib/utils";
4 
5type DitheringMode = "bayer" | "halftone" | "noise" | "crosshatch";
6type ColorMode = "original" | "grayscale" | "duotone" | "custom";
7 
8interface DitherShaderProps {
9  /** Source image URL */
10  src: string;
11  /** Size of the dithering grid cells */
12  gridSize?: number;
13  /** Type of dithering pattern */
14  ditherMode?: DitheringMode;
15  /** Color processing mode */
16  colorMode?: ColorMode;
17  /** Invert the dithered output colors */
18  invert?: boolean;
19  /** Pixelation multiplier (1 = no pixelation, higher = more pixelated) */
20  pixelRatio?: number;
21  /** Primary color for duotone mode */
22  primaryColor?: string;
23  /** Secondary color for duotone mode */
24  secondaryColor?: string;
25  /** Custom color palette array for custom mode */
26  customPalette?: string[];
27  /** Brightness adjustment (-1 to 1) */
28  brightness?: number;
29  /** Contrast adjustment (0 to 2, 1 = normal) */
30  contrast?: number;
31  /** Background color behind the dithered image */
32  backgroundColor?: string;
33  /** Object fit behavior */
34  objectFit?: "cover" | "contain" | "fill" | "none";
35  /** Threshold bias for dithering (0 to 1) */
36  threshold?: number;
37  /** Enable animation effect */
38  animated?: boolean;
39  /** Animation speed (lower = slower) */
40  animationSpeed?: number;
41  /** Additional CSS classes for the container (use this to set size via Tailwind) */
42  className?: string;
43}
44 
45// 4x4 Bayer matrix for ordered dithering
46const BAYER_MATRIX_4x4 = [
47  [0, 8, 2, 10],
48  [12, 4, 14, 6],
49  [3, 11, 1, 9],
50  [15, 7, 13, 5],
51];
52 
53// 8x8 Bayer matrix for finer dithering
54const BAYER_MATRIX_8x8 = [
55  [0, 32, 8, 40, 2, 34, 10, 42],
56  [48, 16, 56, 24, 50, 18, 58, 26],
57  [12, 44, 4, 36, 14, 46, 6, 38],
58  [60, 28, 52, 20, 62, 30, 54, 22],
59  [3, 35, 11, 43, 1, 33, 9, 41],
60  [51, 19, 59, 27, 49, 17, 57, 25],
61  [15, 47, 7, 39, 13, 45, 5, 37],
62  [63, 31, 55, 23, 61, 29, 53, 21],
63];
64 
65function parseColor(color: string): [number, number, number] {
66  if (color.startsWith("#")) {
67    const hex = color.slice(1);
68    if (hex.length === 3) {
69      return [
70        parseInt(hex[0] + hex[0], 16),
71        parseInt(hex[1] + hex[1], 16),
72        parseInt(hex[2] + hex[2], 16),
73      ];
74    }
75    return [
76      parseInt(hex.slice(0, 2), 16),
77      parseInt(hex.slice(2, 4), 16),
78      parseInt(hex.slice(4, 6), 16),
79    ];
80  }
81  const match = color.match(/rgb\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\)/i);
82// … truncated