ClaudeMap

Procedural Film

把一个主题变成 30 秒竖屏影片的 agent skill:每个像素由 JavaScript 绘制、每段声音由 Web Audio 合成——零媒体素材。

技能与命令skillcreativecanvasweb-audiovideo

Procedural Film 是一个把整条流水线写进 SKILL.md 的 agent skill:先用四份模板文档规划影片,再把每个镜头写成 1000+ 行的原生 JavaScript 场景文件(canvas 绘制)、全部声音用 Web Audio 合成,最终产出单个自包含 HTML 播放器加 MP4 导出——成片不含任何图片、视频或音频素材。仓库自带引擎(foundation/)、镜头类型索引、场景与音乐指南,以及一个可完整对照的成品示例:examples/butterfly-life,帝王蝶生命周期,17 个镜头、32 秒、120 bpm、1080x1920@24fps。执行天然并行——每个镜头一个 agent,之后评审波次逐镜头把关——因此需要一个会跑 skill 并派发并行 subagent 的 agent,Claude Code 正合适。工具链可确定性重建示例:check.cjs 跑六项检查门禁,render.cjs 导出 MP4,build.cjs 重建 HTML 播放器。视觉与剪辑风格致敬 Kevin Ngo 的果蝇影片,出处已在仓库内记录。MIT;Node 20+、ffmpeg、Playwright Chromium。

它做什么

  • 一个 skill 产出自包含 HTML 播放器加 MP4 导出——像素靠 canvas、声音靠 Web Audio,零媒体文件
  • 自带成品示例:帝王蝶生命周期,17 镜头、32 秒、120 bpm、1080x1920@24fps,作为视觉基准
  • 天然并行:每镜头一个 agent 写 1000+ 行场景文件,评审波次逐镜头把关
  • 可确定性重建:check.cjs 六项检查门禁、render.cjs 导出 MP4、build.cjs 重建播放器

什么时候用

想让 agent 端到端产出一条科普短片或动态图形作品的教育者与创作者;以及研究如何在创意流水线上编排并行 subagent 的人。

如何上手

git clone https://github.com/kuhnhomeuk-cell/procedural-film.git
ln -s "$PWD/procedural-film/skills/procedural-film" ~/.claude/skills/procedural-film

# 前置:Node 20+、PATH 里有 ffmpeg、Playwright 的 Chromium:
npx --prefix examples/butterfly-life/tools playwright install chromium

# 重建示例影片:
npm install --prefix examples/butterfly-life/tools
node examples/butterfly-life/tools/check.cjs

注意事项

MIT。预期运行又长又贵:README 明说一部影片会消耗相当大份额的用量套餐。需要会派发并行 subagent 的 agent——Claude Code 合适,单线程 agent 会很吃力。视觉与剪辑风格仿自 Kevin Ngo 的《The life of a fruit fly》;具体借鉴了什么记录在 examples/butterfly-life/docs/reference-analysis.md。

代码仓库

kuhnhomeuk-cell/procedural-film

收录日期

地图上的相关资源

  • 归藏的 Agent Skill:把代码库的最近更新做成一支成片宣传片——接真实组件、代码渲染动画、代码写配乐,全程不碰视频剪辑软件。

    • agent-skill
    • video
    • promo
    • marketing
  • 一个给「图里没有任何文字线索」的照片做地理定位的 Agent Skill——用 OSM 几何、高程天际线与卫星瓦片,把「这是哪」变成带误差半径的测量答案。

    • agent-skill
    • geolocation
    • osint
    • openstreetmap
  • Birdview

    技能

    让 AI 编码 agent 在动第一行代码之前先画出架构、声明影响范围的 skill——成果是一张可直接打开的独立 HTML 架构地图。

    • skill
    • architecture
    • code-visualization
    • change-scope