# Sn Code Video

Create and revise code-driven videos with Canvas, SVG, HTML/CSS, Three.js, Remotion...

- Repository: https://github.com/OpenSenseNova/SenseNova-Skills (6002 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-29
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add OpenSenseNova/SenseNova-Skills --skill sn-code-video -g -a claude-code -y`
Codex: `npx skills add OpenSenseNova/SenseNova-Skills --skill sn-code-video -g -a codex -y`
Cursor: `npx skills add OpenSenseNova/SenseNova-Skills --skill sn-code-video -g -a cursor -y`
Gemini CLI: `npx skills add OpenSenseNova/SenseNova-Skills --skill sn-code-video -g -a gemini-cli -y`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

The rest: https://github.com/OpenSenseNova/SenseNova-Skills/blob/HEAD/skills/sn-code-video/SKILL.md