bb-video git:20261029.63f2a9eA

Immutable. This exact content never changes and is served at /api/v1/blob/aa72a7ce5b8585f7.

---
name: bb-video
description: 'Videos made in pure code (mp4, 16:9 / 9:16): narrated explainers with captions and beat-synced promos for sites and apps. 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 miniatures, movie trailer, news clippings, manga (日漫), animated map, Swiss kinetic typography, dark motivational short, blueprint drawing, paper collage, flat grain illustration. Use for science / how-it-works explainers, walkthroughs, history, maps, news / data, and product promos from a URL. Use when asked for an "explainer video", "whiteboard animation", "a promo / launch video for this site / app", or in Chinese "做个科普视频" "白板动画" "讲个历史故事" "给这个网站 / App 做个宣传片" "产品发布视频", or names a style (孔版印刷, 水墨, 折纸, 波普, 欧普, 剪纸, 字符画, 皮影戏, 包豪斯, 像素, 聊天记录, 玩具三维, 老新闻片, 录像分析, 悬疑探秘, 等距微缩世界, 电影预告片, 剪报解说, 日漫, 地图动画, 瑞士风动态排版, 暗调励志动画, 蓝图工程图, 纸艺拼贴, 扁平颗粒插画).'
---

# 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) |
| `map` animated map 地图动画 | A designed, printed map drawn from real geodata (paper land, engraved water lines along the coast, parks, street texture, cartographic labels): routes draw on stroke by stroke, a tram / train / plane travels a line and reaches each stop on the word, stations pop in, areas spread like ink, printed callout cards pinned to places, a year counter, a locator globe; one camera turns the globe, dives to the street, flies between places, tilts and follows a vehicle; the subject stays lit while the rest dims | Places and how they connect: transit and cities, history campaigns and journeys, trade and migration routes, the spread of something, "where is it" openers, before / after with a year | ✓ | ✓ (hand-written only) |
| `swiss` Swiss kinetic typography 瑞士风动态排版 | A Swiss International Typographic Style poster in motion: huge grotesk type is the picture, set tight and cropped by the frame edge, on off-white grid paper with black and one accent from the brand; letters rise one by one out of their line, digits roll; micro meta labels (`.1 .2`, a date), big arrows →, hairline rules; information told typographically — numbered lists, check-chip card grids, giant numerals, flat bar charts, old / new side by side, real screenshots and charts placed as poster elements with accent marks; the poster pulls out into a wall of its colour variants, a text-pattern wall, an extruded glyph turning in orbit rings, nested frames; grounds flip paper / black / accent between scenes | Launches and announcements with strong numbers (benchmarks, reports, versions), feature sets, rankings and prices, before / after, design and developer products, brands with one strong colour | ✓ | ✓ |
| `lumen` dark motivational short 暗调励志动画 | A stylized room drawn in code, 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 cast shadow, haze, bloom and grain; one minimal original protagonist (soft square head, a mood cowlick, an oversized hoodie, no outlines) acts everything with eyes and brows — scrolling in bed from above, dragged up by the alarm, slumped at a desk, putting the phone outside the door, at the window at dawn; slow push-ins that hold on the face; a low second-person voice; facts told in light (a clock racing, gauges, a line of the night, an x-ray of the head); white thumbnail-style title cards with a dark stroke; music that presses down and then releases | Habits and self-improvement told to "you": sleep and late-night scrolling, procrastination, discipline, focus, burnout, starting the gym or studying; promos for wellbeing, focus and sleep apps | ✓ | ✓ (hand-written only) |
| `blueprint` blueprint engineering drawing 蓝图工程图 | One big drawing sheet in cyanotype blue (paper grain, fine grid) with white line work to draughting convention: lines drafted in by a plotter pen (construction lines first), hidden lines dashed, centre lines dash-dot, dimensions with arrowheads, leaders with numbered balloons, a parts list, hatched sections, detail circles, a title block; mechanisms that really work (gear trains with real tooth counts meshing at the right ratios, an escapement locking and releasing, a balance and hairspring, springs, levers, cams, racks) on one mechanism clock shown in slow motion or time-lapse; the camera travels across the sheet into detail views; one red pencil as the accent | How things work: machines and mechanisms (a watch, a lock, a cistern, an elevator, a shutter), systems and specs with numbers and ratios; hardware and engineering promos, an architecture drawn as an assembly | ✓ | ✓ |
| `collage` paper-collage news explainer 纸艺拼贴新闻解说 | One take over a table covered in torn paper, seen in 2.5D with depth of field: halftone black-and-white photos with a white torn fringe (credited on the source line), faded protest-poster layers, red rubber stamps, a typewriter quote typing on under a highlighter, masking tape and push pins; information told with paper props — paper dolls turning red, a red thread pinned through the years with tickets and photos, index cards with redaction bars, cut-paper bars on notebook paper, a ladder and a podium with country cut-outs, a line chart on graph paper with flags riding the lines, a big serif character printed on a certificate; the camera floats, pushes and travels piece to piece (far moves lift and land, never a cut), a red title sheet, a spotlight; fixed chrome: channel / chapter, date and place, source line | News explainers with history behind them (protests, debt, prices, elections, policies), stories told with archive photos, quotes, numbers, a timeline and rankings | ✓ | ✓ |
| `grain` flat grain illustration 扁平颗粒插画 | A flat vector illustration on warm off-white paper in two spot colours and their tints (coral and navy by default): no outlines, volume and light made with seeded stipple grain (a colour breaks into dots as it fades into its tint or the paper); simple figures with round heads and block bodies on a thin ground line; information drawn into the picture — circular inset close-ups, a small diagram card, ticking readouts (a dial, a price sign, a clock wedge), rows of repeated things for quantity, columns rising from the ground line, a timeline ruler with the year ticking over; each chapter is one stage where the scene grows and turns into the next era in place, the camera holds, breathes and pushes in, chapters open through an iris from a detail, one full-colour spotlight beat | History of a technology or habit era by era, how a city or system grows, before / after, explainers where the picture carries the numbers; warm consumer and civic products (mobility, energy, home, travel) | ✓ | ✓ |

**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, manga and lumen 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` `map` `swiss` `lumen` `blueprint` `collage` `grain` | `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.