Bang Motion gives a coding agent the rules for short animated videos as one HTML file, and reaches 493 stars in nineteen days

Making a short animated video for a product page or ad used to mean hiring a motion designer or learning After Effects, and Bang Motion is a free agent skill that returns one to you as an animated HTML file from a plain brief. The skill was published on GitHub on 5 September under the MIT licence and has 493 stars nineteen days later, from a single author, bangtutorial.

The output is one index.html. Open it in a browser and it plays like a short video, with autoplay and loop, and a scrub bar appears if ?debug=1 is added to the URL. The README lists six deliverable kinds and their typical lengths: openers and promos at fifteen to forty seconds, product and SaaS demos at twenty to sixty seconds, kinetic typography at ten to thirty seconds, three to ten second bumpers and channel idents, and thirty to one hundred and twenty second explainers in six styles. Optional scripts export the same file to MP4 frame by frame, or re-time the animation to a voice-over.

What the reader gets from a brief

A user names the product, attaches the logo or a link, says who it is for, and asks for a length and an aspect ratio. The agent answers with a style brief first: three concept candidates, a recommended pick, a structure fingerprint, and a palette in which every colour states where it came from. The user approves or changes the brief, and only then does the agent write code.

The style menu carries ten looks, from cinematic dark for creative-tool launches to editorial light for finance and SaaS to flat pop with photos for consumer apps. The structure menu carries nineteen opener concepts and six explainer styles, and each one ships as a set of principles the agent has to apply, so a new video for a new brand cannot simply copy a working example. The author states in the README that a project has to differ from the previous one in both the look and the structure, which is the check that stops a run of videos looking the same.

Works with four coding agents

The repository lists install paths for Claude Code, Codex CLI, Gemini CLI and Cursor. The Claude Code path is a plugin from a marketplace; the others read SKILL.md from a copied folder. The author says the skill triggers on requests like "make an opener", "promo video", "explainer", or a complaint that a web animation "looks like PowerPoint". A person with no coding agent at all can paste the same instruction file into a chat.

Watching the result needs a browser only, because the animation library and the fonts load from a CDN. Exporting an MP4 needs Node, Puppeteer and ffmpeg, and syncing to a voice-over needs ffmpeg, but the viewer never has to install anything before the video plays. Video clips can go in as footage layers, so a screen recording can sit inside a device frame and stay locked to the timeline.

Traction

The repository is nineteen days old and carries 493 stars, 72 forks and one open issue on GitHub, with the last commit on 15 September. The gap: none of the gallery frames on the README link to a real published video, so a team looking at the page cannot see how the finished animation plays in a browser or on a phone. The interesting check is whether an agent that has not seen those specific examples produces a video a viewer stays on.

Source

• Bang Tutorial, bangtutorial/bang-motion on GitHub, MIT licence.