ASCII Shader TSX

Generate animated ASCII/dither visual effects as self-contained React TypeScript components. Combines the Glyph rendering engine (9 art styles, 8 dithering algorithms, 6 FX presets) with procedural animation techniques (noise fields, particles, value fields, feedback buffers).

Modes

Stack

Single self-contained .tsx file per component. Zero external dependencies beyond React.

Component Contract

Every generated component follows this structure:

interface Props {
  // Effect-specific (varies per component)
  charset?: string
  colorMode?: 'grayscale' | 'matrix' | 'amber' | 'sepia' | 'cool-blue' | 'neon' | 'custom'
  speed?: number
  density?: number
  // Source-mode only
  src?: string | HTMLImageElement | HTMLVideoElement
  // Universal
  className?: string
  style?: React.CSSProperties
}

export function AsciiEffect({ speed = 1, ...props }: Props) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const animRef = useRef<number>(0)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return
    const ctx = canvas.getContext('2d')!
    // ... setup, ResizeObserver, animation loop ...
    return () => { cancelAnimationFrame(animRef.current); ro.disconnect() }
  }, [/* deps */])

  return <canvas ref={canvasRef} aria-hidden="true" className={className} style={style} />
}

Workflow

Step 1: Determine Mode

• Generative: User wants an animated background, procedural effect, or decorative element with no image input
• Source: User provides/references an image, video, or webcam feed to convert to ASCII/dither
• Hybrid: Source with animated overlays (e.g., "add CRT effect to this image")

Step 2: Read the Right References

Based on what the user wants, read the minimum set of reference files needed:

Always read architecture.md — it has the canvas hook and component patterns every component needs.

Step 3: Build the Component

Write a single .tsx file containing:

1. Props interface — typed, with sensible defaults
2. Inline utilities — brightness LUT, color modes, noise, dithering (whatever the component needs, inlined from reference docs — no imports from external modules)
3. Canvas hook — setup, resize, animation loop, cleanup (from architecture.md)
4. Render function — the actual drawing logic
5. Default export — the React component

Step 4: Creative Direction

Every component should look distinct. The references provide building blocks — combine, modify, invent.

References

Critical Patterns

Canvas Hook (Required in Every Component)

See references/architecture.md for the full pattern. Key points:

• Use ResizeObserver for responsive sizing
• Handle devicePixelRatio for sharp rendering on HiDPI
• Check prefers-reduced-motion and render a single frame if true
• Always clean up RAF and observer on unmount
• Use willReadFrequently: true on sampler canvas (source mode), false on display canvas

BT.709 Brightness (From Glyph Engine)

Always use perceptually accurate brightness calculation. See references/rendering.md for the full implementation. The sRGB-to-linear LUT is critical for performance — pre-compute at module level.

Performance Guidelines

• Use Float32Array for brightness/value grids — not regular arrays
• Pre-compute the sRGB linearization LUT (256 entries) at module scope
• For source mode: use a separate sampler canvas sized to grid resolution
• Cap grid dimensions: cols = Math.floor(width / cellWidth), never more than ~400 cols
• Minimize per-cell string allocations — use indexed char lookups
• For generative mode: vectorize math operations where possible
• Use globalCompositeOperation for blending instead of manual pixel math

Output Checklist

Before generating a component, verify:

• Single .tsx file, zero imports b