ASCII Effect

1"use client"
2 
3import { cn } from "@/lib/utils"
4import { useEffect, useRef, type HTMLAttributes, type PointerEvent } from "react"
5 
6export interface AsciiEffectProps extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
7  imageSrc: string
8  alt?: string
9  variant?: "image" | "flow" | "glitch"
10  chars?: string
11  fontSize?: number
12  fontFamily?: string
13  fontWeight?: number | string
14  lineHeight?: number
15  characterSpacing?: number
16  brightnessBoost?: number
17  contrast?: number
18  threshold?: number
19  posterize?: number
20  dither?: "none" | "floyd-steinberg" | "bayer"
21  ditherStrength?: number
22  flowSpeed?: number
23  flowDirection?: number
24  flowStrength?: number
25  flowFrequency?: number
26  mouseRadius?: number
27  mouseStrength?: number
28  mouseWaveSpeed?: number
29  scale?: number
30  fit?: "cover" | "contain" | "stretch"
31  colors?: string[]
32  colorMode?: "gradient" | "source"
33  backgroundColor?: string
34  invert?: boolean
35  glitchIntensity?: number
36  glitchFrequency?: number
37  revealDuration?: number
38}
39 
40export type AsciiPresetProps = Omit<AsciiEffectProps, "variant">
41 
42const IMAGE_COLORS = ["#f4f4f5", "#a1a1aa"]
43const FLOW_COLORS = ["#e2e8f0", "#67e8f9", "#818cf8"]
44const GLITCH_COLORS = ["#ecfccb", "#a3e635", "#22d3ee"]
45 
46function clamp(value: number, min = 0, max = 1) {
47  return Math.min(max, Math.max(min, value))
48}
49 
50function parseHex(color: string) {
51  const match = /^#([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i.exec(color)
52  return match
53    ? [Number.parseInt(match[1]!, 16), Number.parseInt(match[2]!, 16), Number.parseInt(match[3]!, 16)]
54    : null
55}
56 
57function gradientColor(colors: string[], amount: number) {
58  if (colors.length < 2) return colors[0] ?? "#ffffff"
59 
60  const position = clamp(amount) * (colors.length - 1)
61  const index = Math.min(Math.floor(position), colors.length - 2)
62  const mix = position - index
63  const from = parseHex(colors[index]!)
64  const to = parseHex(colors[index + 1]!)
65  if (!from || !to) return colors[Math.round(position)] ?? colors[0]!
66 
67  return `rgb(${from.map((channel, i) => Math.round(channel + (to[i]! - channel) * mix)).join(", ")})`
68}
69 
70export function AsciiEffect({
71  imageSrc,
72  alt = "ASCII rendering",
73  variant = "image",
74  chars = " .:-=+*#%@",
75  fontSize = 9,
76  fontFamily = "Arial, Helvetica, sans-serif",
77  fontWeight = 400,
78  lineHeight = 1,
79  characterSpacing = 1,
80  brightnessBoost = 2.2,
81  contrast = 1.1,
82  threshold = 0.06,
83  posterize = 32,
84  dither = "floyd-steinberg",
85  ditherStrength = 0.8,
86  flowSpeed = 0.22,
87// … truncated