bb-video

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)

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 map	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.