drawn-by-code

_{This cover is itself drawn by the repo: the paper kit tears the tiles and the hand, and the carousel shows one polaroid per style, each painted by that style's own template (readme-cover).}

Animations and videos made with code by Claude. JavaScript paints every frame on a <canvas> (2D, or 3D through WebGL2), deterministically. Chromium and ffmpeg render the frames to MP4. No After Effects, no AI-generated video: every torn edge, fingerprint and hand is code.

The goal: push Claude's knowledge and visual limits as far as they go. How far can a language model get as an animator, with nothing but code: paper that tears like paper, hands that hold a mug the right way round, clay that looks like clay, a replica you have to zoom into to tell apart? Every experiment here pushes that edge a little further.

The repo is both a toolbox (engine, styles, Claude skills) and a test bench. Every experiment in sandbox/ goes through an automatic review (real frames, determinism, rhythm, motion) and through human feedback. What is learned goes back into the skills, so every test improves the next one.

A hub for styles: contribute

The idea is for this to become a hub: a growing library of animation styles, each with its drawing kit, its template, its skill (the rules and the checklist that keep it consistent) and the videos that prove it. Styles and skills are yours to add and improve, by pull request:

• A new style: risograph, pixel art, isometric, whiteboard, stained glass, woodcut, anime, a style no one has named yet.
• A better existing style: more detail, a fixed pitfall, a new pose for the hands, a faster kit, a lesson learned the hard way.
• The engine and the skills: tools, review checks, sound, transitions, the process.

Every contribution follows the same loop as everything else here: a render, frames looked at, a review. See CONTRIBUTING.md.

Why it is all public

A lot of impressive AI-made videos get posted with no prompt, no skill and no word on how they were made. We respect that choice, but we think everyone would learn faster, and the field would grow faster, if that knowledge were public.

So nothing here is hidden:

• Code: the engine and every scene.
• Skills: the ones that direct Claude, including their rules, checklists and pitfalls.
• The process: every experiment's brief, its rounds of review with the feedback quoted verbatim, and the lessons that came out of them.

If a video here makes you want to try something, everything you need to make it, or to do it better, is in this repo. And if you publish a video made with AI, consider publishing how you made it too.

Gallery

saas-promo · paper cutout · 50 s · mp4 A marketing video for an invoicing product: a desk buried in paperwork is cleared block by block. Built by parallel agents on one brief, with music and sound effects.	what-do-you-love · paper cutout · 28 s · mp4 A 1:1 replica, made as a study, of a paper-cutout video by Kevin Ngo (@kevin_t_ngo). The original design and animation are his. Measured drawing by drawing until the differences only show when zooming in (skill replicate). His video also inspired the first saas-promo.
exquisite-corpse · five styles · 30 s · mp4 One object travels through five styles joined by transitions: paper, a 70s poster, liquid light, a kaleidoscope and line.	opus5-riso · risograph · 28 s · mp4 A 1:1 replica, made as a study, of a risograph film by Kevin Ngo (@kevin_t_ngo). The original design and animation are his. Four spot inks, halftone and misregistration from a simulated press, scored tile by tile against the original by the detail gate.
clay3d-test · clay 3D · 4 s · mp4 A plasticine puppet raymarched in the browser: lumpy pressed-on pieces, matte clay and a studio sweep.	A Brief History of Physics · risograph · 67 s · mp4 Galileo's eye at the telescope pulls back to a rooftop in Padua; Jupiter becomes the apple a cat pushes onto Newton's head; its orbit winds into Faraday's coil, whose spark is the glow of Curie's radium; its ray is the light young Einstein chases into a black hole; and the cube it leaves becomes Schrödinger's box, where the cat is alive and dead in sixteen worlds until the lid lifts. One continuous chain of objects, the same cat in every scene, drawn entirely in JavaScript; score and effects generated with ElevenLabs.
The pyramid that makes skies · engraving · 64 s · mp4 A plate of the «Description de l'Égypte» comes alive: a mark is painted on a stone, the pyramid opens into thousands of floating blocks, and the camera flies without a cut through a temple's rooms (each joined to the next by a doorway in the shot) to a seed that holds a sky of its own and leaves as a new star. 3D in WebGL, drawn in charcoal on old paper; music made with ElevenLabs.

Every experiment, with its status and main lesson, is in sandbox/INDEX.md.

Styles

Each style is a drawing kit, a template and a skill with its rules. Open a style's folder to see its strip, files and the videos made with it.

To add one: the new-style skill, and CONTRIBUTING.md for the pull request.

Getting started

Requirements: Node 20 or later, Chrome or Chromium, and ffmpeg (sh engine/setup.sh installs what is missing).

npm install
node engine/new.mjs my-test --style paper-cutout --duration 5
npm run preview                                      # http://127.0.0.1:5173
node engine/review.mjs sandbox/<exp>/scene.js        # automatic review + contact sheet
node engine/render.mjs sandbox/<exp>/scene.js --size 1920   # the MP4

With Claude Code, just ask: "make me a 10 s paper-cutout video for…". The animate skill guides the process: brief → script → style test → animatic → final.

How it works

• A scene is a pure function of time. Motion.scene({ draw(g, t, env) }) paints frame t with no state carried between frames, so any frame can be rendered alone and the review can check determinism. Stop-motion styles change drawing every 1/12 s ("on twos").
• The engine (engine/): player.html runs the scene in headless Chromium, render.mjs pipes the frames to ffmpeg, and review.mjs critiques a render (still stretches, jumps, holes, speed, determinism) and makes a contact sheet. There are also:
  • reference.mjs: measures a reference video (colours, positions, cuts, tracking, side-by-side comparisons);
  • tempo.mjs: reads BPM and loudness;
  • mix.mjs: music plus effects, each aligned on the frame where you hear it;
  • transitions.js: transitions between styles;
  • gif.mjs and strip.mjs: the GIFs on this page and the strips in each style's folder.
• Skills (.claude/skills/) hold the process and the taste:
  • animate (brief to MP4) and review (the critique loop);
  • engine and sound;
  • replicate (copying a reference 1:1) and transitions;
  • one skill per style.

How it learns

brief ─▶ scene.js ─▶ review.mjs ─▶ Claude's critique ─▶ fix  (≤3 rounds)
                                                     │
                                       user feedback ◀┘
                                                     │
      does it generalize? ─▶ style skill / animate / engine / sound / review.mjs
                                                     │
                                             commit per round

The user's words are kept verbatim in each experiment's review.md. A lesson that generalizes becomes a rule in a skill: hands drawn by side and view, logos traced from the brand's SVG, bounding volumes that must not cast shadows.

Repository

Licenses

Patrick Hand, Shrikhand and Short Stack fonts under the SIL OFL 1.1 (fonts/). The effects in assets/sfx/ were generated with ElevenLabs: commercial use requires a paid plan. A client's source files (brand copy, logo files, fonts, music) live in the experiment's private/ folder and are not committed.