Bb Video

---
name: bb-video
description: 'Make videos in pure code (mp4, 16:9 and 9:16): narrated explainers with captions and music, and promo / launch videos for websites, apps and software with beat-synced music and sound effects. The user picks only the style: whiteboard, risograph, ink-wash (水墨), launch motion, origami, pop art, op art, Matisse cut-outs, ASCII art, shadow puppets (皮影戏), Bauhaus, pixel art, chat log, toy 3D, old newsreel, film-room breakdown, suspense mystery, isometric miniature world, movie trailer, news clippings, manga (日漫). Use for science and concept explainers, problem walkthroughs, vocabulary, history stories, how-tos, news / data, and product promos from a URL. Use when the user asks for an "explainer video", "whiteboard animation", "a video explaining …", "a promo / launch video for this website / app", or in Chinese "做个科普视频" "把这道题做成讲解视频" "白板动画" "讲个历史故事的视频" "给这个网站 / App 做个宣传片" "产品发布视频", or names one of the styles (孔版印刷, 水墨, 折纸, 波普, 欧普, 剪纸, 字符画, 皮影戏, 包豪斯, 像素, 聊天记录, 玩具三维, 老新闻片, 录像分析, 悬疑探秘, 等距微缩世界, 电影预告片, 剪报解说, 日漫).'
---

# BB Video

Videos drawn in code: HTML + CSS / SVG / canvas frames, rendered frame by frame in Chrome, sound synthesized in code, assembled with ffmpeg. Every frame is the pure function `renderFrame(t)`, so any frame can be rendered on its own and every render is identical.

Relative paths in this file are relative to this skill's folder.

## One choice: the style

The style is the **only** thing the user picks. It decides how the video looks, moves and sounds — never what it says. If the user names a style, use it; otherwise recommend one from the topic or product and say why in the storyboard. When the user says "try another style", redo the same content in the new style.

