Bang Motion
Membangun motion graphic sinematik di browser (promo video, opener, intro, bumper...
Install
npx skills add bangtutorial/bang-motion --skill bang-motion -g -a claude-code -y- Repository
- bangtutorial/bang-motion960
- Category
- Design
- Updated
- 2mo ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
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 web-nya, bahkan bila mereka tidak menyebut kata "motion graphic" secara eksplisit. Juga gunakan bila user mengeluh hasil animasi web "seperti PPT/presentasi" dan ingin lebih sinematik, atau ingin merender animasi web menjadi file video MP4, atau ingin explainer kartun/animasi dibangun LANGSUNG di After Effects lewat bridge/MCP Higgsfield.
Bang Motion, motion graphic web yang bukan PPT
v1.19.0 · by Bang Tutorial · 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) |
| Durasi/format audio | ffprobe | angka DUR dari vo-pauses.html; browser memutar wav/mp3/m4a/ogg langsung |
| Export MP4 | gabung PNG dari export-frames.mjs | tidak ada MP4, tawarkan instal satu perintah (winget install Gyan.FFmpeg / brew install ffmpeg) atau rekam layar |
| Mempelajari video referensi (ekstrak frame) | fps= + tile= | minta user mengirim screenshot di detik kunci, atau buka videonya di browser dan potret pada detik tertentu |
Tanpa ffmpeg alur explainer tetap lengkap sampai sinkron VO; hanya MP4 yang butuh instalasi.
