Engine

input ──▶ sample ──▶ shape ──▶ glyphs ──▶ paint
source     drawImage   contrast   ramp or    glyph atlas
field      f(x,y,t)    gamma      braille,   drawImage
                       edges      quadrants
frame      you write   dither                per cell
                                             palette

<AsciiCanvas
  aria-hidden
  opacity
  className="text-primary"
  field={(x, y, t, s) => {
    const dx = (x - 0.5 - 0.25 * Math.cos(t)) * s.aspect
    const dy = y - 0.5 - 0.25 * Math.sin(t)
    return Math.max(0, 1 - Math.hypot(dx, dy) * 4)
  }}
/>

<AsciiCanvas
  frame={(f, t) => {
    for (let i = 0; i < f.tone.length; i++) f.tone[i] = Math.random() < 0.02 ? 1 : 0
  }}
/>

const ascii = useRef<AsciiHandle>(null)

<AsciiCanvas ref={ascii} source={img} />

ascii.current.text()  // plain text, one line per row
ascii.current.svg()   // scalable <svg> with your theme colour
await ascii.current.png()  // Blob at device resolution