drawn-by-code GitHub

This title is not a video.
It is being drawn, right now, by code.

Claude wrote the code; your browser is running it. Twenty-four times a second, every torn edge, every finger of that hand and every polaroid is painted onto a canvas from one number: the time.

01

Films, drawn line by line

Each one began as a brief and went through rounds of automatic critique and human notes until it held up frame by frame. JavaScript paints the frames, Chromium and ffmpeg turn them into a film.

Latest · sumi-e

The Red Thread 赤い糸

A river village splits in two when a black sleeve drops broadsheets into every pair of hands. Masks go on, the bridge falls, the red drains from the world, until two children's kite string becomes a new bridge.

Length
68 s
Style
Japanese ink on washi
Review
15 rounds
Score
Japanese lo-fi, per scene
Brief, notes and code
02

Fourteen ways to draw

A style is a drawing kit, a template and a skill: the rules and the checklist that keep it consistent. These plates are the templates, running live. Open the source to read exactly what you are looking at.

03

It learns in the open

No render reaches a person before Claude has looked at its frames. Every note a person gives is written down with its round, and whatever generalizes is written into a skill, so the next film starts where the last one ended.

  1. Briefidea, audience, the shots
  2. scene.jsa pure function of time
  3. RenderChromium paints, ffmpeg encodes
  4. review.mjsstills, jumps, flashes, determinism
  5. CritiqueClaude reads its own frames, up to three rounds
  6. Your noteswritten down with the round
  7. A skillthe lesson, for every next film

What a note becomes

04

Nothing is hidden

Many impressive AI-made videos are posted with no word on how they were made. Here everything is public, so anyone can learn from it, or do it better.

The code The engine and every scene A scene is Motion.scene({ draw(g, t, env) }). The renderer, the review, the reference measurer, the mixer. The skills How Claude is directed One skill per style, plus animate, review, hands, sound, transitions and replicate: rules, checklists and the pitfalls that cost a round. The process Every brief and every round Each experiment keeps its brief, its contact sheets, its reviews round by round, and the lesson it left behind.
getting started
# Node 20+, Chromium and ffmpeg
npm install
node engine/new.mjs my-test --style sumi-e --duration 5
npm run preview                          # http://127.0.0.1:5173
node engine/review.mjs sandbox/<exp>/scene.js
node engine/render.mjs sandbox/<exp>/scene.js --size 1920

or just ask Claude Code:

“Make me a ten-second paper-cutout video of a mug that wakes up before its owner.”

The animate skill takes it from there: brief, script, style test, animatic, film.

Add a style to the hub

Source
On GitHub ↗