Guizang's agent skill turns your repo's recent updates into a finished promo video — real components, code-rendered animation, an original code-written soundtrack — no video editor involved.
- agent-skill
- video
- promo
- marketing
Procedural Film
An agent skill that turns a topic into a 30-second vertical film where every pixel is drawn in JavaScript and every sound is synthesised — zero media assets.
Procedural Film is an agent skill whose SKILL.md holds the whole pipeline: it plans the film in four template documents, writes every shot as a 1000+ line scene file in vanilla JavaScript on canvas, synthesises all sound in Web Audio, and ships the result as one self-contained HTML player plus MP4 exports — no images, video or audio files in the output. The repo includes the engine (foundation/), a shot-type index and scene/music guides, and a complete worked example to copy: examples/butterfly-life, the monarch butterfly life cycle in 17 shots, 32 seconds, 120 bpm, 1080x1920 at 24 fps. Execution is parallel by design — one agent per shot, then critic waves review every shot — so it wants an agent that runs skills and dispatches parallel subagents, such as Claude Code. Tooling rebuilds the example deterministically: check.cjs runs a six-check gate, render.cjs exports the MP4, build.cjs rebuilds the HTML player. The look and editing are modelled on Kevin Ngo's fruit-fly film, with attribution recorded in-repo. MIT; Node 20+, ffmpeg, Playwright Chromium.
What it does
- One skill produces a self-contained HTML player plus MP4 exports — canvas pixels and Web Audio, zero media files
- Worked example included: monarch butterfly life cycle, 17 shots, 32 s, 120 bpm, 1080x1920 at 24 fps, as the visual target
- Parallel by design: one agent per shot writes a 1000+ line scene file, then critic waves review every shot
- Deterministic rebuilds: check.cjs six-check gate, render.cjs MP4 export, build.cjs HTML player
When to use it
Educators and creators who want a short explainer or motion-graphics piece produced end-to-end by an agent, and anyone studying how to orchestrate parallel subagents on a creative pipeline.
Getting started
git clone https://github.com/kuhnhomeuk-cell/procedural-film.git ln -s "$PWD/procedural-film/skills/procedural-film" ~/.claude/skills/procedural-film # prereqs: Node 20+, ffmpeg on PATH, Chromium for Playwright: npx --prefix examples/butterfly-life/tools playwright install chromium # rebuild the example film: npm install --prefix examples/butterfly-life/tools node examples/butterfly-life/tools/check.cjs
Things to know
MIT. Expect a long, expensive run: the README says outright that a film spends a large share of a usage plan. Needs an agent that dispatches parallel subagents — Claude Code fits; single-threaded agents will struggle. The look and editing are modelled on Kevin Ngo's 'The life of a fruit fly'; what was taken from it is recorded in examples/butterfly-life/docs/reference-analysis.md.
Repository
kuhnhomeuk-cell/procedural-filmCharted
Related on the map
geo-sleuth
SkillAn agent skill that geolocates a photo with nothing readable in it — OSM geometry, elevation skylines and satellite tiles turn “where was this taken?” into a measured answer with an error radius.
- agent-skill
- geolocation
- osint
- openstreetmap
Birdview
SkillA skill that makes AI coding agents map the architecture and declare the blast radius before they touch a line of code — rendered as one standalone HTML page.
- skill
- architecture
- code-visualization
- change-scope