←Leaderboard/Design/bang-motion
Last commit on September 15, 2026·Created on September 5, 2026

bangtutorial/bang-motion

“Create animated motion graphics in HTML.”
Combined rank
#394
across all skills
In Design
#44
category rank
Stars
1.1k
+43.6% in last 7d
Forks
140
+17.6% in last 7d
Watchers
3
0.0% in last 7d
Traction scoreGitHub stars can be faked, so popularity alone can be misleading. Traction Score looks for broader signs of recent attention, adoption, and active maintenance.
TL;DR

Bang Motion guides AI coding agents in building browser-based motion graphics with HTML, CSS, and GSAP, with Three.js when needed. Its rules for visual continuity, camera movement, typography, and deterministic timelines help shape promos and explainers that move like video rather than slides.

WHO IT'S FOR
Frontend developers
creating cinematic browser-based motion graphics
Digital marketers
generating web-based promo videos and openers
Content creators
building kinetic typography and explainer videos
Motion designers
bridging web animations with After Effects
Repository contents

1 skill file

Compatible AgentsThe repository documents support for these agents. The skills may also work with other agents that can load SKILL.md files, but they may need some setup or small changes.

Use this skill

Follow the documented setup, then try a first task.

Claude Code plugin

Installs: Complete Bang Motion plugin from the repository root · Claude Code

Before you start
  • Claude Code
  • Install only one copy of the skill; the author warns that duplicate plugin and manual copies conflict.
  • A modern browser and internet access for CDN-hosted GSAP and fonts are required to view the generated index.html deliverable.
  1. In a Claude Code agent session, add the author's plugin marketplace.

    /plugin marketplace add bangtutorial/bang-motion
  2. In the same Claude Code agent session, install Bang Motion from that marketplace.

    /plugin install bang-motion@bang-motion
.claude-plugin/marketplace.json ↗ · Checked Nov 5, 2026SKILL.md ↗ · Checked Nov 5, 2026README.md ↗ · Checked Nov 5, 2026

Give it something to do.

Suggested first task

Create a 30-second app opener

Uses bang-motion

  • The note-taking app's logo
  • Representative app screenshots
Using the bang-motion skill, make a 30-second opener for my note-taking app. Use the attached logo and screenshots as the brand material, and create the browser-based index.html deliverable.
.claude-plugin/marketplace.json ↗ · Checked Nov 5, 2026SKILL.md ↗ · Checked Nov 5, 2026README.md ↗ · Checked Nov 5, 2026