# Bang Motion — effect skill for animation & motion graphics

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

Browser motion graphics that move like video, not slides: openers, promos, bumpers, kinetic type and explainers.

- **Type:** [Effect](https://skills.varg.ai/effects.md) · [Animation & motion graphics](https://skills.varg.ai/browse/skills/animation.md)
- **Slug:** `bang-motion`
- **Status:** live
- **Publisher:** Bang Tutorial (community)
- **License:** MIT
- **Source:** https://github.com/bangtutorial/bang-motion
- **Works in:** Claude Code, Codex, Cursor, Gemini CLI
- **Requires:** A browser for preview, Node.js with Puppeteer and ffmpeg for MP4 export
- **Cost:** Free — local render
- **Adoption:** 149 installs, 733 GitHub stars (GitHub + skills.sh, 2026-10-26)

## What it does

An Indonesian-language skill from the Bang Tutorial YouTube channel for building cinematic motion graphics in a single HTML file with HTML, CSS and GSAP (plus Three.js when needed): promo videos, openers and intros, bumpers, kinetic typography and five explainer styles (visual journalism, cartoon, catalogue, stage and sketch) in 16:9 or 9:16. Its rules are mechanical anti-slideshow checks: deterministic timing, a style derived from the theme rather than the starter, live text over a quiet background. Puppeteer scripts export frames to MP4, and a reference covers building explainers directly in After Effects through Higgsfield's bridge.

## Use when

- Make a promo, opener, bumper or kinetic-type piece in the browser
- Fix web animation that looks like a slide deck
- Render a web animation to MP4

## Not for

- AI-generated footage
- Teams that need English instructions (SKILL.md is in Indonesian)

## Install

- Claude Code: `/plugin marketplace add bangtutorial/bang-motion && /plugin install bang-motion@bang-motion`

## Example output

https://skills.varg.ai/previews/bang-motion.webp — Frame from the README style gallery: 'Poster color-block' kinetic typography (huge cropped words, color fields that slam in on the beat). Still image; no video demo is published in the repo. (credit: Bang Tutorial (bang-motion), https://github.com/bangtutorial/bang-motion#style-gallery)

## More animation & motion graphics skills

- [Day in My Life](https://skills.varg.ai/skills/hyperframes-day-in-my-life.md): A 60–75 s hand-drawn ink film of your agent's day with you, built from local Claude Code history, scored for strings.
- [p5 Paint Animation](https://skills.varg.ai/skills/hyperframes-p5-paint-animation.md): Handwriting that writes itself, photos that paint themselves and clips repainted as living paintings, in p5.js code.
- [Session Story](https://skills.varg.ai/skills/hyperframes-session-story.md): A 40–70 s watercolor film of a typical session with your agent, told in your real messages, with its own score.
- [Remotion Markup](https://skills.varg.ai/skills/remotion-markup.md): Write Remotion markup that animates well: timing, transitions, motion blur, effects, audio, fonts and 3D.
- [Motion AI Kit](https://skills.varg.ai/skills/motion-ai-kit.md): Write production-grade UI animation with Motion or CSS: best practices, docs search, springs, perf audits.
- [Motion Design](https://skills.varg.ai/skills/lottiefiles-motion-design.md): Animate with intent: timing, easing, choreography and Disney principles for UI and motion graphics.

## Run the generation on varg

varg is one API key for the models these skills drive — Seedance 2.5, Kling 4, Veo 3.1, Wan 3, Nano Banana 2.1, GPT Image 2.5, ElevenLabs v4 and 200+ more — billed in credits, with a cost estimate before anything runs.

- Claude Code: `claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg` (skill + hosted MCP)
- Codex, Cursor, Gemini CLI, OpenClaw: `npx skills add vargHQ/skills --skill varg-ai -a <agent> -y`
- Claude.ai, ChatGPT, any MCP client: connect `https://mcp.varg.ai/mcp`
- API key: https://varg.ai/dashboard/api · Model specs: https://varg.ai/models/llms.txt