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 w

780 stars 120 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add bangtutorial/bang-motion --skill bang-motion

Manual install

git clone --depth 1 https://github.com/bangtutorial/bang-motion.git /tmp/bang-motion
mkdir -p ~/.claude/skills
cp -r /tmp/bang-motion/. ~/.claude/skills/bang-motion

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Bang Motion — motion graphic web yang bukan PPT

**v1.19.0 · by [Bang Tutorial](https://youtube.com/bangtutorial) · MIT.** Riwayat perubahan di `CHANGELOG.md`;
cara pasang di `README.md`.

Skill ini untuk AI coding agent apa pun (format Agent Skills terbuka).
Isinya hukum dan resep untuk motion graphic yang bergerak seperti video, bukan
presentasi — patuhi sebelum menulis kode.

## Prasyarat — hanya browser

Deliverable (`index.html`) hanya butuh browser modern + internet untuk CDN
(GSAP, font). Python dan Node **opsional**, dipakai hanya untuk alat kerja:
`scripts/serve.py` (server no-cache, cuma perlu bila memakai module lokal),
puppeteer (snapshot/verifikasi otomatis, `scripts/export-frames.mjs` → MP4).
Kalau user tidak punya keduanya: (1) tetap bangun satu-berkas, buka lewat
klik dua kali; (2) verifikasi visual lewat `?debug=1` (panel scrub) dan
screenshot manual per detik kunci; (3) MP4 lewat rekam layar (OBS / rekam
tab browser) — jelaskan bahwa hasil rekam layar bisa drop frame, dan render
frame-by-frame butuh Node. Jangan pernah membuat deliverable yang butuh
`npm install` untuk DITONTON.

**ffmpeg juga opsional.** Cek dulu (`ffmpeg -version`); bila tidak ada:

| Kebutuhan | Dengan ffmpeg | Tanpa ffmpeg |
|---|---|---|
| Sinkron VO (batas kalimat/paragraf) | `silencedetect` | `scripts/vo-pauses.html` — buka di browser, pilih audio, salin `SEG`/`PARA`; hasilnya sama persis (Web Audio, tanpa instal) |

Read the full skill on GitHub

Details

Skill name: bang-motion
Repository: bangtutorial/bang-motion
License: MIT
Repo updated: 15 September 2026

FAQ

What does the Bang Motion skill do?

How do I install the Bang Motion skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add bangtutorial/bang-motion --skill bang-motion. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Bang Motion popular?

It lives in bangtutorial/bang-motion, which has 780 GitHub stars and 120 forks.

Related skills

Web Design

807

xiaopu-ai/web-design

Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词（任意组合），先产出一份标准化 DESIGN.md 设计规范，用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端：Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX 做一个""把这个截图/PRD 做成网页""做一个 landing page""出一份 design 规范"时触发。不用于后端、数据库、纯逻辑 bug 修复。

Frontend & Design81

Director

841

s1dashu/director

导演并制作多类型视频，从创意、研究、剧本、视觉开发、人物与声音设计、分镜和生成 Prompt，一直推进到素材生成、任务追踪与交付。适用于 Storytime Animation、Animated Explainer 与 Cinematic Drama，三个 Mode 均已完成实际作品验证。尚未建立专属 Mode 的类型不得冒充已支持流程。

Frontend & Design110

Power Design

748

ItsssssJack/power-design

Generate beautiful, on-brand HTML — presentation decks or full responsive websites — in any brand's design language, combining brand DNA extracted via Firecrawl with codified, research-backed design principles (20 rules for slides, 20 for the web).

Frontend & Design98

Revenue Centric Design

heliocosta-dev/revenue-centric-design

Playbook for designing SaaS and startup products that convert, retain, and monetize — landing pages & CRO, checkout & forms, onboarding/activation, churn reduction, pricing psychology, dashboards, behavioral-science tactics, feature discipline, positioning/ICP, go-to-market, and AI-era differentiation. Use when advising on product design, UX, conversion, landing pages, checkout, onboarding, trials, pricing, retention/churn, growth, or positioning for a startup or SaaS. Distilled from product designer Richard (@richardrx). Not for use on gambling, betting, or casino products.

Frontend & Design70

Color Expert

629

meodai/skill.color-expert

Use when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology. Use this skill whenever the user is choosing, comparing, generating, naming, converting, or explaining colors, even if they do not explicitly ask for "color theory.

Frontend & DesignIn 1 list39

Web Clone

1.1k

Jane-xiaoer/claude-skill-web-clone

网站复刻 / 克隆方法论。USE WHEN 用户说复刻网站、克隆网站、clone website、抄个站、仿站、照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。

Frontend & Design133

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.