Bang Motion: an Agent Skill That Builds Browser Motion Graphics as a Single index.html

The slide-deck problem Bang Motion was written to stop

Ask a general-purpose coding agent for a short promo and you tend to get a deck that moves: one section per idea, a heading, an image, a cross-fade. The README states the project's premise directly, that asking for "a video" usually returns slides, and Bang Motion exists to encode what a working motion designer insists on instead. The rules it names are specific: one continuous world, a camera that actually moves, a subject that persists across scenes, and text that lives inside the scene rather than floating above it.

The audience is narrow on purpose. This is not a tool for a video editor, and it is not a rendering engine. It is a skill file plus references and starters that an AI coding agent reads before writing HTML, CSS and SVG. If you do not already work inside Claude Code, Codex, Gemini CLI or Cursor, there is nothing here to run. If you do, the value proposition is that the agent stops inventing a look from scratch and instead picks from a menu, which is a different kind of reliability than a template gallery gives you.

The stated output ranges are worth reading as constraints rather than marketing: openers and promos at 15 to 40 seconds, product and SaaS demos at 20 to 60 seconds, kinetic typography at 10 to 30 seconds, bumpers and idents at 3 to 10 seconds, and explainers at 30 to 120 seconds. Those numbers tell you the intended scale. Nobody is asking Bang Motion for a ten-minute film.

How the skill constrains the agent: style brief, concept menu, render family

The mechanism visible in the README is a two-stage selection. First, a required style brief derives the look from your brand, which is where palette, typography and imagery come from. Second, the structure is chosen from a menu of concepts rather than inherited from the starter or copied from a reference. The README is explicit that nothing is inherited from the starter and nothing is copied from a reference, which matters because the usual failure mode of template-driven generation is that every project carries the template's fingerprints.

The menus are the concrete part. The README documents 10 style directions (cinematic dark, poster color-block, editorial light, paper and print, and others listed in the collapsed table), 19 concepts, and 9 render families, with the combination producing three candidates and one recommended pick. Each style direction is defined by background treatment, typography, a signature motion, and a stated best-fit category. Cinematic dark, for example, uses a near-black gradient with bloom only on objects, a bold clean grotesk, and push-through motion with light in front of the lens, and the README lists it as good for creative tools, gaming and tech.

That structure is the actual architecture. There is no runtime, no scene graph library and no build step described. The agent reads SKILL.md, consults the references/ directory, selects a style direction and a concept, and writes one index.html containing the HTML, CSS and SVG. The README notes that the gallery frames are single static scenes built for the README with fictional brands and data, and that some imagery in them was generated with GPT Image 2.5 while everything else is HTML, CSS and SVG. Real projects, it says, take palette, type and imagery from your brand.

Installing the skill and producing a first bumper

The repository exposes a .claude-plugin/ directory at the top level alongside SKILL.md, references/, scripts/ and assets/, which is the Agent Skills layout the README's badge refers to. The README points to its own Install section for the commands, and that section is not reproduced in the README text available, so the exact install command is not something this article can quote. What the repository layout does confirm is that the skill is distributed as files in a git repository rather than as a package on a registry. The top-level entries are .claude-plugin/, CHANGELOG.md, LICENSE, README.md, SKILL.md, assets/, docs/, icon.png, icon.svg, references/ and scripts/.

Once the skill is loaded into your agent, the first real use is a short piece rather than an explainer, because the feedback loop is faster. A bumper in the 3 to 10 second range forces the style brief to be filled in and the concept to be picked without giving the agent room to pad. Ask for one in plain language, and specify the brand inputs the brief requires.

The deliverable is a single index.html. The README states you double-click it to play, that it autoplays and loops, and that ?debug=1 adds a scrub bar. Open the file directly in a browser first, then append the query string to the URL. The scrub bar is the only inspection tool the README documents. Use it to check that the camera move and the subject persistence survive a scrub rather than only looking correct on a linear playthrough.

Where Bang Motion is the wrong tool

