Bang Motion: Turn Your AI Agent Into a Motion Designer

What Bang Motion actually is

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. Bang Motion exists to stop that. It is an Agent Skills folder — a SKILL.md file with the rules, plus references/, assets/ and scripts/ — and it also ships as a Claude Code plugin. The agent reads the skill, then builds your video as code: one continuous world, a camera that moves through it, a subject that stays on screen, and text that lives inside the scene instead of floating on top of it.

The deliverable is always the same shape: one index.html. Double-click it and it plays — autoplay, loop, no player chrome. Add ?debug=1 and you get a scrub bar for reviewing; add ?clean=1 for a clean export. If you need a real video file, scripts/export-frames.mjs renders the page frame by frame to MP4. Nothing needs npm install just to watch the result — a browser and an internet connection are enough, because the animation libraries and fonts load from a CDN. (That last detail matters, and it is in the limitations section below.)

The project is young and small. It was created on 5 September 2026, the current version is 1.19.0 (landed 15 September 2026), and when checked on 9 November 2026 it had 1,828 stars and 211 forks — with only 3 commits in total, all dated 15 September 2026. It peaked at #56 on GitTrend on 7 November 2026.

Bang Motion at a glance

What you can make

The README lists seven kinds of output, each with a typical length. The two video-layer rows have no length because the clips follow your timeline instead of setting it.

The menus behind the looks

Bang Motion's answer to "every AI video looks the same" is menus, not templates. The look is derived from your brand through a required style brief, the structure is chosen from a menu of concepts, and nothing is inherited from the starter or copied from a reference. Three menus do the work: 10 style directions, 19 opener concepts and 6 explainer styles.

10 style directions — the skin, derived from your brand

19 opener concepts — the structure, chosen per product

Each concept ships as principles plus a menu of openings, transitions and endings — never as a script to copy. The full list from the README:

1. One continuous shot — creative tools, hardware, spaces
2. Pure typography — strong taglines, events, releases
3. Problem → gone — productivity, utilities
4. Before / after — editors, filters, optimization
5. Journey inside the UI — apps with a distinctive UI
6. Product macro — hardware, packaging, F&B, fashion
7. Object metaphor — security, cloud, finance
8. Living number — milestones, performance
9. One feature, fully demoed — apps with one clear edge
10. Diegetic question → answer — AI, search, support
11. Rhythmic collage — music, lifestyle, community
12. Logo as stage — brands with a strong logo shape
13. Object relay — e-commerce, delivery, marketplaces
14. Brand system showcase — launches, rebrands, communities
15. Claim → how → result — new features, generative AI, creative tools
16. Living UI ecosystem — B2B SaaS, AI assistants, workflows
17. Flat pop with photos — consumer apps, fintech, campaigns
18. Through the gradient shapes — tech, AI, security, premium launches
19. Product tour with claims — SaaS, team tools, dashboards

6 explainer styles — each with its own starter

How the rules work

A skill is only as good as the rules the agent can check in its own code, and Bang Motion's rules are the interesting part. They are what keep the output from collapsing back into slides:

• Style brief before code. Concept, structure fingerprint, palette with sources, display font, background surface and motion, render family, transitions, one special moment — settled before a line of code is written.
• Structure from a menu. Three concept candidates per project, at most two "canonical" components, and a different fingerprint from the previous video, so the second video cannot repeat the first.
• Examples are principles, not scripts. Openings and endings differ from the concept's example, signature moments are transformed, and the example's colors and shapes never carry over.
• Living typography. Sentence case, emphasis by order, size or pause; word highlights and punctuation only when they add meaning.
• A background that never sits still. A chosen background motion, with color changes that arrive on a visible trigger.
• Video as footage layers. Clips follow the timeline clock, so scrubbing and MP4 export stay frame-accurate.
• A camera that works. Breathing drift, motivated push-throughs, and in UI demos a camera that follows the important clicks.
• Structural anti-slide checks. No fading sections, a persistent subject or world, at most two text levels, varied transitions with real depth.
• Readable on phones. No text under 30 px on a 1080-wide stage.

How to install Bang Motion

Two routes. If you use Claude Code, the plugin route is two commands. For any other agent, clone the repo into the agent's skills folder.

As a plugin (Claude Code)

/plugin marketplace add bangtutorial/bang-motion

/plugin install bang-motion@bang-motion

Update it later with:

/plugin marketplace update bang-motion

Manual (any agent)

git clone https://github.com/bangtutorial/bang-motion

Once installed, the skill triggers on requests like "make an opener…", "promo video…" or "explainer…" — or on a complaint that a web animation "looks like PowerPoint". Watching takes only a browser and internet. Verifying frames takes Node plus Puppeteer (scripts/snap.mjs); MP4 export adds ffmpeg; voice-over sync takes ffmpeg — or nothing at all, because scripts/vo-pauses.html detects pauses in the browser. Video clips need MP4 (H.264) or WebM files in assets/; generated images need any image MCP the agent can call; After Effects builds need After Effects plus the Higgsfield MCP bridge.

The workflow, step by step

