bangtutorial

Bang Motion — Development skill for Claude Code

Development community

Agent skill for browser motion graphics — openers, promos, bumpers, kinetic typography, and five explainer styles that move like video, not slides.

How to install Bang Motion

This entry records only its repository, not the path inside it, so there is no exact command to give. Open bangtutorial/bang-motion and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Bang Motion does

Agent skill for browser motion graphics — openers, promos, bumpers, kinetic typography, and five explainer styles that move like video, not slides. Single index.html output. Works with Claude Code, Codex, Gemini CLI, Cursor.

Alternatives in Development

Mono Color Skill — One-ink editorial print image skill — warm paper, halftone photography, active negative space, and restrained 3k ★
11 Permission Explainer — Permission Explainer System Prompt 2.3k ★
Hand Drawn Styles — Claude Code skill：把内容套进内置手绘画风配方,产出可直接复制的生图提示词 930 ★

README

Bang Motion

**An agent skill for building motion graphics in the browser — product openers and promos, bumpers and idents, channel intros, kinetic typography, lower thirds, and explainers.**

[![Version](https://img.shields.io/badge/version-1.0.0-2f6fd6?style=flat-square)](CHANGELOG.md) [![License: MIT](https://img.shields.io/badge/license-MIT-3fa34d?style=flat-square)](LICENSE) [![Agent Skills](https://img.shields.io/badge/format-Agent%20Skills-1c2a4a?style=flat-square)](#install) [![Works with](https://img.shields.io/badge/works%20with-Claude%20Code%20%C2%B7%20Codex%20%C2%B7%20Gemini%20CLI%20%C2%B7%20Cursor-7a5af5?style=flat-square)](#install)

Output is a single `index.html` — double-click to play. Autoplay, loop, no player chrome.

Why

Ask an AI agent for "a video" and you usually get **slides**: one section per idea, a photo, a title, a fade between them. Bang Motion encodes what a working motion designer would insist on — one continuous world, a camera that actually moves, a subject that persists across scenes, numbers that live inside the scene instead of floating on top — as **structural checks an agent can verify in its own code**, backed by starters that make the right architecture the path of least resistance.

What you get

General motion graphics, not just explainers: openers, promos, bumpers, idents, intros, kinetic typography, titles — with a shared camera rig, deterministic timeline, and anti-slide rules.
Style born from the theme, never from the starter or the reference: a required style brief fixes the palette (from the brand), a display face with character, the background surface, the background motion, the transitions, and a motion signature — each picked from a menu, each required to differ from the previous project. References contribute rhythm, not skin.
Menus, not defaults: every place where an agent tends to grab the cheape