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

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.

Style	Look	Status
paper-cutout	torn paper, marker, grain, handwriting, real hands	approved
risograph	four spot inks, halftone, overprints, misregistration	approved
sumi-e	Japanese ink on washi: dry brush, washes in mist, vermilion as the only colour	approved
engraving	a plate of the «Description de l'Égypte» drawn in charcoal on old paper, temple reliefs	approved
cereal-ad	a '90s cereal spot on VHS: cel boxes, sunbursts, extruded letters, tape noise on a CRT	approved
70s-poster	flat acid colours, echoes, sunbursts, melting letters	approved
liquid-light	merging oil blobs, a 60s light show	approved
kaleidoscope	mirror symmetry, rotation, colour cycling	approved
line	a wobbling black line on white paper	approved
clay	2D plasticine: bevels, fingerprints, soft shadows	in testing
clay3d	3D plasticine puppets, raymarched, studio light	in testing
felt3d

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.

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