Canvas recorder

[benjaminleonard]

This PR rewrites how the ASCII art is rendered and exported, moving from DOM/HTML rendering to a <canvas>-based pipeline, and swaps out the video export stack. Exports are now dramatically faster, especially longer animations.

Core change: DOM → Canvas rendering

• The live preview no longer renders ASCII into a <pre> element with <span>s. It now draws directly to a <canvas> (#ascii-canvas).
• New app/lib/core/canvas-renderer.ts replaces the deleted text-renderer.ts. It paints cells to a 2D context, with 3× supersampling (on top of devicePixelRatio) to stay crisp at the now-capped 3× zoom.
• animation.ts was restructured.
• Color text rendering for canvas was reimplemented (main had this in the text renderer.

Export pipeline rewrite (asset-export.tsx, the biggest diff)

• Video: ffmpeg.wasm → canvas-record. Removed @ffmpeg/ffmpeg/@ffmpeg/util n favor of the canvas-record + media-codecs libraries using the browser's native H264 (AVC) encoder. The GIF format option was dropped — formats are now frames | png | svg | mp4.
• Removed html2canvas-pro — PNG/frame export now renders the buffer directly to an offscreen canvas (renderBufferToCanvas) rather than screenshotting the DOM. No more waitForPaint/setTimeout DOM-sync hacks.
• SVG flatten: a new flattenSvg toggle outlines glyphs into <path> data using opentype.js, instead of emitting <text>/<tspan>.

Text extraction moved to a testable module

• New app/lib/buffer-text.ts: getContent() (flat buffer → newline text) and getColoredRows() (buffer → per-row colored segment runs). These replace the old DOM-scraping getContent/extractColoredRows that read from .ascii-animation pre, decoupling export logic from the DOM.

Testing & tooling (new)

• Playwright e2e (e2e/render-snapshot.spec.ts, playwright.config.ts): render-snapshot tests that drive the real app, wait for canvas paint + font readiness, and compare canvas bitmaps / exported assets against platform-specific PNG baselines (committed for chromium-darwin).
• Unit tests tests/buffer-text.test.ts for the new buffer module. package.json test scripts now scope to tests/ and add test:e2e / test:e2e:update.
• New AGENTS.md with build/lint/test/style conventions.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
mitos	Ready	Preview	Jun 3, 2026 10:21am