An agent skill that makes videos in pure code — narrated explainers and product promos in 30 visual styles (whiteboard, ink-wash, shadow puppets, pixel art, isometric worlds, movie trailers, manga, an
翻译准备中
技能JavaScript · HTMLGitHub @BubbleBrainBB自行安装运营者未确认
试用过了吗? 点一下就好,无需登录。
个人 GitHub 账号下公开仓库的所有者可以登录并验证所有权,自行管理介绍,无需管理员批准。
登录并生成验证文件,在 30 分钟内将其提交到此仓库的默认分支。其他分支或分叉仓库中的文件无效。然后在下方检查文件,即可无需管理员批准直接管理项目。请保留文件以维持管理权限。
如需登录,将前往登录页面。登录后请回到此处,再次点击所选的验证按钮。
安装型项目无需部署域名也可验证。个人仓库可通过 GitHub 登录验证,组织仓库可使用上方的仓库验证文件。
An agent skill that makes videos in pure code — narrated explainers and product promos in 30 visual styles (whiteboard, ink-wash, shadow puppets, pixel art, isometric worlds, movie trailers, manga, animated maps, Swiss kinetic type, blueprints, paper collage, storybook mascots, Bayeux tapestry, stick-figure parables…), 16:9 and 9:16.
翻译准备中
取自仓库 README
正在加载完整 README。
查看完整 README ↗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 32 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 |
pencil | a hand-drawn pencil test: warm animation paper with peg holes and the drawing number, light blue construction lines under a pressure-weighted graphite line, smudge and hatching, drawings on twos with a gentle line boil; one drawing redraws itself into the next instead of a cut, machines really turn (wheels, cranks, chains geared by their teeth), faceless gesture figures, light pools in a graphite haze, one warm bloom at the peak; steps, numbers and contrast are drawn by hand |
drawnworld | one continuous picture drawn by a pen: a black stylus draws a whole invented world stroke by stroke in clean ink on warm white paper, growing outward from one small thing while the camera follows the pen and eases back; lines behind nearer parts never show through, every sign is lettered by the pen in real stroke order, a tag gets crossed out and rewritten as the story moves on; once the whole mechanism is on the page, a colour wash spreads across it and reveals sky, hills and trees, and the held wide shot comes alive as its machines start one by one |
What it covers:
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.
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/
No npm dependencies. It needs:
CHROME_PATH if it is not in the default location)PATHpip install edge-tts)toy3d; GSAP / Matter.js only if a page asks for them)toy3d mascots (otherwise three.js builds them)Just ask your agent, for example:
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.
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.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.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).