Create Asset-Free Procedural Films with JavaScript, Canvas, and Web Audio

What procedural-film does

procedural-film is an agent skill for turning a topic into a roughly 30-second vertical film. Instead of assembling image, video, or audio files, each film draws its visuals in vanilla JavaScript on an HTML canvas and synthesizes its soundtrack with the Web Audio API.

The finished project can produce a self-contained HTML player and MP4 exports. Because the visuals and sounds are generated in code, the film ships with zero media assets.

The repository includes a complete reference production at examples/butterfly-life. It depicts the life cycle of a monarch butterfly in 17 shots, runs for 32 seconds at 120 bpm, and uses a 1080-by-1920 vertical frame at 24 frames per second.

Key features

• Procedural visuals: Every pixel is drawn with vanilla JavaScript and Canvas.
• Synthesized audio: Every sound is generated through Web Audio.
• Asset-free delivery: The film does not depend on separate media files.
• Vertical output: The reference workflow targets a phone-friendly 1080-by-1920 format.
• Multiple deliverables: The pipeline creates a standalone HTML player and MP4 exports.
• Agent-based production: Parallel subagents can write individual scenes, while critic waves review the shots.
• Built-in validation: The example includes a six-check quality gate before rendering.

Understand the repository structure

The repository is divided into the reusable skill and a worked example:

• skills/procedural-film/ contains the agent skill.
• skills/procedural-film/SKILL.md defines the complete production pipeline.
• skills/procedural-film/foundation/ contains the engine and tools copied into each new film.
• skills/procedural-film/templates/ contains four planning-document templates.
• skills/procedural-film/reference/ contains the shot-type index, scene and music guides, and reference frames.
• examples/butterfly-life/ contains planning documents, source code, tools, the HTML player, and the phone MP4 for the butterfly film.

Prerequisites

Install the following software before using the skill:

• Node.js 20 or newer
• ffmpeg, available on your system PATH
• Chromium for Playwright
• An agent that supports skills and parallel subagents, such as Claude Code

Confirm that Node.js and ffmpeg are available:

node --version
ffmpeg -version

Install the procedural-film skill

1. Clone the repository

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

2. Link the skill into your agent

From the directory containing the cloned repository, create a symbolic link in Claude Code's skills folder:

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

The symbolic link is useful because it keeps the worked example available beside the skill at examples/butterfly-life/. If you use a different compatible agent, link the same skill directory into that agent's skills folder instead.

3. Install the example's tool dependencies

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

4. Install Chromium for Playwright

npx --prefix examples/butterfly-life/tools playwright install chromium

Create a film from a topic

Once the skill is linked, ask your agent to create a procedural film about a subject. For example:

Make a procedural film about the life of a honeybee.

The agent follows the pipeline in skills/procedural-film/SKILL.md. Production is intentionally substantial: one agent per shot writes a scene file that may exceed 1,000 lines, and critic waves then review every shot.

Plan for a long-running and resource-intensive agent session. The README notes that a complete film can consume a large share of an agent usage plan.

Rebuild the butterfly reference film

Rebuilding the included example is the easiest way to verify that Node.js, ffmpeg, Playwright, and Chromium are configured correctly.

1. Run the validation gate

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

The check.cjs script runs the project's six-check gate. A successful validation exits with status code 0.

2. Render the MP4

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

The renderer writes the resulting video to:

examples/butterfly-life/exports/butterfly-life.mp4

3. Rebuild the standalone HTML player

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

This command rebuilds the HTML player. The existing interactive player is located at examples/butterfly-life/dist/butterfly-life.html and can be downloaded or opened in a browser.

A practical development workflow

1. Start with a clearly defined topic and ask the agent to make a procedural film about it.
2. Allow the agent and parallel subagents to generate the planning documents and scene files.
3. Let the critic waves review the shots rather than stopping after initial generation.
4. Run the project's validation checks before rendering.
5. Resolve any reported problems, then rerun the checks until they exit successfully.
6. Render the MP4 and rebuild the self-contained HTML player.
7. Open the player in a browser and review the final vertical film.

Advanced tips

Use the reference film as a production target

Study examples/butterfly-life when learning the expected project layout and output quality. Its planning documents, source, tools, rendered player, and exported phone video show what the skill is designed to produce.

Read the supporting references before changing the style

The reference/ directory includes a shot-type index, scene guidance, music guidance, and visual reference frames. These materials provide context for the decisions made by the agent pipeline.

Validate before every final render

Run check.cjs before render.cjs. Treat the successful exit code from the six-check gate as a prerequisite for producing the final MP4.

Budget time and agent usage

The pipeline favors detailed scene generation and repeated criticism over fast output. Since individual shot files can contain more than 1,000 lines, avoid assuming that the workflow will complete like a short one-prompt generation task.

Keep the skill linked rather than copied

A symbolic link keeps the skill connected to the cloned repository and preserves convenient access to the butterfly example. This also avoids creating a separate copied installation that is detached from the repository layout.

Conclusion

procedural-film provides an agent-driven way to produce vertical films entirely from JavaScript drawing and synthesized audio. After linking the skill and installing the required tools, you can request a film by topic, validate its generated scenes, export an MP4, and build a standalone HTML player without bundling conventional media assets.

The project is available under the MIT License. Its visual and editorial approach is modeled on Kevin Ngo's The life of a fruit fly, with details recorded in examples/butterfly-life/docs/reference-analysis.md.