Ask an AI coding agent for a video and you usually get slides: one section per idea, a title, a photo, a fade between them. It reads like a deck because the agent has no opinion about motion. Bang Motion is a skill that gives your agent that opinion. It turns Claude Code (and Codex, Gemini CLI, or Cursor) into a motion designer that builds openers, promos, kinetic typography, and explainers as a single web page that plays like video, not like slides. This guide covers how to make browser motion graphics with Claude Code using the Bang Motion skill.
What Bang Motion is
Bang Motion is an open-source agent skill by Bang Tutorial, published under the MIT license. The repository at github.com/bangtutorial/bang-motion is public. When checked on 2026-11-08 it had 1,594 stars and 197 forks, was created on 2026-09-05, and carried version badge 1.19.0.
The core idea is simple: the deliverable is one index.html. Double-click it and it plays — autoplay, loop, no player chrome — with a ?debug=1 scrub bar for review. It is not a video file; when you need one, scripts/export-frames.mjs renders it frame by frame to MP4. The page uses GSAP and fonts from a CDN, so watching needs a browser and internet, never an npm install.
What makes it different is that the skill encodes a working motion designer's rules as checks the agent can run on its own code: one continuous world instead of fading sections, a moving camera, a persistent subject, text inside the scene, and no more than two text levels. Every project starts from a style brief — three concept candidates, one recommendation, a palette where every color states its source — so the look comes from your brand, not a template.
The menus: 10 style directions, from cinematic dark and poster color-block to paper and print, retro analog, brutalist mono, and grainy gradient; 19 opener concepts, from "one continuous shot" and "problem, gone" to "journey inside the UI" and "logo as stage"; and six explainer styles, each with its own starter: continuous action, cartoon collage, visual journalism, white catalog, vintage sketch, and cartoon stage. (The repository description says five explainer styles; the README body names six, and this guide follows the README.) Typical lengths run 3–10 seconds for bumpers and intros, 10–30 for kinetic typography, 15–40 for openers and promos, 20–60 for product and SaaS demos, and 30–120 for explainers in 16:9 or 9:16.
One honest distinction: this differs from the animated-shorts skill covered earlier on this site, which renders a finished MP4 short with Remotion and three.js. Bang Motion builds a web page that plays in the browser; MP4 is only an optional export. If a video file is your primary output, the other route fits better; if you want something you can open, scrub, tweak, and re-render in the browser, this is the one.
Install and use
The commands below are quoted verbatim from the README. The git clone was verified 2026-11-08 (repository clones; SKILL.md present); plugin-route commands were not run (no Claude Code CLI on the verification machine).
The fastest route is the Claude Code plugin. Add the marketplace, then install the plugin:
/plugin marketplace add bangtutorial/bang-motion/plugin install bang-motion@bang-motionUpdate it later with /plugin marketplace update bang-motion.
The manual route works with any agent. Clone the repository:
git clone https://github.com/bangtutorial/bang-motionThen put the folder where your agent reads skills: ~/.claude/skills/bang-motion for Claude Code (on Windows, C:\Users\<you>\.claude\skills\bang-motion); your Codex skills folder, or one line in AGENTS.md — "For motion graphics / explainers, read and follow bang-motion/SKILL.md." — for Codex; or into the project with a SKILL.md reference from GEMINI.md, .cursor/rules, or the system prompt for Gemini CLI and Cursor. Install one copy only: two copies conflict, and the plugin wins.
The skill triggers on requests like "make an opener…", "promo video…", "explainer…", or a complaint that an animation "looks like PowerPoint". The workflow has six steps: brief the agent (product, logo or site, audience, length, ratio, style name if any); approve its style brief (three concept candidates, one recommendation, a structure fingerprint, a palette with sources) before any code is written; settle the assets (your photos and logo first, or generated through an image MCP, or a concept that needs no photos); let it build one index.html, with the agent capturing key seconds and checking them against the rules first; review and iterate by scrubbing with ?debug=1 and describing what feels off; then deliver — keep the HTML, export MP4 with scripts/export-frames.mjs, or send a voice-over and the timeline re-times itself to it.
Example prompts from the README show the range: a 30-second opener for a note-taking app with logo and screenshots attached; a 45-second HR dashboard tour in the "product tour with claims" style, 16:9; kinetic typography for a festival — "City of Sound, 3 nights, 48 stages", loud, color-block; a 60-second visual-journalism explainer of how a container port works, no voice-over. Two tips matter most: say which style, not which scenes — naming "grainy gradient" gives you the look, listing a reference's scenes gives you a copy — and start each new video in a new chat, because the skill is read when first invoked and a long chat keeps earlier decisions in context.
Where it fits, and where it does not
Bang Motion fits best when the output is a short, designed motion piece watched in a browser: a launch opener, an app promo, a SaaS tour where the camera follows the clicks, a kinetic-typography announcement, a looping channel bumper, or an explainer where one subject never leaves the frame. It also fits when you have real brand material — logo, site, screenshots — because the system derives its palette and shapes from it.
It does not fit everything. The deliverable is a web page, so if you need a video file to upload, budget the extra MP4 export step and the Node, puppeteer, and ffmpeg it requires. Watching needs internet, because GSAP and the fonts load from a CDN. A reference video only teaches rhythm, energy, and motion language — never palette, fonts, layout, scene order, or signature moments — so do not expect a clone. Photos are only needed for photo-based styles; otherwise pick an illustrated or typographic style. And the After Effects route is narrow: cartoon explainers only, with After Effects open and the Higgsfield MCP bridge connected.
One more limit: this is a young project, created in September 2026 with only 3 commits, so treat it as a fast-moving community project rather than a settled standard. The version badge says 1.19.0, which suggests versioning lives in the skill files rather than a long commit history; the README is the most reliable source for what the current version does.
FAQ
How do I make browser motion graphics with Claude Code? Install the Bang Motion skill — either as a plugin with /plugin marketplace add bangtutorial/bang-motion followed by /plugin install bang-motion@bang-motion, or by cloning https://github.com/bangtutorial/bang-motion into ~/.claude/skills/bang-motion — then describe the piece you want: product, audience, length, ratio, and a style name if you have one. The agent returns a single index.html that plays in the browser. Commands are quoted from the README. The git clone was verified 2026-11-08; plugin-route commands were not run.
Is Bang Motion free? Yes. The repository is published under the MIT license, so the skill itself costs nothing. Watching a finished piece needs only a browser and internet. Optional steps cost nothing either, but need tools installed: Node and puppeteer for frame verification and MP4 export, and ffmpeg for the export and for voice-over sync.
Can Claude Code make videos? It can, with the right skill — but the output here is a web page that plays like a video, not a video file. Bang Motion builds one index.html with autoplay, loop, and a ?debug=1 scrub bar; when a file is required, scripts/export-frames.mjs renders it frame by frame to MP4. Another skill on this site renders MP4 shorts directly with Remotion; choose by whether the browser page or the video file is your real deliverable.
Does Bang Motion work with Codex? Yes. The repository description lists Claude Code, Codex, Gemini CLI, and Cursor. For Codex, clone the repository into your Codex skills folder, or add "For motion graphics / explainers, read and follow bang-motion/SKILL.md." to AGENTS.md. For Gemini CLI and Cursor, copy the skill into the project and reference SKILL.md from the agent's config.
How do I export the result to MP4? Run scripts/export-frames.mjs, which renders the page frame by frame to MP4; it needs Node, puppeteer, and ffmpeg. For voice-over sync, use ffmpeg, or open scripts/vo-pauses.html, which detects pauses in the browser with no ffmpeg needed.
Can I give it a reference video? Yes, but only for rhythm, energy, and motion language. The skill's rules prevent the palette, fonts, layout, scene order, and signature moments from carrying over, and each project must differ from the previous one in both skin and structure. Say which style you want; do not list the reference's scenes.
See the skill's directory entry for install, platforms, and quick start: Bang Motion on aiskills.one.