1. Brief the agent. Name the product, attach the logo or site, say who it is for, the length, and the ratio. Mention a style if you have one in mind — the name is enough.
2. Approve the style brief. The agent answers with three concept candidates, one recommendation, a structure fingerprint, and a palette where every color states its source. Change anything before a line of code is written.
3. Settle the assets. Your own photos and logo come first. If you have none, the agent can generate them through an image MCP (fictional faces, logos added in code) — or pick a concept that needs no photos.
4. Let it build. You get one index.html. The agent captures key seconds and checks them against the rules before handing it over.
5. Review and iterate. Open it, scrub with ?debug=1, and describe what feels off. Feedback lands on the same file.
6. 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

These are the README's own examples, word for word. Copy one, swap in your product, and you have a working brief — the agent does the rest.

Make a 30-second opener for my note-taking app. Logo and screenshots attached.

Build a 45-second product tour of our HR dashboard in the "product tour with claims" style, 16:9.

Promo for a ticketing app in the flat pop with photos style — generate fictional people, 9:16, 20 seconds.

Kinetic typography for our festival announcement: "City of Sound, 3 nights, 48 stages". Loud, color-block.

Explain how a container port works in 60 seconds, visual journalism style, no voice-over.

Promo for our editing app with a screen recording playing inside a laptop mockup, 30 seconds. Clip attached.

A cartoon explainer on why volcanoes erupt, for kids, 9:16, I will send a voice-over later.

Getting better results — the README's own advice: say which style, not which scenes. "Grainy gradient" gives you the look; listing a reference's scenes gives you a copy. Hand over real brand material — logo, site, app screenshots, photos — because the palette and shapes are derived from it. And keep text short: openers carry one feeling, explainers carry one argument.

Voice-over workflow

Explainers can sync to a voice-over, and the workflow is deliberately low-friction. The agent hands you the script first; you record it yourself or generate the audio; you send the audio back, and the timeline is re-timed to your voice. If ffmpeg is installed, the agent uses it; if it is not, scripts/vo-pauses.html detects the pauses in the browser instead, so the sync step needs no extra tooling.

Honest limitations — read these first

Bang Motion is free, clever and genuinely useful, but it is a young project with real rough edges. Every one of these comes from the repo itself:

• It does not play offline. The delivered index.html loads GSAP 3.12.5 and Three.js 0.161.0 from jsDelivr and fonts from Google, so it needs an internet connection on every view and calls third-party servers each time it plays. If you need a file that works anywhere, export the MP4 — do not send the raw HTML to a client and assume it will open.
• The project went quiet fast. There are only 3 commits in total, all dated 15 September 2026, and no commits since. One pull request is open — Remotion as a second output, unmerged since 23 September 2026 — and one issue is open. A skill with no maintainer activity can still work fine, but do not plan a production pipeline around a repo that may not answer.
• Most of the docs are in Indonesian. The README is in English, but SKILL.md, the changelog and most of the reference files are in Indonesian. The agent reads them fine, but if you want to read the rules yourself — or edit them — expect to run them through a translator.
• The manifest and the README disagree. The plugin manifest still promises five explainer styles while the README lists six. It is a small mismatch, and it is the kind of thing that tells you the packaging has not kept up with the content.
• It is not a video generator. It writes HTML, CSS and JavaScript motion graphics. There is no real camera footage, no filmed scenes, and no AI model rendering frames for you. Clips you supply become layers inside a coded scene. Heavy, film-grade work still belongs in After Effects — and the skill knows it, which is why the After Effects bridge exists at all.

Bang Motion vs Teardown: the same family, different craft

If Bang Motion feels familiar, it is because it belongs to the same "agent skill" family as Teardown, the free Claude Code skill that turns any machine into a 3D simulator. Same idea — a skill file that teaches an agent a craft — pointed at a different one.

Frequently asked questions

Is the output a video file?

No. The deliverable is an index.html that plays like a video: autoplay, loop, no player chrome. When you need a file, scripts/export-frames.mjs renders it frame by frame to MP4 — or record the playing page with a screen recorder.

Will every video end up looking the same?

That is the main thing the skill prevents. The palette and shapes come from your brand, the structure comes from a concept chosen for your product, and each project must differ from the previous one in both skin and structure.

Can I give it a reference video?

Yes. The agent takes rhythm, energy and motion language from it — not the palette, fonts, layout, scene order or signature moments.

Do I need photos?

Only for photo-based styles. Use your own, a licensed stock set, or let the agent generate fictional people and props through an image MCP. Otherwise pick an illustrated or typographic style.

Can I use video clips?

Yes. Clips become footage layers: trimmed, masked, graded and animated with the rest of the scene, always in sync with the timeline — including frame-by-frame MP4 export. Use your own footage, licensed stock, or clips generated through a video MCP.

Can it build in After Effects?

Yes, for cartoon explainers: with After Effects open and the Higgsfield MCP bridge connected, the agent builds compositions, characters and keyframes directly in After Effects.

Sources: Bang Motion repository README, github.com/bangtutorial/bang-motion; ReviewRamble review, reviewramble.com/github-repos/bang-motion. Facts checked 9 November 2026.

Related reading: Teardown: the free Claude Code skill that turns any machine into a 3D simulator · Gemini Omni 1.2 Flash: Google's 15-second AI video model · Free screen recorder — capture your Bang Motion output