BB Video

An agent skill for making videos in pure code — no editing app, no stock footage.
Every frame is drawn with HTML / SVG / canvas as a pure function of time, rendered frame by frame in headless Chrome, with music and sound effects synthesized in code, and encoded with ffmpeg.

中文说明

The skill

Skill	What it makes
`bb⁠-⁠video`	Explainer videos with voiceover, captions and background music, and promo / launch videos for websites, apps and software with beat-synced music and sound effects — 16:9 and 9:16, in 23 visual styles

You make one choice: the style. Everything else (narration, storyboard, voice, music, sound, layout, checks) is the agent's job.

Style	Looks like
`whiteboard`	an infinite hand-drawn board: handwriting, arrows, KaTeX formulas, cartoon characters that talk and point; ends on a numbered "knowledge map"
`riso`	risograph print: spot-colour overprint, halftone, slight misregistration, one magazine page per chapter
`ink`	ink-wash handscroll (水墨): brush strokes, seals, figures in Chinese painting style
`launch`	launch-event motion design: big type, product screens, light / dark / brand-colour stages
`origami`	folded paper: creases, shading, paper unfolding into the next scene
`pop`	pop art: Ben-Day dots, bold outlines, comic panels
`op`	op art: moving black-and-white fields (WebGL)
`cutout`	Matisse paper cut-outs
`ascii`	ASCII character art
`shadow`	shadow puppetry (皮影戏): carved, translucent leather puppets on a lamp-lit screen
`bauhaus`	constructivism / Bauhaus: geometry, primary colours, diagonal type
`pixel`	8-bit game: sprites, game UI, chiptune
`chat`	the story told in a messaging app: bubbles, typing, voice notes, cards
`toy3d`	toy 3D: the product's real UI as physical slabs on a desk, a matte vinyl toy hopping across it (three.js)
`newsreel`	a 1930s cinema newsreel: archive photos with source tags, supers and rubber stamps on scratchy black-and-white film, intertitles, a brass march
`filmroom`	a coach's film session: real footage stops, a pen rings the player and draws her path, rewind and slow-motion replay with a tracked ring; a top-down tactics board and shot charts from game data
`mystery`	a deadpan mock-science TV show: a blue 4:3 old-TV picture, an outlined title with red key words, numbered "symptoms" in brush script acted out by rubber-hose cartoon stickers, a chat screen, a storm of words, then a test card; or a case-file look (fog, struck-out guesses, an evidence board, a sourced answer)
`isometric`	an isometric miniature world: tiles on plinths, low-poly buildings, belts, vans and little people that move on their own; one thing followed through a whole system, its route painted on the ground, a clock on each stage, the part being talked about lifts while the rest fades (three.js)
`trailer`	a Hollywood movie trailer in a 2.39:1 letterbox: code-painted cinematic shots (space, planets, corridors, rim-lit silhouettes) under a teal-orange grade and grain, black one-phrase cards in metallic type, a lone piano ping and a ticking clock, then BRAAMs and taiko as the cuts speed up, a beat of silence, the title slam, the release date and the billing block
`dossier`	finance / news commentary made of paper: newspaper clippings with a highlighted headline and halftone photos, real source documents under an invented masthead with the camera pushing into the quoted line and a translation bar or tag landing on it, sheets flying in, ink-brush wipes, thumbnail title cards, data callouts, a chapter bar and outlined captions
`manga`	a black-and-white manga page that moves (日漫): screentone, panels with gutters, slanted and bleeding frames, speed and focus lines, drawn sound effects (ドン / ゴゴゴ) and balloons; the camera reads panel by panel, punches in and shakes on the hits, pages turn or get slashed open, a full-page splash for the climax; original code-drawn characters
`map`	an animated map from real geodata (地图动画): paper land, engraved water lines along the coast, parks, street texture, cartographic labels; routes draw on stroke by stroke, a tram or train travels a line and stops on the word, stations pop in, areas spread like ink, callout cards pinned to places, a year counter and a locator globe; the camera turns the globe, dives to the street, flies between places and tilts to follow a train
`swiss`	Swiss poster kinetic typography (瑞士风动态排版): giant grotesk type cropped by the frame edge on a grid, black plus one accent taken from the brand; letters rise one by one, digits roll into place, the poster pulls out into a wall of its colour variants, a word repeats into a full-screen pattern; the information is typography too: numbered lists, check-chip grids, giant numerals, bar charts, old / new comparisons, real screenshots annotated like poster elements

What it covers:

Explainers: phenomena ("why is the sky blue"), problem walkthroughs (including screenshots of problems), vocabulary, concepts, historical stories, how-tos, trivia, news and data.
Promos: give it a URL; it researches the site (text, numbers, colours), captures screenshots, and builds a beat-driven promo with the product's real UI and brand colours.
Everything built in: edge-tts voiceover with word-level timing, captions, music and sound effects synthesized in code, a cover frame, portrait (9:16) versions.
Self-checking: before rendering, a lint check reports overlaps, text that leaves before it can be read, things off-frame, facts on screen that aren't in the brief, thin information, motion problems; after rendering, a frame check reports jumps, one-frame flashes and dead air (seconds of music with nothing new on screen).
Speaks your language: the video follows the language of your request. Chinese and English are fully tuned; other languages work with any edge-tts voice.

Examples

One sample per style, all made with this skill (GIFs are 7 s cuts; the full mp4s with sound are on the samples release). Narration is in Chinese; the four website promos and the swiss sample are music-only.

