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.
| 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 30 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 Japanese 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 |
lumen |
a dark motivational animated short: a code-drawn room nearly all black, lit by one motivated light — a phone screen on a face, a red alarm clock, a desk lamp, moonlight through blinds, dawn at a window — with rim light, a giant shadow on the wall, haze and grain; one original protagonist (a soft square head, a cowlick that shows the mood) acts everything with eyes and brows; slow push-ins that hold on the face, a low second-person voice, white thumbnail-style title cards; facts told in light: a clock racing, gauges, the night as a line, an x-ray of the head |
blueprint |
a blueprint engineering drawing: cyanotype paper with a grid, white line work drafted in construction lines first, dimensions, leaders with numbered balloons, hatched sections, a parts list, a title block and one red pencil; mechanisms really work — gear trains mesh and turn at the right ratios, an escapement locks and releases, springs wind down, cams and levers move — in slow motion or time-lapse shown on the sheet; each subject arrives on a new sheet, and the camera pushes into a detail while the rest of the drawing falls back |
collage |
a paper-collage news explainer: one take across a table covered in torn paper — halftone photos with credits, faded poster layers, red rubber stamps, a typewriter quote with a highlighter sweep, tape and push pins; the camera floats, pushes in and travels with depth of field; numbers and history are told with paper props — a paper-doll grid that turns red, a red thread pinned along a timeline, cut-paper bars on notebook paper, a line chart on graph paper with pins riding the lines, a big character printed on a certificate; a fixed frame with channel, date and a source line |
grain |
a flat vector illustration with grain shading: warm off-white paper, two spot colours (coral and navy by default) and their tints, no outlines; volume and light are stipple grain that never boils; round-head figures on a thin ground line, buildings, streets and rooms that transform from era to era; very little text — a timeline ruler whose year ticks over, signs and readouts; information drawn into the picture: circular close-up insets, a small navy diagram card, dial needles and clock wedges that move, counters that roll, rows of repeated things, columns rising from the ground line, a spotlight that dims the rest; the camera pushes, travels and opens an iris onto the next scene |
storybook |
a hand-drawn storybook with its own mascots: warm grey paper with fibres, ink outlines with a slight hand wobble, coloured-pencil hatching with a soft rim; each project defines its own cast of original cute characters (bean, round, blob, gem, star, capsule or pillar bodies, a sprout or antenna on top) that squash, stretch, blink and hop, acting an invisible process out with tangible props on little stages along one ground line — filing cabinets, an easel sheet, a monitor, a big button, stacking blocks, signposts, paper planes, cards flipping to ✓; small dark monospace tags float above them with a ✓ result line; one character splits into clones that each carry a task card, then they merge back into one; the camera travels from stage to stage |
tapestry |
a Bayeux-Tapestry embroidered scroll: undyed linen with a visible weave, everything stitched in a few wool colours — stem-stitch outlines, laid-and-couched fills, bare linen for faces and hands; upper and lower borders of birds and beasts between diagonal bars; stylised trees divide the scenes; flat side-on figures with big gestures; act titles under a branch arch and running captions stitched in Chinese; figures and objects stitch themselves on thread by thread while one long cloth scrolls past, pushing in until single threads show |
parable |
a wordless 3D stick-figure parable: a black void with a glossy floor that mirrors everything, glowing white stick figures with round heads, one fixed wide camera; two figures do the same thing in opposite ways — bricks laid one by one, piles, steps — and the contrast is the whole story; one red object carries the meaning; small monospace labels and counters, a single title at the end; vertical first, 15–45 s, music only by default |
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.
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 promoFootage from its public website Full video |
 ink · The Tang poem "On Stork Tower"Full video |
 launch · Grok Bot, a launch filmFootage 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 homepageFootage 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 voicesFull video |
 bauhaus · The Bauhaus: a school that lasted fourteen yearsFull video |
 pixel · Why old Famicom games had so few coloursFull video |
 chat · Lychees for Lady Yang, told as a group chatFull video |
 toy3d · Linear website promoFootage from its public website Full video |
 newsreel · The 2026 Tesla Roadster reveal, as a 1930s newsreelPhotos from Wikimedia Commons (CC0 / public domain / CC BY 2.0 Steve Jurvetson) Full video |
 filmroom · How one basket happened: Fenerbahçe vs Samsun Canik, 2018Game 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 doorFigures: 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 filmA fictional film · every shot, sound and name made in code Full video |
 dossier · AI's bill: US tech stocks in October 2026, from a record high to the week of the FedNews 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: how a cup of coffee keeps you awake, told as a shōnen battleGeneral 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 networkMap drawn from MassDOT / MBTA data, U.S. Census TIGER/Line and Natural Earth Full video |
 swiss · Artificial Analysis Intelligence Index v5: the AI benchmark launched on October 27, 2026 — nine evaluations, the leaderboard, the open-weights gap, cost per taskFigures and charts from artificialanalysis.ai Full video |
 lumen · Five more minutes: revenge bedtime procrastination — the night that won't end, what it costs the next day, and one small decisionGeneral health information, not medical advice · original character and sets drawn in code · sources: Kroese et al. 2014, CDC / AASM, Williamson & Feyer 2000, Van Dongen et al. 2003, Chang et al. 2015 Full video |
 blueprint · What happens inside a mechanical watch: mainspring, going train, escapement, balance, motion work — drawn and running at the right ratiosA generic, illustrative movement · facts from Wikipedia Full video |
 collage · Gold, from $35 to $5,318: the 1934 peg, Bretton Woods, Nixon closing the gold window, central banks buying, and 2026's record and sell-offPhotos via Wikimedia Commons: NARA, Oliver F. Atkins (public domain), Stevebidmead (CC0) · prices: COMEX, World Gold Council, Reuters Full video |
 grain · How people lit the night: from stone lamps and tallow candles to gas, the electric bulb, fluorescent tubes and LEDs — light got brighter and far cheaperIllustrative scenes, no real people drawn · sources: Nordhaus 1996, Fouquet & Pearson 2006, Royal Swedish Academy of Sciences 2014, Edison Papers, IEEE Full video |
 storybook · How the body beats a cold: a rhinovirus copies itself in the cells of the nose, the cells raise the alarm, white cells arrive, one T cell becomes thousands, memory cells stay — and why the next cold still comesGeneral health information, not medical advice · original characters drawn in code · sources: CDC, NHS, Jacobs et al. 2013, Foxman et al. 2015, Eccles 2005, Barclay et al. 1989 Full video |
 tapestry · How the book came to be: clay tablets, papyrus scrolls, the parchment codex, Cai Lun's paper, the Diamond Sutra, Bi Sheng's movable type, Gutenberg's Bible, the steam press, the first e-bookGeneric stitched figures · sources: British Museum, The Met, Britannica, Book of the Later Han, Dream Pool Essays, British Library, Library of Congress, Project Gutenberg Full video |
 parable · Compound interest: one figure builds 30 bricks on day one and sleeps for a year; the other adds 1% a day — slow for months, then it passes him (1.01³⁶⁵ ≈ 37.8)Wordless · the numbers are computed, 1% a day is an illustration Full video |
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 CodeOr copy the folder yourself:
git clone https://github.com/BubbleBrainBB/BB-Video.git
cp -r BB-Video/skills/bb-video ~/.claude/skills/No npm dependencies. It needs:
- Node.js 18+
- Google Chrome or Chromium (set
CHROME_PATHif 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
toy3dmascots (otherwise three.js builds them)
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 Liu Bang slaying the white snake as a shadow-puppet video"
- "Tell a historical anecdote as a chat-log 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.
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.
- 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.mjsopens a project'sindex.htmlin headless Chrome with local file access, which means running that project's code. Render only projects you or your agent made.
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).