bama
BAMA: Build Any Mac App. Agent skills to research, clone, design, build, optimize, and test native macOS apps with Swift and SwiftUI.
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
SkillsJavaScript · HTMLGitHub @BubbleBrainBBSelf-installOwner unconfirmed
Paste into Claude or ChatGPT for installation instructions suited to your environment.
Have you tried it? One tap is enough. No sign-in needed.
Owners of public repositories under a personal GitHub account can sign in to verify ownership and manage the introduction themselves. No administrator approval is needed.
Sign in, generate a verification file, and commit it to this repository’s default branch within 30 minutes. Files on other branches or forks do not count. Then check the file below to manage the project without administrator approval. Keep the file to retain your access.
If needed, you will go to sign-in. After signing in, return here and press your chosen verification button again.
Installable projects can be verified without a deployment domain. Use GitHub sign-in for a personal repository, or the repository verification file above for an organization repository.
Ask about other verification options
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.
Taken from the repository README
Loading the full README.
Read the full 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 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 |
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 |
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).