| Style | Look | Best for | Explainer | Promo |
|---|---|---|---|---|
| `whiteboard` hand-drawn whiteboard | Drawing on an infinite whiteboard while explaining, camera moves, cartoon characters | Problem walkthroughs, derivations, phenomena, stories that need characters | ✓ | ✓ |
| `riso` risograph | Magazine pages with spot-color overprint, halftone, misregistration; page turns by drum roll | Everyday trivia, psychology, news, finance, data, food, vocabulary | ✓ | ✓ |
| `ink` ink-wash 水墨 | One long handscroll on rice paper: calligraphy stroke by stroke, landscapes, figures, seals | Chinese history and allusions, classical poetry, idioms, culture, nature | ✓ | ✓ |
| `launch` launch-event motion | Stage colour picked from the product (light / dark / brand), words slammed on the beat, real UI in browser windows, camera push-ins, whips, flashes | Most software, SaaS, AI tools, launches; when there are good real screenshots | ✓ | ✓ |
| `origami` paper craft | Paper with light and creases: unfolding reveals, cards dropping on a desk, pop-up books, page turns, paper cranes | Warm consumer products, creation, education, documents and content | ✓ | ✓ |
| `pop` pop art | 1960s comic: thick outlines, Ben-Day dots, panels, speech bubbles, burst sound words, Warhol repeats | Young, playful, social, AI assistants and chat (dialogue becomes comic speech) | ✓ | ✓ |
| `op` op art | Black-and-white stripes, rings, checkerboards and spirals bulging around "lenses"; blinds reveals | Tech, AI, developer tools, music; "precise", "parallel", hypnotic | ✓ | ✓ |
| `cutout` Matisse cut-outs | Gouache paper shapes cut with scissors and pasted on cream paper; whole sheets cover and tear | Creation, learning, community, education, lifestyle | ✓ | ✓ |
| `ascii` ASCII character art | Everything drawn in monospace characters: product images decode out of glyph noise, sharpen as the camera pushes in, then scan into the real photo; typed lines, box-drawing frames | Developer tools, hardware and product lineups, anything "precise"; tech launches with good product images | ✓ | ✓ |
| `shadow` shadow puppets 皮影戏 | A lamp-lit cloth screen in a wooden stage frame; carved, translucent leather puppets in profile with jointed limbs and control rods walk on, talk, bow, ride horses, fall; red paper placards hang down with names and dates; scene changes are the lamp dipping | Chinese history and stories with characters and conflict (who did what to whom), folk culture, a founder's story | ✓ | ✓ |
| `bauhaus` constructivism / Bauhaus | Red and black on printed cream paper with Bauhaus yellow and blue; big circles, thick bars and wedges on diagonals; heavy slogans set at an angle and stamped in letter by letter; things assembled from circles, squares and triangles; a red wedge sweeps across between scenes | Manifestos and launches, how something is built from parts, processes and comparisons, design / architecture / industrial history, tools and productivity | ✓ | ✓ |
| `pixel` pixel art (8-bit game) | A low-resolution game screen blown up to full size: dithered sky bands, parallax hills and cities stepping back one pixel at a time; outlined sprite characters walk, jump, talk and fight; information told through game UI — dialogue boxes typed letter by letter, menus with a ▶ cursor, HP bars filling cell by cell, score counters, a level map; block-dissolve and iris transitions; chiptune music | Games, developer and productivity tools, AI products, step-by-step flows and choices, small stories with characters, tech and gaming history, explainers for kids | ✓ | ✓ |
| `chat` chat log | The story or the information happens in a messaging app: someone is typing, messages pop up and push the thread up, quote cards with their sources, a poem lighting up line by line, a relay checklist, a poll, a route on a map, "X joined the group", a recalled message; the camera pushes into one message while the rest dims. Landscape: a large chat window with a side column; portrait: the app fills the width | Allusions and small history stories told as dialogue, "who said what" explainers with many quoted sources, AI assistants, support and collaboration products | ✓ | ✓ |
| `toy3d` toy 3D | A dark warm desk with the product's real screens as physical slabs (screenshots printed on them) and a matte vinyl toy — the brand mark extruded from its SVG, a mascot, or the characters of a problem — that operates the UI with its body: landing is a click, hopping along a row types, carrying is a drag; keys rise out of the slab and sink under it; keycaps spell numbers and equations. Separate low, long-lens shots with very shallow focus, hard-cut on the beat with the toy mid-air across each cut; glow only on what is being shown. Toys are built in Blender when the machine has it (seamless vinyl), otherwise in three.js from the same part list | Software with a real UI and a step-by-step flow (editors, boards, IDEs, apps), brands with a mark or mascot; explainers where the things themselves act (counting, grouping, swapping) | ✓ | ✓ (hand-written only) |
| `newsreel` old newsreel 老新闻片 | A 1930s cinema newsreel in a 1.37:1 gate on black: licence-clean archive photos pushed slowly with dated source tags, supers printed on the film, rubber stamps, intertitles between double rules, a tear-off calendar, a stopwatch, a printed price list, a seen / not-seen verdict, and a drafting-grid "animated diagram" (tagged as a reconstruction) for what no footage shows; grain, scratches, gate weave, flicker; a brisk announcer through an optical sound track over a brass march. A fictional newsreel brand opens and closes it | News and events retold (launches, records, claims checked), history with archive photos, retro product launches when real photos exist | ✓ | ✓ (hand-written only) |
| `filmroom` film room 录像分析 | Real footage (licence-clean, credited) on a dark broadcast set: the analyst stops the tape and draws on the frozen frame — a ring under a player's feet, the run she is about to make, the passing lane, the gap, a spotlight — then rewinds, replays it in blended slow motion with a ring tracking her, and pushes in on the detail; a top-down tactics board calibrated from the footage; shot charts from game data | Sports breakdowns (one possession, one lesson: off-ball movement, spacing, footwork), any footage where position matters, product walkthroughs on a screen recording | ✓ | ✓ (hand-written only) |
| `mystery` suspense mystery 悬疑探秘 | A deadpan mock-science programme on an old 4:3 TV in saturated blue (tube vignette, scratches, a station mark, a crawling "fiction, for fun" line): an outlined white title with its key words in red, numbered "symptoms" in brush script, each acted out by rubber-hose cartoon stickers (a brain, a light-bulb person in white gloves, a phone, an alarm clock, a battery at 19 %), a full-screen chat with green bubbles, a storm of big pale words — and the signal cut to a test card. A second look (`look: 'case'`) plays a case file instead: fog, struck-out guesses, teal reconstructions, an evidence board with red string, surveillance, then a sourced answer in daylight | "How to tell if your friend is …" checklists of everyday habits, relatable mock-science, myth-busting and "why does …" mysteries, playful promos | ✓ | ✓ (hand-written only) |
| `isometric` isometric miniature world 等距微缩世界 | A whole little world from a fixed 45° isometric view: tiles on thick plinths with gaps between them, low-poly rounded buildings, belts, shelves, vans and little people that move on their own; one thing is followed through the system (handed from person to belt to truck), its route painted on the ground leg by leg, a clock card planted on each stage, streams of parcels for volume; the stage being talked about lifts while the rest fades; one continuous camera pans, pushes in and pulls back; night falls on the long haul | Processes and systems (logistics, supply chains, how a city / a grid / a payment / the internet works), "follow one thing through the system", products whose value is a system | ✓ | ✓ (hand-written only) |
| `trailer` movie trailer 电影预告片 | A Hollywood trailer in a 2.39:1 letterbox: code-painted cinematic shots in depth layers (space, planets, ridges, corridors, screens, people as rim-lit silhouettes) under a teal-orange grade, grain and a vignette, with slow pushes, parallax and rack focus; black cards with one phrase in wide metallic type; a lone piano ping, a ticking clock, then BRAAMs and taiko while the cuts speed up, flash frames, a smash cut, a beat of total silence, the title slam, the release date, the condensed billing block and a button. Cards only, sparse dialogue (a line can have its own voice colour, e.g. a radio) or the deep trailer voice. An invented studio ident; never a real studio's or film's trade dress | Story trailers (a fictional film, a book, a game, a history episode), launches told as drama (the world before → until… → what changes → the name and the date) | ✓ | ✓ (hand-written only) |
| `dossier` clipping-file commentary 剪报解说 | Modern finance / news commentary made of paper: newspaper clippings on grey newsprint (a heavy headline with a yellow-green highlighter stroke, real short reports written from the facts, halftone photos) and real source documents (press releases, filings, central-bank statements) re-typeset under an invented masthead; the camera pushes from the page into the quoted line, where a red / blue translation bar, a tag or a marker lands on those words; sheets fly in over pictures, an ink-brush smear between shots, thumbnail-style title cards, data callouts; a chapter bar on top, bold outlined captions, grain and a vignette | Earnings, markets, policy and filings explained, news commentary with documents as evidence, "what this announcement really says" | ✓ | ✓ (hand-written only) |
| `manga` manga / motion comic 日漫 · 漫画分镜 | Black-and-white manga pages (white paper, ink line, dot and gradient screentone) cut into panels with gutters, slanted and bleeding panels, figures breaking the frame; speed and focus lines, drawn sound effects (ドン / ゴゴゴ / 轰) as part of the art, round / shout / thought balloons and narration boxes, vertical lettering; the camera reads panel by panel (right to left), punches into the key panel and shakes on impacts, panels ink in, pages turn or are slashed open, a full-page splash for the climax; code-drawn original characters (expressions, eye close-ups, fists, silhouettes, chibi reactions), battle-manga intro boxes, inked charts | Science and concepts told as a fight or a contest (a molecule vs a receptor, a bug vs the fix), stories with a twist, character-driven promos for young audiences | ✓ | ✓ (hand-written only) |

