Asciify is a framework-agnostic engine for ASCII on the web. Use it for interface components (loading buttons, toasts, tabs, AI states, charts, page transitions), for backgrounds behind your content, and for turning images, GIFs, video and text into characters. Components take their ink from your CSS tokens in light and dark, follow their element's size and radius, honour reduced motion and pause off screen.

Install

npm i asciify-engine

Or try it in a terminal, with nothing installed:

npx asciify-engine photo.jpg
npx asciify-engine torus

Building with a coding agent? Add the skill, then describe what you want:

npx skills add ayangabryl/asciify-engine

Quick start

import { buttonLoading } from 'asciify-engine/kit';
import { asciify } from 'asciify-engine';

const save = buttonLoading(document.querySelector('#save')!);
save.start('Saving');
await saveDraft();
save.succeed('Saved');

const stop = await asciify('/photo.jpg', document.querySelector('canvas')!, {
  fontSize: 8,
  options: { colorMode: 'fullcolor' },
});
// On unmount: save.destroy(); stop();

Features

• Kit (/kit): interface components and the curated asciify.org backgrounds, one call each.
• Media (asciify-engine, /core): images, GIFs, video, webcam and text to ASCII on a canvas, with scroll-scrubbed video, chroma key and source crop.
• GPU fields (/field): full-bleed WebGL2 character fields with trail, fluid and lantern cursor responses, in any font and charset. Heroes and video can draw in a worker (worker: true), leaving the page's main thread free. Or drop in <asciify-field> (defineAsciifyField()), one element for React, Vue, Svelte, Astro or plain HTML. Bring your own design with custom effects (a few lines of GLSL for your own hovers, reveals and motion, tweenable with GSAP or Motion), and draw live 3D: a three.js or React Three Fiber canvas becomes characters every frame.
• Headless (/headless): pixels to text with no DOM, in Node, workers and edge runtimes, for OG images, emails, CLIs and READMEs. Shape-aware: edges become / \ | _ ( ), not just denser dots. Text, ANSI colour, SVG and HTML output, animated SVG that plays in a README with no script, and braille, half-block, quadrant and sextant art in two colours a cell for terminals. In the browser, createAsciiGpu() converts live video on the GPU, in a worker of its own, for about 0.5 ms of main thread a 1080p frame in every mode.
• 3D models (/model): glTF/GLB, OBJ, STL and PLY as ASCII, drawn on the CPU in any runtime or on the GPU as a live field source that turns and follows the pointer.
• Command line: npx asciify-engine photo.jpg. Pictures, GIFs, video (through ffmpeg) and 3D models in your terminal, or as SVG, HTML, text and JSON, or a PNG, GIF or MP4 to post anywhere; turn a model with the mouse; many files in one run. Images decode with no dependencies (/decode), in Node and at the edge. Agents with the skill asciify whatever you attach.
• Hover and motion (/hover): pointer effects and still-image motions for media on your page.
• Studio (/studio): render styles, tonal curves, source warps, layered projects and PNG, JPEG, GIF, MP4 and WebM export.
• Agent skill: the house design, every component's prompt and snippet, and the full API, for Claude Code, Cursor, Codex and other agents.
• Built for host pages: no work at import, safe under SSR, tree-shaken per component, TypeScript types, ESM and CommonJS.

How it compares

Measured against the ASCII generators people use (ascii-magic.com and devault-ascii.pages.dev), aalib.js, ascii.rest (the Cloudflare-sponsored ASCII library), three.js AsciiEffect, the postprocessing ASCIIEffect, @sister.software/asciify and a naive ramp, on the same pictures and grid, with photos the engine was not tuned on: ahead of every renderer tested on photographs, line art and type, close up and at a distance (better than aalib on both measures on 16 of 20 photos), and several times faster than aalib. On the GPU, a glyph field with FIELD_PHOTO_CHARSET and sample: 'shape' is ahead of the studio WebGL heroes measured (2025.unseen.co's ASCII pass and webgl-ascii-hero) on photos, line art and type, close up and at a distance, and a playing source never makes it wait on the GPU. Method, numbers and the weak spots are in the benchmark report.

Stability

How things look is part of the API: patch releases never change rendered output, and CI compares every kit component, preset and field mark with stored screenshots. See STABILITY.md for versioning, deprecation and the runtime promises, and SECURITY.md to report a vulnerability.

Docs

Everything else lives at asciify.org/docs: the API reference, options, framework guides, chroma key, layering, Studio and GPU fields. The agent skill's references cover the same ground for agents.

Performance

Each optional entry loads only when imported, and a route that uses one kit component downloads that component, not the whole kit. What the engine promises a host page, and how it is measured, is in performance.md.

Contributing

Issues and pull requests are welcome. To work on the engine:

npm ci
npm test
npm run build

npm run test:visual checks the visual baselines and npm run test:browser serves the browser regression page; see CONTRIBUTING.md. Changes are listed in CHANGELOG.md.

Sponsors

Asciify is free and open source. Become a sponsor.

License

MIT © ayangabryl