Foldline

Foldline

Render HTML canvas animations to MP4, fast, on a Mac.

With the full lemo-opuscar library of 66 film styles made in code.

Made for Unfold, an animated "What if" channel in a paper pop-up book style.

https://github.com/user-attachments/assets/05724852-c9ae-4762-90a9-634315b2b016

▶ Watch on YouTube · download the MP4 · read the deep dive on Medium

Made with Foldline itself: every frame drawn in code, a local text-to-speech voice, music synthesised in code. It renders in 34 s. Source in examples/foldline-explainer .

What it is

Foldline turns a web page that draws a film in code into an H.264 MP4. You write an HTML page with a and a render(t) function. Foldline opens it in headless Chrome, draws every frame, and encodes the video inside the page with WebCodecs on the Mac's hardware encoder, so frames never leave the GPU. On an M1 Pro, an 8.4-minute 1080p 60 fps video renders in 161 s instead of 426 s (see Results). It's open source and free for non-commercial use, and it works well with coding agents like Claude Code.

Foldline is a project by Alireza Toghiani, built for the Unfold channel. It isn't a GitHub fork. It ships the full lemo-opuscar library by LemoLab:

• all 66 film styles in styles/, each with a style prompt and a demo film made in code
• the toolkit in core/ (render, voice, music, mix)
• the guides DIRECTOR.md, TECHNIQUE.md and MY-STYLES.md
• lemo's Claude Code plugin in plugin/

lemo's original README is kept as LEMO-README.md. It has the style list, how to make a style your own, and the full requirements.

What Foldline adds is a faster video renderer, core/render/video.mjs, and an MCP server for coding agents, core/mcp/server.mjs.

What's new vs lemo-opuscar

• The page encodes the video itself. By default video.mjs encodes H.264 inside the page with WebCodecs, on the Mac's hardware encoder. Each frame goes from the canvas to the encoder on the GPU. No screenshot, no JPEG, no ffmpeg decode.
• It works when the film draws into one visible ` ` of the render size. 35 of the 66 lemo demos do, and Unfold's videos do.
• Automatic fallback. If the page doesn't fit that, or the browser has no hardware H.264 encoder, it falls back to the screenshot path with the Mac hardware encoder (VideoToolbox). If that isn't available either, it uses x264.
• `FOLDLINE_ENC=auto|wc|vt|x264` picks the encoder. auto is the default. x264 is lemo's original path. LEMO_ENC still works.
• `FOLDLINE_MBPS` sets the bitrate for the WebCodecs path, in Mbit/s (default 20).
• New flag `--audio ` muxes a sound file in (AAC 192k). It runs as a second ffmpeg pass from the finished mp4. The renderer refuses to finish if the file is missing its video or audio stream.
• Output is standard bt709 limited-range H.264 mp4.
• MCP server in core/mcp/: agents get the styles, guides, renders and sound tools as MCP tools with short results. See MCP server.

Everything else in the library works the way lemo describes it.

How it compares

Foldline is a renderer plus a style library, not a framework or a timeline editor. You write the page, Foldline renders it.

Sources, checked Nov 6 2026: Remotion's encoding and hardware acceleration docs, Motion Canvas's rendering docs and the HyperFrames README. Projects change, so check their docs for the latest. Foldline's speed numbers are in Results.

Install

You need:

• macOS on Apple Silicon (recommended). The fast path needs Chrome's hardware H.264 encoder. Other systems fall back to the screenshot path.
• Node 20+
• ffmpeg 7+
• Python 3.11+, for the voice and music tools

git clone https://github.com/alireza12t/foldline.git

cd foldline npm ci node node_modules/playwright-core/cli.js install chromium-headless-shell

The last line installs the headless Chrome the renderer uses, the same way lemo's setup script does it. To use a different Chrome or headless-shell executable, set PLAYWRIGHT_CHROME=/path/to/chrome-headless-shell.

For the Python tools (sound effects, mix, subtitles, voice), lemo's setup script makes the .venv in tiers. Run it from the repo folder:

Optional big assets

These aren't in git. Fetch them only when a film needs them. tools/fetch.sh downloads them from lemo-opuscar's assets release on GitHub.

Full sizes and details are in TECHNIQUE.md §1.

Usage

Run every command from the repo folder.

Render a library demo

node core/render/video.mjs styles/rubber-hose/demo --fps 24 --out out/rubber-hose.mp4

Some demos need a one-time setup in their own folder first:

• npm ci if the demo has a package.json
• node fetch_fonts.mjs if it has one

Render your own page

node core/render/video.mjs my-film --size 1080x1920 --fps 60 --audio my-film/mix.wav --out my-film/out/video.mp4

my-film is any folder with an index.html that follows the page contract below.

Stills

node core/render/still.mjs <dir> 3 20 --out <dir>

This writes review JPEGs at 3 s and 20 s. See core/README.md for --range and --prefix.

Flags

Environment variables

The rest of lemo's variables (PLAYWRIGHT_CHROME, LEMO_ANGLE, RENDER_SLOTS and more) are listed in core/README.md.

The page contract

This comes from lemo. Each film is a folder with an index.html that sets:

window.DUR = 54.2;                 // film length in seconds

window.render = (t) => { ... }; // draw the frame at t seconds; may be async window.READY = true; // set once fonts and assets are loaded

For the fast path, draw the whole film into one visible of the render size. Any other page still renders, through the screenshot path.

Using it with a coding agent

lemo's plugin and skill are for Claude Code. How to install them, and how to ask for a film, is in LEMO-README.md, How to use. The plugin installs lemo's own library into ~/lemo-opuscar. lemo's setup script uses the clone you're standing in when it's a library, so to work with Foldline's renderer, start your agent inside this folder (lemo's "clone the repo" option).

MCP server

Foldline has an MCP server, so Claude Code, Codex, Cursor and other agents can call its tools directly instead of reading the guides and running commands by hand. It's on npm as foldline-mcp, and it's listed in the MCP Registry as io.github.alireza12t/foldline.

You need Node 20+, ffmpeg (brew install ffmpeg) and Chrome's headless shell, installed once with npx playwright-core@1.63.0 install chromium-headless-shell. The server tells you if one is missing.

Claude Code, as a plugin:

claude plugin install foldline --marketplace alireza12t/foldline

or as a plain MCP server:

claude mcp add --scope user foldline -- npx -y foldline-mcp

Codex, in ~/.codex/config.toml:

[mcp_servers.foldline]

command = "npx" args = ["-y", "foldline-mcp"]

Cursor (~/.cursor/mcp.json), Claude Desktop and most other clients:

{ "mcpServers": { "foldline": { "command": "npx", "args": ["-y", "foldline-mcp"] } } }

VS Code (.vscode/mcp.json):

{ "servers": { "foldline": { "command": "npx", "args": ["-y", "foldline-mcp"] } } }

To use your own clone instead of npm, point the command at it: `node /path/to/foldline/core/mcp/server.mj