BB Video skill
A skill that makes video in pure code: narrated explainers and website promos in 35 visual styles, in 16:9 and 9:16.
- 176 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Rendering runs project code in Chrome with local file access and voiceover sends text to a Microsoft online service.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/bb-videoDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Rendering runs project code in Chrome with local file access and voiceover sends text to a Microsoft online service.
This is third-party code. Review the repository files before installing.
What it does
BB Video builds video with no editor or stock footage: every frame is drawn with HTML, SVG and canvas as a function of time, rendered frame by frame in headless Chrome, music and sound are synthesized in code and ffmpeg does the encoding. The skill prepares narrated explainer videos with captions and background music and promo videos for sites and apps with beat-synced music and sound effects in 16:9 and 9:16. The user picks only a style out of 35, such as "whiteboard" with handwriting and formulas, "riso" imitating print, "ink" in Chinese painting style, "launch" for announcements, "pixel" with 8-bit graphics, "chat" with a messenger story or "trailer" with cinematic delivery. The agent does the rest: it first shows facts, narration and storyboard, then voices and draws. The result lands in `videos/<name>/out/`.
Who it is for. Creators of explainer videos and product marketers who need a narrated, styled clip without editing software or stock footage.
Good fit when
- An explainer in whiteboard style is needed: why the sky is blue, with formulas and a host character.
- A site launch needs a promo in 16:9 and 9:16 with music synced to the cuts.
- A story has to be told as a messenger chat video or in shadow puppet style.
- A geometry problem from a screenshot has to become a step-by-step walkthrough video.
Not a fit when
- You need to edit filmed footage: the skill draws clips in code and does not cut shot material.
- The narration is confidential: voiceover goes through Microsoft's online speech service.
- Chrome, ffmpeg and Python are missing and cannot be installed.
Example request
Make a whiteboard-style explainer on why the sky is blue and show the facts, narration and storyboard first.Limitations
You need Node.js 18 or newer, Chrome or Chromium, ffmpeg on PATH, Python 3 and the `edge-tts` package for voiceover. Narration text goes to Microsoft's online speech service, so keep confidential material out of it. For promos the skill opens the given site in headless Chrome and takes screenshots without logging in. Archive photo search sends words to the Wikimedia Commons API and downloads only approved files. Rendering runs project code in Chrome with local file access, so render only your own or agent-made projects. Fonts and libraries load from jsDelivr and unpkg.
How to disable. Delete the `bb-video` folder from the agent skills directory, for example `~/.claude/skills`. Created clips live in your project `videos/` and are untouched.
FAQ
How do I install BB Video?
Run `npx skills add BubbleBrainBB/BB-Video`. For a global Claude Code install: `npx skills add BubbleBrainBB/BB-Video --skill bb-video -a claude-code -g`. Or clone the repository and copy `skills/bb-video` into `~/.claude/skills/`.
What does it need to run?
Node.js 18 or newer, Chrome or Chromium, ffmpeg on PATH, Python 3 and `edge-tts` for voiceover. For the `toy3d` style Blender 3.6 is optional and three.js builds figures otherwise.
Where does the narration text go?
To Microsoft's online speech service, which is how `edge-tts` works. Do not put confidential material in the narration.
Which formats and styles are available?
The formats are 16:9 and 9:16 and there are 35 visual styles: whiteboard, riso, ink, launch, origami, pop, op, cutout, ascii, shadow, bauhaus, pixel, chat, toy3d, newsreel, trailer and others.
Where is the result?
In `videos/<name>/out/`: an mp4, a cover and for whiteboard and riso an overview image. The `videos/<name>/index.html` page can be opened in a browser to preview and scrub.
Discussion
No questions or reviews yet.
Related
SkillsA skill that turns your narration and real assets into a 20–60 second video in the style you pick, rendered locally as MP4.
A skill that makes promo videos from code: direction, in-browser animation with motion blur, its own score and a 60 fps MP4
The Video by Reference skill learns style from a sample clip and builds an animated short from code with an original soundtrack
A skill that turns narration text into a 20-second chunky-pixel explainer at 1920×1080 with voice-over and an editable project.
A skill that turns a topic into a narrated 4K video: research, script, local TTS, Remotion composition and an FFmpeg mix
The video-explainer skill turns a script into a vertical 9:16 explainer: narration, captions, Remotion and a pre-render review
README in short
The skill makes explainers and promos from scratch in code with no editor. Rendering is deterministic because each frame is a function of time and checks catch jumps, flashes and dead air.