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.	physics-history · risograph · 40 s · mp4 A history of physics in 40 seconds, told without text. Galileo's moons of Jupiter, Newton's fall that is an orbit, Faraday's induction, Curie measuring radioactivity, Einstein's geometry that bends light and Schrödinger's standing waves all meet in an atlas of six lenses. Each figure passes to the next through one object that changes, and the score, synthesized in code, gains an instrument at every stage.

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.