Dithered Logo

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { type CSSProperties, useEffect, useRef } from "react";
5 
6export interface DitheredLogoProps {
7  imageSrc: string;
8  gridSize?: number;
9  scale?: number;
10  dotScale?: number;
11  invert?: boolean;
12  cornerRadius?: number;
13  threshold?: number;
14  contrast?: number;
15  gamma?: number;
16  blur?: number;
17  diffusionStrength?: number;
18  serpentine?: boolean;
19  particleColor?: string;
20  style?: CSSProperties;
21  className?: string;
22}
23 
24type PointCloud = {
25  x: Float32Array;
26  y: Float32Array;
27  dx: Float32Array;
28  dy: Float32Array;
29  dotSize: number;
30};
31 
32type Wave = { x: number; y: number; bornAt: number };
33 
34const defaults = {
35  gridSize: 200,
36  scale: 0.5,
37  dotScale: 1,
38  invert: true,
39  cornerRadius: 0.2,
40  threshold: 180,
41  contrast: 0,
42  gamma: 1,
43  blur: 3.75,
44  diffusionStrength: 1,
45  serpentine: true,
46};
47 
48function loadAsset(source: string, signal: AbortSignal) {
49  return new Promise<HTMLImageElement>((resolve, reject) => {
50    const image = new Image();
51    const abort = () => reject(new DOMException("Aborted", "AbortError"));
52    image.crossOrigin = "anonymous";
53    image.onload = () => {
54      signal.removeEventListener("abort", abort);
55      resolve(image);
56    };
57    image.onerror = () => reject(new Error(`Unable to load image: ${source}`));
58    signal.addEventListener("abort", abort, { once: true });
59    image.src = source;
60  });
61}
62 
63function sampleImage(
64  image: HTMLImageElement,
65  maxDimension: number,
66  contrast: number,
67  gamma: number,
68  blur: number,
69) {
70  const ratio = image.naturalWidth / image.naturalHeight;
71  const width = Math.max(
72    1,
73    Math.round(ratio >= 1 ? maxDimension : maxDimension * ratio),
74  );
75  const height = Math.max(
76    1,
77    Math.round(ratio >= 1 ? maxDimension / ratio : maxDimension),
78  );
79  const canvas = document.createElement("canvas");
80  canvas.width = width;
81  canvas.height = height;
82  const context = canvas.getContext("2d", { willReadFrequently: true });
83  if (!context) throw new Error("DitheredLogo could not create a 2D context.");
84 
85  context.clearRect(0, 0, width, height);
86  context.filter = blur > 0 ? `blur(${blur}px)` : "none";
87  context.drawImage(image, 0, 0, width, height);
88  context.filter = "none";
89 
90  const pixels = context.getImageData(0, 0, width, height).data;
91  const luminance = new Float32Array(width * height);
92  const alpha = new Uint8Array(width * height);
93  const contrastScale =
94// … truncated