**Stories with named people** follow `styles/CHARACTERS.md` in every style (fixed cast, people told apart at a glance, face-to-face scenes, relays); only whiteboard, ink, shadow, pixel, chat and manga have characters — recommend one of them for character-driven stories.

Each style lives in `styles/<name>/`: its `STYLE.md` (same outline for every style: `styles/TEMPLATE.md`, Chinese `styles/TEMPLATE.zh.md`) and its starter files. **Once a style is chosen, read its STYLE.md before writing any drawing code.**

Every style makes both kinds of video. Each style was born in one workflow and reaches the other through the common interface (`promo/runtime/kit.js`: the same verbs — big word, sentence, card, real screenshot, signature move, transition, end card — drawn in every style's own material):

| | Explainer (with a voiceover) | Promo (on the beat, no voiceover) |
|---|---|---|
| `whiteboard` `riso` `ink` | native: `node explainer/scripts/new.mjs <dir> --style …` — full board API, characters, formulas | `node promo/scripts/new.mjs <dir> --style … [--quick]` — the board runs inside a promo film: scenes are board regions / pages / scroll sections, transitions are pans / page changes / scroll moves |
| `launch` `origami` `pop` `op` `cutout` `ascii` `shadow` `bauhaus` `pixel` `chat` `toy3d` `newsreel` `filmroom` `mystery` `isometric` `trailer` `dossier` `manga` | `node explainer/scripts/new.mjs <dir> --style …` — creates a narration-paced project (voiceover + captions; cues timed to the narration, `promo/references/kit.md`, "Following the voiceover" | native: `node promo/scripts/new.mjs <dir> --style …` — the style's full component set |

The native side has the richest tools (whiteboard formulas and characters; origami folds; op lenses…); the other side covers what most videos need. When a video needs something only the native side has (a formula in a cut-out explainer, a folding animation in a riso promo), say so and offer the native style for that part.

## What kind of video: read it from the request

The user does not pick this; it follows from what they ask for.

| The user wants… | Workflow | Guide |
|---|---|---|
| To explain something: a phenomenon, a problem, a word, a concept, a story, a tutorial, the news — with a voiceover | **Explainer** (narration-driven: voiceover → timeline → visuals timed to each line; captions; background music) | `explainer/GUIDE.md` |
| To promote a product: a website, an app, software, a launch — no voiceover | **Promo** (beat-driven: research and fact sheet → visuals on the beat; synthesized score and sound effects; 16:9 + 9:16) | `promo/GUIDE.md` |

Both workflows run on one engine (`core/`): the same clock and runtime core, one renderer and one sound pipeline — voiceover, music and sound effects mixed together, music ducking under the voice, loudness normalized. So a promo can have a voiceover with captions (`promo/GUIDE.md`, step 5) and an explainer can cut on the beat (`EV.beats`). A project made with a style from the other side follows the workflow of the kind of video (explainer steps for an explainer), using the renderer of the engine that draws it (`promo/scripts/render.mjs` for the promo-born styles).

Read the matching guide and follow it from step 1. Inside each guide, how the story is told is also chosen for the user, not by them: explainer content modes in `explainer/references/modes.md`, promo tellings in `promo/references/structure.md`.

Paths inside a guide are relative to that guide's folder: run `node explainer/scripts/…` / `python3 explainer/scripts/tts.py …` for explainers and `node promo/scripts/…` for promos (from this skill's folder, or with the full path).

## Rules for every video

- **Facts first.** Verify facts, numbers and quotes before drawing; write them into the project's `brief.md`. Every piece of on-screen text must be traceable there.
- **Animation libraries are allowed** (GSAP, Three.js, Matter.js, opentype.js…), but time always comes from our clock: libraries are seeked to `t`, never run on their own clock or callbacks (`promo/references/motion.md`, "Animation libraries").
- **Self-review before delivering**: the automatic checks, the contact sheet / stills, and the frame check of the rendered video, as each guide describes.
- **Language**: unless told otherwise, the video is in the language the user writes in.
- **Never log in, never enter passwords** on sites you research; research is read-only.

## Adding a style

Write `styles/<name>/STYLE.md` from the template, its runtime, starter files and sound, in the workflow it runs on. For promo styles, also register the style's common interface in `promo/runtime/kit.js` (`promo/references/kit.md`). Add the style to the table above.