English | 한국어
Claude Opus 5.5 and Claude Sonnet 5.5 filled my feed with videos drawn in code, so I forged a skill for both. This intro was made with that skill: every frame is drawn in code. Watch the 45-second MP4.
code-video turns a topic, a design, and a format into an MP4 drawn entirely in code. It is designed to work with both Claude Opus 5.5 and Claude Sonnet 5.5.
An agent skill that researches a topic and turns it into a short video drawn entirely in code. Give it a topic and a style (one of the presets below, any site's DESIGN.md, or a look described in your own words) and get an MP4. No video-generation model and no stock footage: the agent writes the scenes, renders them frame by frame, and hands you the file.
- Everything is code. Each frame is a function of time drawn on an HTML canvas, captured by headless Chrome, and encoded by ffmpeg. Music and sound effects are synthesized in code too, so the same input always renders the same video.
- Research first. The agent collects about ten facts with sources and takes the palette and fonts from the brand. Every number on screen has a source.
- Design, research, format. You give the look (a style, a brand preset, any site's DESIGN.md, or any look in your own words), the topic, and the length, frame, and language. The agent writes the story that fits and shows you a short plan before it builds.
- Few rules, on purpose. The skill hands the agent the look and one hard rule (sourced numbers) and leaves the story to it. In our A/B test, cutting the process rules made a video 23–51% cheaper with no visible drop in quality.
- Fast enough to iterate. Frames render in parallel headless Chrome pages and are captured as JPEG: a 45-second 1080p video renders in about a minute on a 10-core laptop, and a whole run from research to MP4 took 4–13 minutes in our tests.
A few seconds from an example in each style. Every example is a video about this skill, made by a fresh agent with only this skill; the full MP4s are in the latest release. New styles are added over time, and pull requests for new ones are welcome (see Contributing).
The brand-style presets borrow only the public design language of each site; this project is not affiliated with those companies.
Hand-drawn · @nahiddotai |
Brand motion graphics · @digitalstrategyai |
Sand art · @Michaelzsguo |
Lyric music video · @goodside |
Beat-synced footage · @twoclipping |
UI morph · @twoclipping |
Hero comic |
Scrapbook |
Torn-paper collage |
Particles |
Split-flap board |
Neon sign |
16-bit arcade |
CRT terminal |
Thermal receipt |
Transit map |
Blueprint |
Apple-style showroom |
Samsung-style tech launch |
Ferrari-style racing luxury |
Nike-style athletic |
Spotify-style dark media |
From a DESIGN.md (Stripe) |
Comic book issue |
Documentary |
Museum exhibit |
Breaking news |
Detective board |
Picture storybook |
RPG quest |
Weather forecast |
Home-shopping infomercial |
Sports broadcast |
Assembly manual |
Whiteboard lecture |
Movie trailer |
Math proof lecture |
Free style (left to the agent) |
Pick one.
skills CLI (Claude Code, Codex and other agents):
npx skills add Changroro/code-video -gClaude Code plugin from the changroro marketplace:
/plugin marketplace add Changroro/plugins
/plugin install code-video@changroro
Manual: clone into your agent's skills directory.
git clone https://github.com/Changroro/code-video ~/.claude/skills/code-video # Claude Code
git clone https://github.com/Changroro/code-video ~/.codex/skills/code-video # CodexRequirements: Node.js 18+ with npm, ffmpeg built with libx264, Google Chrome, and uv for the helper scripts (numpy and scipy for sound, librosa for beat detection, installed on the fly).
Ask your agent for a video. Name a style if you already know it, or let it suggest one from the topic.
- "Make a 30-second promo video for https://example.com"
- "Make a sand-art video of our company's history"
- "Compare our two plans in the arcade style"
- "Make a comic-style launch video for our app"
A higher reasoning effort for the agent tends to give more detailed motion.
| Path | Purpose |
|---|---|
SKILL.md |
Workflow: design, research, and format → a short plan → build → render |
.claude-plugin/plugin.json |
Claude Code plugin manifest (the skill stays at the repo root) |
template/kit.js |
Render contract: canvas setup, scene timing, frame rendering, font loading, motion blur |
template/render.mjs |
Deterministic frame capture with parallel pages, piped to ffmpeg, with the audio track muxed in |
references/ |
Kit API |
references/styles/ |
One guide per style, each with a Signature table |
scripts/ |
Font download, logo background cleanup, contact sheets, reference sheets against the original, music and sound synthesis, beat detection |
Fonts are downloaded at build time from Google Fonts and jsDelivr (SIL Open Font License and Apache 2.0) and are not bundled.
Pull requests are welcome, especially new styles.
- A new style: add a guide in
references/styles/that starts with# Style: <name>and a short description, with a Signature table of what makes the look, and add its GIF to the gallery in both READMEs. Keep only what defines the look (palette, fonts, defining traits) and rules that must never be broken; leave the story, sound, and how to draw it to the agent, and add no helper code. - Adapting someone's public work: credit the creator with a link, write the guide in your own words (do not paste their prompt), and add four frames from the original to
docs/styles/so everyone can compare. - Check it: render stills with
node render.mjs stills ...and, for a credited style, buildscripts/reference_sheet.py <key> <video> <out.jpg>to put your frames under the original's. - Bug reports and fixes to the engine, fonts, or guides are just as welcome. Open an issue first for large changes.