The output is one HTML file. That is the whole point and also the ceiling. Anything that needs a timeline with multiple contributors, versioned review comments, or frame-accurate audio sync is outside what the README describes. The optional frame-by-frame export to MP4 is mentioned as a feature, but the README does not document its flags, its frame rate handling, or how audio is treated, so treat it as unverified until you run it yourself.

Voice-over sync is a second soft spot. The README lists optional voice-over sync under explainers, and that is the only mention. There is no documented mechanism for aligning beats to an audio waveform, no described format for supplying the audio, and no stated tolerance for drift. If your piece depends on narration landing on specific frames, this is not the tool to reach for.

The After Effects path is the most conditional feature in the repository. The README describes cartoon explainers built directly inside AE through the Higgsfield MCP bridge. That is a dependency on an external bridge and on After Effects itself, not on the skill alone, and the README does not document setup for it. Anyone without that bridge is limited to the browser output.

Finally, the repository has no homepage and no retrieved releases. The last push was on 2026-09-15, which is recent, but the CHANGELOG.md is the only changelog surface in the layout. If your team needs a published release artifact to pin, this project does not appear to provide one.

Against Remotion and hand-authored HTML animation

The closest comparison in kind is Remotion, which renders React components to video through a Node pipeline. The difference in approach is fundamental. Remotion gives you a deterministic renderer: you write components, the tool renders frames, and the output is a video file. Bang Motion gives you no renderer at all in the browser case. The agent writes HTML, CSS and SVG, and the browser is the player. That means no Node build step, no headless Chrome in CI, and no dependency tree, but it also means the deliverable is a web page rather than a video, and any MP4 has to come from the optional export the README mentions without documenting.

Against hand-authored HTML animation, the trade is control for consistency. If you write the CSS and SVG yourself, you get exactly the easing curve you want and no agent in the loop. Bang Motion's contribution is the constraint layer: the style brief, the 10 directions, the 19 concepts and the 9 render families exist to stop an agent from producing the same generic look every time. Whether that layer helps depends on whether you would otherwise be prompting an agent at all. If you would not, the menus are overhead.

A third option worth naming is a template marketplace, which is the opposite trade again. Templates are deterministic and fast and they look like each other. Bang Motion's README explicitly rejects inheritance from the starter and copying from a reference, which is a deliberate rejection of that model.

Licence, upgrade cost and what version 1.19.0 implies

The repository carries the MIT licence, per the LICENSE file and the badge in the README. For a skill that is essentially a set of prompt instructions plus references and starter files, MIT is permissive in the way that matters: you can vendor the skill into your own repository, modify the style directions, and keep the changes private. This is not legal advice, and the licence text in LICENSE is the authority, not this paragraph.

Upgrade cost is low but not zero. There is no package manager involved, so upgrading means pulling the repository and re-reading SKILL.md. The risk is not a broken dependency; it is that a changed style direction or concept menu silently changes what your agent produces on the next prompt. If you have tuned prompts against version 1.19.0, diff CHANGELOG.md between the version you pinned and the version you pull before you let the agent write again.

The version number itself is informative. The README badge reads 1.19.0, which suggests a project that iterates often rather than one that stabilises on a small set of releases. Combined with the last push on 2026-09-15 and the absence of retrieved releases, the practical implication is that pinning to a commit hash is safer than tracking main if you depend on a specific look.

Editorial conclusion

Adopt Bang Motion if you already drive an agent through Claude Code, Codex, Gemini CLI or Cursor and you want short motion pieces (15 to 40 second openers, 3 to 10 second bumpers, kinetic typography) delivered as a single index.html you can double-click, autoplay and loop. Do not adopt it if you need a real editing timeline, collaborative review, or frame-accurate finishing: the README offers a scrub bar behind ?debug=1 and an optional frame-by-frame MP4 export, which is not the same thing. Before committing, verify three things in this order: that your agent loads the skill from the .claude-plugin/ directory and reads SKILL.md, that you can fill in the required style brief with real brand palette and type, and that the generated page still plays correctly when you open it without a local server. The repository has no homepage and no retrieved releases, so CHANGELOG.md is the only place to check what version 1.19.0 changed.

Frequently asked questions

Official sources

1. bangtutorial/bang-motion on GitHub
2. Issues
3. License: MIT
4. README