/sn-code-video

name: sn-code-video
description: Create and revise code-driven videos with Canvas, SVG, HTML/CSS, Three.js, Remotion, Manim, or p5.js, including sound, deterministic frame capture, visual review, and MP4 verification. Use for rendered explainers, procedural animations, motion graphics, promos, and music-synchronized films; not for general web apps, scroll-driven HTML stories, or footage generation with video models.

SN Code Video

A code video is a program `frame(t) → image`, sampled at `t = i / fps` and encoded. Almost every failure in this kind of work is one of four things: the film is never finished, the picture depends on wall-clock time, nobody looked at the frames, or the file does not match the brief. This skill prevents those four.

Setup and paths

Use a separate project folder for the video source, `SPEC.md`, build files, and outputs. Resolve `SKILL_DIR` to the absolute directory containing this `SKILL.md`, whether installed in the agent's skills directory or used from this repository. Run project commands from the video project folder; invoke bundled scripts through `"$SKILL_DIR/scripts/..."` so they do not depend on the current working directory. Set `SKILL_DIR` again in each shell session if needed.

Requirements: Node.js 18+ for browser capture, Python 3, FFmpeg/ffprobe with libx264 and AAC, and fonts covering the requested language. Install Playwright (with Chromium) or Puppeteer in the **video project**; the capture helper resolves its packages there first. Python audio dependencies are listed in `requirements.txt`; edge-tts needs network access, and faster-whisper needs downloaded model weights for transcription checks. Install only the tools required by the chosen renderer and audio workflow. Setup and invocation examples: [English guide](../../docs/sn-code-video.md) / [中文指南](../../docs/sn-code-video_cn.md) in the source repository; these repository guides are not required when the skill folder is installed on its own.

Deliver the playable MP4, source code and reproduction commands, `SPEC.md`, `VERIFY.md`, and a contact sheet. Audio stems and timing data belong in the project when sound is used.

0. Read the craft guides you need

Reference paths are relative to this skill folder; output and input paths in commands are relative to the video project. Besides this file it holds craft guides in `references/` and helper scripts in `scripts/` (audio packages in `requirements.txt`). Read every guide that matches the request before writing `SPEC.md`; most videos need two or three.

| Guide | Read when the request has… | |---|---| | [`references/explainer-diagrams.md`](references/explainer-diagrams.md) | anything to teach or explain: math, science, history, processes, data | | [`references/stylized-looks.md`](references/stylized-looks.md) | a named style, medium or artist (ink wash, pixel art, cut paper, vaporwave, watercolour, …) | | [`references/simulations-and-generative.md`](references/simulations-and-generative.md) | particles, flocks, cellular automata, physics, fields, shaders, generative patterns | | [`references/character-and-creature-motion.md`](references/character-and-creature-motion.md) | people, animals or creatures that move or act | | [`references/threejs-scenes-and-cameras.md`](references/threejs-scenes-and-cameras.md) | a 3D scene, product or camera move | | [`references/motion-graphics-and-promos.md`](references/motion-graphics-and-promos.md) | kinetic type, UI, logos, product or brand promos | | [`references/sound-design-and-narration.md`](references/sound-design-and-narration.md) | any audio: narration, music, effects, ambience | | [`references/music-and-beat-sync.md`](references/music-and-beat-sync.md) | music-led films, beat-cut picture, supplied tracks or lyrics |

A request that names a style always needs [`references/stylized-looks.md`](references/stylized-looks.md), and a film with any audio always needs [`references/sound-design-and-narration.md`](references/sound-design-and-narration.md).

1. Finish the film

• The deliverable is a playable video that meets the brief. Code, stills, a plan or a preview are intermediate results. Keep working until the final file exists and has passed section 6.
• Decide composition, palette, easing and implementation details yourself and note the choices in `SPEC.md`. Ask the user only about the few open choices that would change the whole film (for example language, aspect ratio, length, or whether there is a voice), and only when you can ask; otherwise choose a sensible default and say which.
• Budget the time. Get a rough full-length render early (even ugly), then improve it. A finished, slightly plain film beats an unfinished ambitious one.
• Timebox sub-problems. If one problem (recalling an exact pattern or constant, tuning one effect, chasing one bug) has taken about 30 minutes without visible progress, change approach: simplify the effect, derive the value from its definition, use the reference data in the craft guides, or fall back to a design that does not need it. Do not spend hours reconstructing data from memory.

2. Turn the brief into a spec

Before writing code, write `SPEC.md` in the project folder:

• **Format:** width × height, fps, duration (target and allowed range), frame count = round(duration × fps), loop or not, and audio: required, forbidden, or left open. When it is open, decide from the brief whether sound would serve the film (section 10). Write the sound requirements (type, voice language, fixed lines, sync points) into the spec too.
• **Exact copy:** every on-screen string the brief fixes, verbatim, in order. Nothing else may claim facts, prices or specifications.
• **Facts and numbers:** every value the picture must show or obey (dates, physical constants, data values, counts). Note the source the brief gives.
• **Assets:** each supplied file and how it must be used (unaltered logo, screenshot fidelity, photo kept photographic).
• **Must-haves:** one line per re