ASCII Shapes

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3 
4// ============================================================================
5// Types
6// ============================================================================
7 
8export type AsciiSize = 'sm' | 'md' | 'lg' | 'hero'
9export type AsciiCharset = 'blocks' | 'braille' | 'classic' | 'line' | 'dots'
10export type AsciiSpeed = 'slow' | 'normal' | 'fast'
11 
12export interface AsciiShapeProps extends React.HTMLAttributes<HTMLPreElement> {
13  size?: AsciiSize
14  charset?: AsciiCharset
15  color?: string
16  speed?: AsciiSpeed
17  animated?: boolean
18  multicolor?: boolean
19}
20 
21// ============================================================================
22// Constants
23// ============================================================================
24 
25const SIZE_MAP: Record<AsciiSize, { cols: number; rows: number }> = {
26  sm:   { cols: 24,  rows: 12 },
27  md:   { cols: 48,  rows: 24 },
28  lg:   { cols: 72,  rows: 36 },
29  hero: { cols: 120, rows: 60 },
30}
31 
32const CHARSETS: Record<AsciiCharset, string[]> = {
33  blocks:  [' ', '░', '▒', '▓', '█'],
34  braille: [' ', '⠁', '⠃', '⠇', '⠿', '⠷'],
35  classic: [' ', '.', ':', 'o', '*', '#', '@'],
36  line:    [' ', '-', '/', '|', '\\', '+', 'X'],
37  dots:    [' ', '.', '·', '•', '●'],
38}
39 
40const SPEED_MAP: Record<AsciiSpeed, number> = {
41  slow:   0.4,
42  normal: 1.0,
43  fast:   2.2,
44}
45 
46const MULTICOLOR_PALETTE = [
47  'hsl(var(--primary))',
48  'hsl(var(--secondary))',
49  'hsl(var(--accent))',
50  'hsl(var(--warning))',
51  'hsl(var(--info))',
52  'hsl(var(--success))',
53]
54 
55// ============================================================================
56// Grid engine
57// ============================================================================
58 
59function makeGrid(cols: number, rows: number): string[][] {
60  return Array.from({ length: rows }, () => Array(cols).fill(' '))
61}
62 
63function gridToLines(grid: string[][]): string[] {
64  return grid.map((row) => row.join(''))
65}
66 
67// ============================================================================
68// Draw functions
69// ============================================================================
70 
71function drawSpiral(grid: string[][], cols: number, rows: number, t: number, chars: string[]): void {
72  const cx = cols / 2, cy = rows / 2
73  const aspect = 2.0
74  const spacing = Math.min(cx * aspect, cy) * 0.35
75 
76  for (let r = 0; r < rows; r++) {
77    for (let c = 0; c < cols; c++) {
78      const dx = (c - cx) * aspect
79      const dy = r - cy
80// … truncated