Procedural Film
Procedural film, turn a subject into a short animated film drawn and scored entirely...
Install
npx skills add kuhnhomeuk-cell/procedural-film --skill procedural-film -g -a claude-code -y- Repository
- kuhnhomeuk-cell/procedural-film529
- Category
- Engineering
- Updated
- 1mo ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
Procedural film, turn a subject into a short animated film drawn and scored entirely in JavaScript, in one of three modes: drawn (every pixel computed, zero assets), photo-doodle (real photographs with animated doodles drawn over them) or retro (pixel art on an NES palette with a chip score). Use when the user asks for a procedural film, a short hand-drawn animated film about a subject, a film that doodles on photos, or a retro pixel-art film. It also makes a retro platformer game: use it when the user asks for a retro platformer game, an NES-style game or a pixel-art game to play in the browser.
Procedural film
Turn a topic into a film: roughly 30 seconds at 24 fps, every event on a beat grid (bpm → beats → frames), every stroke and every audio sample computed in plain browser JavaScript. The deliverable is dist/<slug>.html (a self-contained player) plus exports/<slug>.mp4 and its phone and preview transcodes.
The skill also makes a retro platformer game that plays in the browser. That track is under "Retro game" at the end of this file.
Modes, pick one before step 1
| drawn (default) | photo-doodle | retro | |
|---|---|---|---|
| What is on screen | every pixel computed: hand-inked paper plate shots cut against navy blueprint plate shots | a background-removed photograph per shot, standing on tinted paper, with animated doodles drawn over and around it | pixel art on the NES palette, shown sharp or on an optional old TV |
| Frame | vertical 1080×1920 | square 1080×1080 | 1920×1080 at 60 fps, drawn at 320×180 |
| Subject | explaining something real: a life cycle, a process, how a thing works | a story staged on ordinary objects, where each photo becomes a set (a clock becomes a bed, a pine cone becomes a mountain) | a story told as a side-scrolling pixel scene |
| Assets | none at all | photographs you source, licence and cut out yourself | none at all |
| Extra steps | , | 1b source the photographs, 3b write the cast | 3c draw the cast sheet |
| Extra files | , | src/photos.js (generated), src/props.js, src/cast.js, assets/ | src/pixel.js, src/chip.js, src/crt.js (from retro/), src/sprites.js |
All three modes run the same ten steps, the same gate and the same beat grid; the deltas are marked photo-doodle: inside each step, and the retro deltas are marked retro:. Say which mode you are in when you confirm the brief.
