procedural-film README

The project's README from github.com/kuhnhomeuk-cell/procedural-film. As one markdown file: README.md.

procedural-film

Six frames from the butterfly-life film, alternating hand-inked paper shots and navy blueprint shots

An agent skill that turns a topic into a 30-second vertical film. Every 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. The output is one self-contained HTML player plus MP4 exports.

The reference film is examples/butterfly-life, the life cycle of a monarch butterfly: 17 shots, 32 seconds, 120 bpm, 1080x1920 at 24 fps.

What is in the repo

Path Contents
skills/procedural-film/ The skill. SKILL.md is the pipeline, foundation/ is the engine and tools copied into each new film, templates/ holds the four planning documents, reference/ holds the shot-type index, scene and music guides, and frames from the example as the visual target.
examples/butterfly-life/ The butterfly film as the skill produces it: planning docs, source, tools, the HTML player and the phone MP4.

Requirements

Install the skill

Clone the repo, then link the skill into your agent's skills folder. A link keeps the worked example reachable at examples/butterfly-life/ beside the skill.

git clone https://github.com/kuhnhomeuk-cell/procedural-film.git

ln -s "$PWD/procedural-film/skills/procedural-film" ~/.claude/skills/procedural-film

For another agent, link it into that agent's skills folder.

Make a film

Ask your agent for a procedural film about a subject, for example "make a procedural film about the life of a honeybee". skills/procedural-film/SKILL.md holds the full pipeline. Expect 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.

Rebuild the butterfly film

npm install --prefix examples/butterfly-life/tools

node examples/butterfly-life/tools/check.cjs

node examples/butterfly-life/tools/render.cjs

check.cjs runs the six-check gate and exits 0 when green. render.cjs writes examples/butterfly-life/exports/butterfly-life.mp4. node examples/butterfly-life/tools/build.cjs rebuilds the HTML player.

Credit

The look and editing are modelled on Kevin Ngo's "The life of a fruit fly". examples/butterfly-life/docs/reference-analysis.md records what was taken from it.

License

MIT. See LICENSE.

procedural-film (kuhnhomeuk-cell/procedural-film)

Searching Database…

510 ·GitHub
Procedural-film
这是什么？这是一个智能体技能，把一个主题变成 30 秒的竖屏影片：每个像素都用原生 JavaScript 在画布上绘制，每个声音都用 Web Audio 合成，因此不使用任何现成素材或音频文件。它输出一个自包含的 HTML 播放器以及 MP4 导出文件。
这是独立应用，还是我要接入智能体的东西？它是一个技能（SKILL.md 流水线加一个引擎），用于链接到 AI 智能体的 skills 文件夹；智能体随后通过分派并行子智能体来驱动整个生成过程。
怎么安装和使用它？克隆仓库并把技能文件夹链接到你智能体的技能目录，然后直接让智能体就某个主题制作一部影片，例如“制作一部关于蜜蜂一生的程序化影片”。
运行它需要安装什么？需要 Node.js 20+、PATH 中的 ffmpeg、通过 Playwright 安装的 Chromium，以及一个能够运行技能并分派并行子智能体的智能体，例如 Claude Code。
生成一部影片需要多长时间？要有跑很久的心理准备：一个智能体为每个镜头编写 1000 多行的场景文件，随后多波评审会审查每个镜头，因此一部影片可能消耗掉智能体用量额度的很大一部分。
它只能配合 Claude Code 使用吗？Claude Code 是示例智能体，但 README 表示，只要智能体能够运行技能并分派并行子智能体，你就可以把该技能链接到任何智能体的 skills 文件夹。
仓库里附带的参考影片是什么？一个关于帝王蝶生命周期的成品示例（examples/butterfly-life）：17 个镜头、32 秒、120 bpm，以 1080x1920 和 24 fps 渲染，同时提供交互式 HTML 播放器和手机竖版 MP4。
怎么重新生成示例影片？运行 check.cjs 通过六项检查关卡，运行 render.cjs 生成蝴蝶 MP4，再运行 node examples/butterfly-life/tools/build.cjs 重新生成 HTML 播放器。
视觉风格的灵感来自哪里？画面和剪辑仿照 Kevin Ngo 的《The life of a fruit fly》，具体的影响记录在 examples/butterfly-life/docs/reference-analysis.md 中。
技能包里实际包含什么？skills/procedural-film/ 内含 SKILL.md（即流水线）、会复制到每部新影片中的基础引擎和工具、规划文档模板，以及一个包含镜头类型、场景和音乐指南及目标画面的参考文件夹。
What are similar projects?huashu-art-motion, PDoomVideo, ClaudeAnimationBase, motion-video-kit, lemo-opuscar, guizang-product-video-skill, riso-windowseat, onetake
Which topics is it in?web-audio, headless-chrome, video-production, procedural-generation, generative-art, creative-coding, canvas, claude-code-skill, playwright, ffmpeg, video-generation, audio
Creator
kuhnhomeuk-cell
Size
24.1 MB
Stars
510
Updated
CommitSep 24Releasev1.0.0Sep 17
Age
30d
Commits · 90 Days