Bang Motion

An agent skill that turns your AI coding agent into a motion designer.
Openers, promos, product demos, kinetic typography, and explainers — built as a single index.html that plays like video, not like slides.

What you can make · Style gallery · Workflow · Example prompts · Install · FAQ

Ask an AI agent for "a video" and you usually get slides: one section per idea, a title, a photo, a fade between them. Bang Motion encodes what a working motion designer insists on — one continuous world, a camera that actually moves, a subject that persists, text that lives inside the scene — as rules an agent can check in its own code, plus starters that make the right architecture the easy path.

It also stops every project from looking the same. 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.

Every deliverable is one index.html: double-click to play, autoplay + loop, ?debug=1 for a scrub bar, and an optional frame-by-frame export to MP4.

Each frame below is a single static scene built for this README with fictional brands and data. The portrait, product photos, port photo, engraving, and cartoon cutouts were generated with GPT Image 2.5; everything else is HTML, CSS, and SVG. Real projects take their palette, type, and imagery from your brand.

Grainy gradient · opener Glowing layered shapes, soft grain, a camera that travels through them. Tech, AI, music, premium launches.	Poster color-block · kinetic typography Huge cropped words, solid color fields that slam in on the beat. Events, music, launches.
Product tour with claims · SaaS demo Real UI lifted out of the dashboard, the camera zooms into what gets clicked. SaaS, dashboards, B2B.	Flat vector illustration · promo Solid fills, stylized hands, UI drawn flat, shapes with gentle overshoot. Fintech, consumer apps.
Flat pop with photos · promo Photo cutouts popping in, stickers, brand color fields that change with a visible trigger. Consumer apps, campaigns.	Continuous action · explainer One subject that never stops, numbers and maps living inside the world. Speed, routes, processes.
Visual journalism · explainer Black ground, real photos with source tags, highlighter, dashed annotations. News, current issues.	White catalog · explainer White grid, product cutouts, mixed script and heavy sans. Products, brands.
Vintage sketch · explainer Sepia paper, engraving art, classic serifs, rust notes. History, biography.	Cartoon collage · explainer Cream paper, flat illustration cutouts, color pills, handwriting. Science, education.
Cartoon stage · explainer One living stage per scene, jointed characters, no captions. Education with characters.	…and many more 10 styles × 19 concepts × 9 render families — three candidates, one pick.

flowchart LR
  A[Brief<br>product, logo, audience,<br>length, ratio] --> B[Style brief<br>3 concept candidates,<br>palette with sources]
  B --> C{You approve}
  C --> D[Assets<br>your photos & logo<br>or generated via MCP]
  D --> E[Build<br>index.html]
  E --> F[Verify frames<br>snap.mjs / ?debug=1]
  F --> G[Your feedback]
  G --> E
  G --> H[Deliver<br>HTML · MP4 · voice-over sync]

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 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.

Tip: start each new video in a new chat. The skill is read when it is first invoked, and a long chat keeps earlier decisions in context.

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

• 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. The palette and shapes are derived from it.
• Want one specific moment? Ask for it explicitly; otherwise the agent composes new ones.
• Keep text short. Openers carry one feeling, explainers one argument.

Bang Motion follows the open Agent Skills layout: a folder with SKILL.md (frontmatter + instructions), references/, assets/, scripts/. It also ships as a Claude Code plugin.

/plugin marketplace add bangtutorial/bang-motion

/plugin install bang-motion@bang-motion

Update later with /plugin marketplace update bang-motion.

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

Install one copy only. Two copies with the same skill name (for example a plugin and a manual folder) conflict, and the plugin wins.

The skill triggers on requests like "make an opener…", "promo video…", "explainer…", or a complaint that a web animation "looks like PowerPoint".

A deliverable never needs npm install to be watched.

• Style brief before code — concept, structure fingerprint, palette with sources, display font, background surface and motion, render family, transitions, one special moment.
• Structure from a menu — three concept candidates per project, at most two "canonical" components, and a different fingerprint from the previous video.
• 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, and color changes with 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.

Full detail lives in SKILL.md and references/.

SKILL.md                         rules & workflow (read by the agent)
.claude-plugin/                  plugin + marketplace manifests
references/
  opener-konsep.md               19 opener concepts, UI animation, photos in openers
  anti-ppt.md                    slide patterns → fixes
  techniques.md                  typography, camera, transitions, backgrounds, render families
  explainer.md                   explainer styles, camera recipes, VO re-timing
  kartun-panggung.md             cartoon stage explainers
  architecture.md                stage, camera rig, determinism, export
  ae-bridge-higgsfield.md        building inside After Effects via the MCP bridge
  roadmap.md                     where the skill is heading
assets/
  starter-opener.html            opener / promo architecture (GSAP + Three.js)
  starter-explainer*.html        one starter per explainer style
scripts/
  snap.mjs                       verify: capture key seconds
  export-frames.mjs              export: frame-by-frame PNG → MP4
  vo-pauses.html                 voice-over pause detection, no ffmpeg needed
  serve.py                       no-cache dev server (optional)
  ae/bridge/                     After Effects bridge helpers
docs/gallery/                    README preview images

Issues and pull requests are welcome. When you add a rule, describe which failure it prevents and offer it as a menu option rather than a single "right answer". Bump version in SKILL.md and the plugin manifests, and add a line to CHANGELOG.md.

MIT © 2026 Bang Tutorial