ClaudeMap

Bang Motion

An agent skill for browser motion graphics — openers, promos, idents, kinetic typography, and explainers that render as a single autoplay index.html.

Skills & Commandsskillmotion-graphicsanimationgsapfrontend
Visit projectbangtutorial/bang-motion

Bang Motion encodes what a working motion designer would insist on as structural checks an agent can verify in its own code: one continuous world, a camera that actually moves, a subject persisting across scenes, and motion every second — no fading sections, no slide decks pretending to be video. Output is a single index.html (GSAP, autoplay, loop, deterministic timeline), installable as a Claude Code plugin or a plain skill folder for Codex, Gemini CLI, and Cursor.

What it does

  • Hard anti-slide checks an agent verifies itself: no fading <section>s, a visual through-line, at most two text levels, motion every second, varied transitions
  • Menus, not defaults: 8 style directions, 11 background motions, 6 background surfaces, 9 transitions, 6 highlight shapes — with a no-repeat rule across projects
  • Five explainer styles with starters: cartoon collage, visual journalism, white catalog, vintage sketch, continuous action
  • Deterministic timeline (every frame a pure function of time) plus a voice-over workflow that re-times the animation to your audio

When to use it

For product and marketing pages that need real motion — openers, promos, channel intros, kinetic typography — without a motion designer or a video pipeline: the deliverable is one HTML file you can drop straight into a page.

Getting started

# As a Claude Code plugin:
/plugin marketplace add bangtutorial/bang-motion
/plugin install bang-motion@bang-motion

# Manual (any agent):
git clone https://github.com/bangtutorial/bang-motion
# Claude Code: copy to ~/.claude/skills/bang-motion

Things to know

The result is browser motion, not a rendered MP4 — watching needs internet (GSAP and fonts load from CDN), and MP4 export only happens through the optional Node + puppeteer + ffmpeg scripts.

Repository

bangtutorial/bang-motion

Charted

Related on the map

  • guizang-product-video-skill

    Skill

    Guizang's agent skill turns your repo's recent updates into a finished promo video — real components, code-rendered animation, an original code-written soundtrack — no video editor involved.

    • agent-skill
    • video
    • promo
    • marketing
    View

  • geo-sleuth

    Skill

    An agent skill that geolocates a photo with nothing readable in it — OSM geometry, elevation skylines and satellite tiles turn “where was this taken?” into a measured answer with an error radius.

    • agent-skill
    • geolocation
    • osint
    • openstreetmap
    View

  • Birdview

    Skill

    A skill that makes AI coding agents map the architecture and declare the blast radius before they touch a line of code — rendered as one standalone HTML page.

    • skill
    • architecture
    • code-visualization
    • change-scope
    View