ASCII Render

Turn any video into living ASCII art.

A browser editor and an AI tool (MCP): colored glyphs, edge detection, glow, glitch, digital rain, beat-synced styles — exported to MP4, GIF, PNG or plain text. Everything runs on your machine.

Live demo · Quick start · Use it from AI · Presets · How it works

Every frame above is generated by ASCII Render itself from procedural scenes (npm run assets). Watch the HD MP4.

✨ Features

Related MCP server: mcp-ffmpeg

🖥 The editor

• Drop a video (or hit Demo) and tweak with live preview — ~10–20 ms per 1080p frame.

• Zoom down to single glyphs, pan around, compare with the original using the wipe.

• Presets with live thumbnails of your own footage, randomizer, undo/redo, save your own.

• Share a style as a link or a .json file; open ?demo links to try it instantly.

• Camera mode with recording, keyboard shortcuts for everything (press ?).

• English and Ukrainian UI — picked from your browser language, switch any time with EN / УКР in the top bar (or ?lang=en / ?lang=uk).

🚀 Quick start

git clone https://github.com/xand0dev/ascii-render.git
cd ascii-render
npm install
npm run dev

Open http://localhost:5173 and drop a video. MP4 export needs a Chromium browser (Chrome, Edge, Arc) for WebCodecs; GIF export works everywhere.

🤖 Use it from AI (MCP)

MCP is the standard way for AI assistants to use local tools. ASCII Render ships an MCP server built on the same renderer as the editor, so a style made in the browser looks identical when Claude renders it.

You:     Make an ASCII version of ~/Desktop/clip.mp4 in the xand0dev style, 9:16, 4× faster
Claude:  ▸ video_info  ▸ preview_frame (looks at the result)  ▸ render_video
         Done: ~/Desktop/clip_ascii.mp4 — 1080×1920, 30 fps, 7.4 s, 18.2 MB

Setup — needs Node 20+ and ffmpeg (brew install ffmpeg):

npm install
npm run build:mcp

This repo includes .mcp.json, so running claude inside the folder offers to enable ascii-render. To have it everywhere:

claude mcp add ascii-render --scope user -- node /absolute/path/to/ascii-render/mcp/dist/server.mjs

Settings → Developer → Edit Config, then add:

{
  "mcpServers": {
    "ascii-render": {
      "command": "/opt/homebrew/bin/node",
      "args": ["/absolute/path/to/ascii-render/mcp/dist/server.mjs"]
    }
  }
}

Restart Claude Desktop. Desktop apps start servers with a minimal PATH, so use the absolute path to node; if ffmpeg isn't found, add "env": { "FFMPEG_PATH": "/opt/homebrew/bin/ffmpeg", "FFPROBE_PATH": "/opt/homebrew/bin/ffprobe" }.

Any MCP client that supports stdio servers works — point it at node /absolute/path/to/ascii-render/mcp/dist/server.mjs.

Try the server without an AI client — it calls every tool like a real client would:

npm run mcp:test -- ~/Desktop/clip.mp4 /tmp

Extra fonts for the Node renderer (IBM Plex Mono, VT323…) go into mcp/fonts/*.ttf.

🎨 Presets

Tweak anything, then press + to save it as your own preset, 🔗 to copy a share link, or { } to export it as .json. Presets can also be cycled on every beat of the music or blended from A to B across the clip.

⌨️ Shortcuts

🧠 How it works

flowchart LR
  A[Video frame] --> B[Downsample to the glyph grid]
  B --> C[Luma, contrast, gamma, motion map]
  C --> D{Each cell}
  D -->|strong gradient| E[Edge glyph]
  D -->|otherwise| F[Glyph by brightness<br/>ramp sorted by real ink coverage]
  D --> G[Color mode]
  E --> H[Text layer]
  F --> H
  G --> H
  H --> I[Trails, glitch, glow, scanlines]
  I --> J[(MP4 / GIF / PNG / text)]

• Glyph ramps are sorted by measuring each glyph's real pixel coverage in the chosen font, so density maps to brightness correctly for any font or custom set.

• Time-based effects use a deterministic hash, so the preview and the export render the exact same glitch and rain.

• Audio is analysed once (low-pass → RMS → normalised envelope); beats are onsets in that envelope.

• One renderer, two runtimes: Canvas 2D + WebCodecs in the browser, Skia (@napi-rs/canvas) + ffmpeg in the MCP server.

src/
  ascii.ts      the renderer (shared by browser and Node)
  looks.ts      beat switching, A → B blending, reframing
  audio.ts      bass envelope and beat detection
  export.ts     WebCodecs MP4 + GIF export
  i18n.ts       UI translations (English, Ukrainian)
  main.ts, ui/  the editor
mcp/            MCP server: tools, ffmpeg pipeline, Node canvas platform
scripts/        procedural scenes + generator for every image and video in this README

🛠 Scripts

🗺 Roadmap

• English & Ukrainian UI

• More languages — translations live in src/i18n.ts, PRs welcome

• WebGL renderer for real-time 4K preview

• Transparent-background export (WebM with alpha)

• Batch processing of a folder

• Publish the MCP server to npm (npx ascii-render-mcp)

Ideas and bug reports are welcome in issues.

🤝 Contributing

PRs are welcome — see CONTRIBUTING.md. The short version: npm install, npm run dev, keep npm run build and npx tsc -p mcp/tsconfig.json green.

📄 License

MIT © Oleksandr Riasnyi

Inspired by Andy Sloane's donut.c and Paul Bourke's character ramp.