[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-96391":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":15,"stars7d":16,"stars30d":16,"stars90d":14,"forks30d":14,"starsTrendScore":17,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":9,"pushedAt":9,"updatedAt":24,"readmeContent":25,"aiSummary":9,"trendingCount":14,"starSnapshotCount":14,"syncStatus":26,"lastSyncTime":27,"discoverSource":28},96391,"procedural-film","kuhnhomeuk-cell\u002Fprocedural-film","kuhnhomeuk-cell","Agent skill: turn a topic into a 30s vertical film drawn and scored entirely in JavaScript. Reference film: the life of a monarch butterfly.",null,"JavaScript",165,19,111,0,22,41,85,3.9,"MIT License",false,"main",true,[],"2026-09-21 02:04:32","# procedural-film\n\n![Six frames from the butterfly-life film, alternating hand-inked paper shots and navy blueprint shots](media\u002Fbanner.jpg)\n\nAn agent skill that turns a topic into a 30-second vertical film.\nEvery pixel is drawn in vanilla JavaScript on a canvas and every sound is synthesised in Web Audio, so the film ships with zero media assets.\nThe output is one self-contained HTML player plus MP4 exports.\n\nThe reference film is `examples\u002Fbutterfly-life`, the life cycle of a monarch butterfly: 17 shots, 32 seconds, 120 bpm, 1080x1920 at 24 fps.\n\n- Watch the phone cut: [`examples\u002Fbutterfly-life\u002Fexports\u002Fbutterfly-life-phone.mp4`](examples\u002Fbutterfly-life\u002Fexports\u002Fbutterfly-life-phone.mp4)\n- Interactive player: download [`examples\u002Fbutterfly-life\u002Fdist\u002Fbutterfly-life.html`](examples\u002Fbutterfly-life\u002Fdist\u002Fbutterfly-life.html) and open it in a browser\n\n## What is in the repo\n\n| Path | Contents |\n|---|---|\n| `skills\u002Fprocedural-film\u002F` | The skill. `SKILL.md` is the pipeline, `foundation\u002F` is the engine and tools copied into each new film, `templates\u002F` holds the four planning documents, `reference\u002F` holds the shot-type index, scene and music guides, and frames from the example as the visual target. |\n| `examples\u002Fbutterfly-life\u002F` | The butterfly film as the skill produces it: planning docs, source, tools, the HTML player and the phone MP4. |\n\n## Requirements\n\n- Node.js 20 or newer\n- ffmpeg on the `PATH`\n- Chromium for Playwright, installed after the `npm install` below with `npx --prefix examples\u002Fbutterfly-life\u002Ftools playwright install chromium`\n- An agent that runs skills and dispatches parallel subagents, for example Claude Code\n\n## Install the skill\n\nClone the repo, then link the skill into your agent's skills folder.\nA link keeps the worked example reachable at `examples\u002Fbutterfly-life\u002F` beside the skill.\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fkuhnhomeuk-cell\u002Fprocedural-film.git\n```\n\n```bash\nln -s \"$PWD\u002Fprocedural-film\u002Fskills\u002Fprocedural-film\" ~\u002F.claude\u002Fskills\u002Fprocedural-film\n```\n\nFor another agent, link it into that agent's skills folder.\n\n## Make a film\n\nAsk your agent for a procedural film about a subject, for example \"make a procedural film about the life of a honeybee\".\n`skills\u002Fprocedural-film\u002FSKILL.md` holds the full pipeline.\nExpect a long run: one agent per shot writes a scene file of 1000+ lines, then critic waves review every shot, so a film spends a large share of a usage plan.\n\n## Rebuild the butterfly film\n\n```bash\nnpm install --prefix examples\u002Fbutterfly-life\u002Ftools\n```\n\n```bash\nnode examples\u002Fbutterfly-life\u002Ftools\u002Fcheck.cjs\n```\n\n```bash\nnode examples\u002Fbutterfly-life\u002Ftools\u002Frender.cjs\n```\n\n`check.cjs` runs the six-check gate and exits 0 when green.\n`render.cjs` writes `examples\u002Fbutterfly-life\u002Fexports\u002Fbutterfly-life.mp4`.\n`node examples\u002Fbutterfly-life\u002Ftools\u002Fbuild.cjs` rebuilds the HTML player.\n\n## Credit\n\nThe look and editing are modelled on Kevin Ngo's [\"The life of a fruit fly\"](https:\u002F\u002Fx.com\u002Fkevin_t_ngo\u002Fstatus\u002F2099858454043349342).\n`examples\u002Fbutterfly-life\u002Fdocs\u002Freference-analysis.md` records what was taken from it.\n\n## License\n\nMIT. See [`LICENSE`](LICENSE).\n",2,"2026-09-19 02:30:03","CREATED_QUERY"]