`whiteboard` · Liu Bang slays the white snake (a Han-dynasty legend) Full video	`riso` · Grok Bot, a kinetic promo _{Footage from its public website} Full video	`ink` · The Tang poem "On Stork Tower" Full video
`launch` · Grok Bot, a launch film _{Footage from its public website and app} Full video	`origami` · Why is the sky blue? Full video	`pop` · Why is the sky blue? Full video
`op` · Stripe, from its homepage _{Footage from its public website} Full video	`cutout` · Why is the sky blue? Full video	`ascii` · What is ASCII? Full video
`shadow` · Liu Bang slays the white snake, with character voices Full video	`bauhaus` · The Bauhaus: a school that lasted fourteen years Full video	`pixel` · Why old Famicom games had so few colours Full video
`chat` · Lychees for Lady Yang, told as a group chat Full video	`toy3d` · Linear website promo _{Footage from its public website} Full video	`newsreel` · The 2026 Tesla Roadster reveal, as a 1930s newsreel _{Photos from Wikimedia Commons (CC0 / public domain / CC BY 2.0 Steve Jurvetson)} Full video
`filmroom` · How one basket happened: Fenerbahçe vs Samsun Canik, 2018 _{Game footage: TBF, CC BY 3.0, via Wikimedia Commons} Full video	`mystery` · Why your friend should call you dad (a deadpan mock-science proof) _{Fiction, for fun · cartoons drawn in code} Full video	`isometric` · How a parcel gets to you (一个快递是怎么到你手里的): one parcel followed from the warehouse to your door _{Figures: China's State Post Bureau, 2025 · the little world and its courier brand are drawn in code} Full video
`trailer` · Deep Space Echo (深空回声), the trailer for an original, fictional sci-fi film _{A fictional film · every shot, sound and name made in code} Full video	`dossier` · AI's bill (AI 的账单): US tech stocks in October 2026, from a record high to the week of the Fed _{News commentary, not investment advice · documents quoted from SEC, TSMC, Federal Reserve and company releases · pictures drawn in code} Full video	`manga` · Caffeine's 45 minutes (咖啡因的45分钟): how a cup of coffee keeps you awake, told as a shōnen battle _{General health information, not medical advice · original characters drawn in code · sources: IOM, EFSA, FDA, Reichert et al. 2022} Full video
`map` · The Boston subway (波士顿地铁): from the 1897 tunnel under Boston Common to today's four-colour network _{Map drawn from MassDOT / MBTA data, U.S. Census TIGER/Line and Natural Earth} Full video	`swiss` · Artificial Analysis Intelligence Index v5 (智能指数 v5): the AI benchmark launched on October 27, 2026 — nine evaluations, the leaderboard, the open-weights gap, cost per task _{Figures and charts from artificialanalysis.ai} Full video

Install

With the skills CLI (Claude Code, Codex, Cursor, OpenCode and other agents):

npx skills add BubbleBrainBB/BB-Video                                          # pick interactively
npx skills add BubbleBrainBB/BB-Video --skill bb-video -a claude-code -g   # globally for Claude Code

Or copy the folder yourself:

git clone https://github.com/BubbleBrainBB/BB-Video.git
cp -r BB-Video/skills/bb-video ~/.claude/skills/

Requirements

No npm dependencies. It needs:

Node.js 18+
Google Chrome or Chromium (set CHROME_PATH if it is not in the default location)
ffmpeg on your PATH
Python 3 and edge-tts for the voiceover (pip install edge-tts)
An internet connection for the voiceover, web fonts and the few libraries some styles load from jsDelivr (three.js for toy3d; GSAP / Matter.js only if a page asks for them)
Optional: Blender 3.6+ for toy3d mascots (otherwise three.js builds them)

Usage

Just ask your agent, for example:

"Make a whiteboard explainer: why is the sky blue?"
"Turn this geometry problem into a walkthrough video" (attach a screenshot)
"Make a launch video for https://example.com, 16:9 and 9:16"
"Tell the story of 刘邦斩白蛇 as a shadow-puppet video"
"用聊天记录风格讲一个历史典故"

The agent shows you the facts, narration and storyboard first, then voices, draws and renders. Output goes to videos/<name>/out/ (mp4, cover, and for whiteboard / riso a board overview image). Open videos/<name>/index.html in a browser to preview and scrub.

How it works

script.json (narration) ──► tts.py ──► audio + word-level timeline
index.html  (drawing code, renderFrame(t)) ──► render.mjs ──► Chrome, frame by frame ──► ffmpeg ──► mp4
                                                     ├─► lint check, captions, music + sound effects
                                                     └─► frame check (jumps, flashes, dead air)

Each frame is a pure function of time, so renders are deterministic and parallel, and the agent can look at any moment as a still before rendering the whole video.

Privacy & security

Narration text is sent to Microsoft's online speech service (that is how edge-tts works). Don't put confidential material in the narration.
Promo research opens the website you give it in headless Chrome and takes screenshots (no logins, no downloads of site files).
Archive photo search (footage.mjs, used when a film needs real photos you didn't supply) sends the search words to the Wikimedia Commons API, and downloads only the files you approve, with their licence and credit.
Web fonts and libraries come from jsDelivr / unpkg at pinned versions. Nothing else goes over the network: no telemetry, no API keys, no accounts.
render.mjs opens a project's index.html in headless Chrome with local file access, which means running that project's code. Render only projects you or your agent made.

License

MIT. Bundled third-party code: KaTeX (MIT, see skills/bb-video/explainer/runtime/katex/LICENSE). Loaded from CDNs under their own licenses: three.js (MIT), GSAP (Standard "no charge" license), Matter.js (MIT); fonts LXGW WenKai, Excalifont, Noto Sans / Serif SC, Inter, Oswald and others (SIL OFL 1.1).