# Procedural Film

Procedural film, turn a subject into a short animated film drawn and scored entirely...

- Repository: https://github.com/kuhnhomeuk-cell/procedural-film (529 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-09-25
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add kuhnhomeuk-cell/procedural-film --skill procedural-film -g -a claude-code -y`
Codex: `npx skills add kuhnhomeuk-cell/procedural-film --skill procedural-film -g -a codex -y`
Cursor: `npx skills add kuhnhomeuk-cell/procedural-film --skill procedural-film -g -a cursor -y`
Gemini CLI: `npx skills add kuhnhomeuk-cell/procedural-film --skill procedural-film -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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.

The rest: https://github.com/kuhnhomeuk-cell/procedural-film/blob/HEAD/skills/procedural-film/SKILL.md