⏳ This skill is pending AI review.
Scores will appear once the review pipeline completes.
bang-motion
Membangun motion graphic sinematik di browser (promo video, opener, intro, bumper, kinetic typography, explainer/video penjelasan bergambar 16:9 atau 9:16) memakai HTML + CSS + GSAP (+ Three.js bila perlu), dengan hasil yang bergerak seperti video sungguhan — bukan slide presentasi. Gunakan skill ini setiap kali user meminta "video promo", "opener", "intro animasi", "motion graphic", "bumper", "kinetic typography", "animasi teks sinematik", "explainer", "video penjelasan" (jurnalisme visual, kartun edukasi, kolase), atau menunjukkan referensi video promosi/explainer dan ingin dibuatkan versi web-nya — bahkan bila mereka tidak menyebut kata "motion graphic" secara eksplisit. Juga gunakan bila user mengeluh hasil animasi web "seperti PPT/presentasi" dan ingin lebih sinematik, atau ingin merender animasi web menjadi file video MP4, atau ingin explainer kartun/animasi dibangun LANGSUNG di After Effects lewat bridge/MCP Higgsfield.
Use with your AI agent
Open your project in any AI assistant that can read your files. Works with ChatGPT, Claude, Claude Code, Codex, Cursor, Hermes Agent, OpenClaw, Grok Bot, and more.
Your agent needs access to this page’s linked instructions and your project files. Copying does not install or execute anything.
// RATINGS
Not yet listed on ClawHub or SkillsMP
// README
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
Why
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.
What you can make
| Output | Typical length | |
|---|---|---|
| 🎬 Openers & promos | product launches, app promos, campaign spots, teasers | 15–40 s |
| 🖥️ Product & SaaS demos | UI assembled and used on screen, camera following the clicks | 20–60 s |
| 🔤 Kinetic typography | lyric-style statements, event announcements, manifestos | 10–30 s |
| 📺 Bumpers, idents, channel intros | short brand moments that loop | 3–10 s |
| 🧭 Explainers | six explainer styles, optional voice-over sync, 16:9 or 9:16 | 30–120 s |
| 🎥 Video layers | your own or generated clips placed like footage — inside devices, frames, and masks, locked to the timeline | — |
| 🎞️ After Effects builds | cartoon explainers built directly inside AE through the Higgsfield MCP bridge | — |
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.
Style gallery
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.
The menus behind the looks
| Direction | Background | Typography | Signature motion | Good for |
|---|---|---|---|---|
| Cinematic dark | near-black gradient, particles, bloom only on objects | bold clean grotesk | push-through, light in front of the lens | creative tools, gaming, tech |
| Poster color-block | large solid color fields changing per scene | ultra-heavy display, giant cropped letters | block wipes, text slamming the frame edge | consumer apps, music, events |
| Editorial light | white/cream, generous space, hairlines | display serif + small grotesk | calm slides, lines that draw | productivity, finance, SaaS |
| Paper & print | paper texture, collage, stamps, tape | handwriting + serif | objects flying in and landing | education, community, food |
| Retro / analog | faded color, grain, scanlines | 70s–90s geometric | controlled glitch, rough zoom, freeze | nostalgia, music, entertainment |
| Brutalist mono | black and white, hard grid | monospace + condensed | hard cuts, shifting blocks, blinking cursor | developer tools |
| Pastel playful | stacked pastels, big round shapes | heavy rounded sans | elastic bounce, blooming shapes | kids, health, lifestyle |
| Luxury dark | black + gold/bronze, soft shadows | tall wide-tracked serif | slow motion, sweeping light, depth | fashion, automotive, property |
| Flat pop with photos | neutral light alternating with solid brand fields | rounded heavy sans + giant cropped words | cutouts popping in, stickers, fields snapping on the beat | consumer apps, fintech, e-commerce |
| Grainy gradient | deep base, saturated glowing shapes, fine grain | small clean grotesk or minimal heavy display | layers opening, camera through the shape, a guiding orb | tech, AI, music, creative launc |
// HOW IT'S BUILT
KEY FILES