What is this?
An agent skill that turns a topic into a 30-second vertical film, with every pixel drawn in vanilla JavaScript on a canvas and every sound synthesised with Web Audio, so no stock footage or audio files are used. It outputs a self-contained HTML player plus MP4 exports.
An agent skill that turns a topic into a 30-second vertical film, with every pixel drawn in vanilla JavaScript on a canvas and every sound synthesised with Web Audio, so no stock footage or audio files are used. It outputs a self-contained HTML player plus MP4 exports.Is this a standalone app or something I plug into an agent?It's a skill (SKILL.md pipeline plus an engine) meant to be linked into an AI agent's skills folder; the agent then drives the whole generation process by dispatching parallel subagents.
It's a skill (SKILL.md pipeline plus an engine) meant to be linked into an AI agent's skills folder; the agent then drives the whole generation process by dispatching parallel subagents.How do I install and use it?Clone the repo and link the skill folder into your agent's skills directory, then just ask the agent for a film about a subject, for example 'make a procedural film about the life of a honeybee'.
Clone the repo and link the skill folder into your agent's skills directory, then just ask the agent for a film about a subject, for example 'make a procedural film about the life of a honeybee'.What do I need installed to run it?Node.js 20+, ffmpeg on the PATH, Chromium installed via Playwright, and an agent capable of running skills and dispatching parallel subagents, such as Claude Code.
Node.js 20+, ffmpeg on the PATH, Chromium installed via Playwright, and an agent capable of running skills and dispatching parallel subagents, such as Claude Code.How long does generating a film take?Expect a long run: one agent writes a scene file of 1000+ lines per shot, then critic waves review every shot, so a single film can eat up a large share of an agent usage plan.
Expect a long run: one agent writes a scene file of 1000+ lines per shot, then critic waves review every shot, so a single film can eat up a large share of an agent usage plan.Does it only work with Claude Code?Claude Code is the example agent, but the README says you can link the skill into any agent's skills folder as long as that agent can run skills and dispatch parallel subagents.
Claude Code is the example agent, but the README says you can link the skill into any agent's skills folder as long as that agent can run skills and dispatch parallel subagents.What is the reference film included in the repo?A worked example about the life cycle of a monarch butterfly (examples/butterfly-life): 17 shots, 32 seconds, 120 bpm, rendered at 1080x1920 and 24 fps, shipped as both an interactive HTML player and a phone-cut MP4.
A worked example about the life cycle of a monarch butterfly (examples/butterfly-life): 17 shots, 32 seconds, 120 bpm, rendered at 1080x1920 and 24 fps, shipped as both an interactive HTML player and a phone-cut MP4.How do I rebuild the example film?Run check.cjs to pass the six-check gate, render.cjs to write the butterfly MP4, and node examples/butterfly-life/tools/build.cjs to regenerate the HTML player.
Run check.cjs to pass the six-check gate, render.cjs to write the butterfly MP4, and node examples/butterfly-life/tools/build.cjs to regenerate the HTML player.What inspired the visual style?The look and editing are modelled on Kevin Ngo's 'The life of a fruit fly', with the specific influences documented in examples/butterfly-life/docs/reference-analysis.md.
The look and editing are modelled on Kevin Ngo's 'The life of a fruit fly', with the specific influences documented in examples/butterfly-life/docs/reference-analysis.md.What does the skill package actually contain?skills/procedural-film/ holds SKILL.md (the pipeline), the foundation engine and tools copied into each new film, planning-document templates, and a reference folder with shot-type, scene, and music guides plus target frames.
skills/procedural-film/ holds SKILL.md (the pipeline), the foundation engine and tools copied into each new film, planning-document templates, and a reference folder with shot-type, scene, and music guides plus target frames.What are similar projects?huashu-art-motion, PDoomVideo, ClaudeAnimationBase, motion-video-kit, lemo-opuscar, guizang-product-video-skill, riso-windowseat, onetake
huashu-art-motion, PDoomVideo, ClaudeAnimationBase, motion-video-kit, lemo-opuscar, guizang-product-video-skill, riso-windowseat, onetakeWhich 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
web-audio, headless-chrome, video-production, procedural-generation, generative-art, creative-coding, canvas, claude-code-skill, playwright, ffmpeg, video-generation, audio