Bang Motion — motion graphic web yang bukan PPT

Que fait Bang Motion — motion graphic web yang bukan PPT ?

v1.19.0 · oleh 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.

Player — tidak ada, autoplay, loop

Default deliverable: tanpa panel/player apa pun di layar, langsung memutar saat dibuka, dan mengulang dari awal saat selesai (onComplete → play(0); bila ada suara, audio ikut diulang). Kontrol tersembunyi: R ulang, Space jeda. Panel scrub/jam hanya muncul dengan ?debug=1 (alat review), dan ?clean=1 menahan autoplay untuk export. Ada suara? Coba play() langsung; bila diblokir browser, tahan di frame 0 dan mulai pada klik pertama — tanpa teks "ketuk untuk mulai". Ini sudah tertanam di kedua starter.

Larangan struktural — uji PPT yang bisa diperiksa mekanis

Model lain (dan kamu, bila lelah) akan jatuh ke pola ini walau sudah membaca hukum di bawah. Sebelum menyerahkan, cek KODE, bukan perasaan:

1. grep -c "class=\"scene\"\|<section" index.html — bila ≥ 3 adegan berupa <section> yang dinyalakan-dimatikan dengan autoAlpha/opacity → itu slide deck. Adegan harus berganti karena DUNIA/KAMERA bergerak (kamera bergerak, whip ke sudut lain, push-through, latar berganti), bukan karena section di-fade. Pengecualian yang sah: kartun panggung (references/kartun-panggung.md) memakai cut/geser 96 px antar panggung — boleh, karena tiap panggung hidup penuh (≥10 benda beraksi), bukan gambar diam yang di-fade.

2. Ada benang merah visual yang bertahan: satu subjek (aksi kontinu) ATAU satu dunia kolase/kertas/putih yang disusuri kamera (kartun, foto, katalog, sketsa). Foto full-bleed berganti-ganti tanpa dunia bersama → PPT. Satu gambar + satu kalimat per adegan, berganti tiap adegan → tetap slideshow walau kameranya bergerak: tiap adegan 3–5 elemen yang masuk bertahap per frasa (explainer.md "Satu adegan = 3–5 elemen").

3. Per adegan hitung node teks: eyebrow/kicker + judul + body/kredit = 3 tingkat → PPT. Maksimum dua: satu angka/kalimat besar + satu label dunia. Dokumen/stempel/blok tanggal berisi ≤ 3 baris pendek dihitung objek, bukan tingkat teks.

4. Ken Burns (scale 1.0→1.05 pada foto) sebagai satu-satunya gerak → PPT. Gerak tiap detik harus datang dari BAHASA GERAK LATAR yang dipilih di style brief dari menu techniques.md §7c (kamera bernapas di latar bertekstur, gradien berpindah, blob mengambang, grain hidup, sapuan cahaya per segmen, bentuk besar berputar lambat, partikel naik, grid bernapas, teks hantu bergeser, Ken Burns + parallax…). Batang/garis/ potongan yang melintas ke samping ("lane", "range", "streak", hujan partikel horizontal) SUDAH dipakai dua proyek berturut-turut dengan nama berbeda — itu bukan default; hanya bila tema memang kecepatan/aliran, dan tidak boleh dua proyek berturut-turut.

5. Transisi hanya fade + scale bump + light leak di semua cut → template PPT. Whip ke sudut lain, cut ke instrumen (peta/speedometer/profil), push-through.

6. Explainer dimulai dari starter GAYANYA: starter-explainer-kartun, -jurnalisme, -katalog, -sketsa (mode kolase: kamera menyusuri aset diam), starter-explainer (aksi kontinu: dunia mengalir), atau starter-explainer-panggung (kartun panggung: satu panggung per adegan, rig sendi, kamera hanya di dalam panggung). Yang kolase satu rig; yang panggung rignya lain. BUKAN dari assets/starter-opener.html (opener teks), dan bukan dari nol.

7. Miniatur adalah slide. Kamera zoom < 1,08 sehingga rumah sebesar ibu jari dan tanah kosong mengisi separuh layar → PPT walau semua bergerak. Dunia dipecah jadi panggung seukuran frame, bukan satu peta besar yang dijelajahi (kartun-panggung.md Hukum 1).

8. Kerangka template (opener/promo). Cek rundown dan kode: adegan pertama berupa teks yang diperbesar lalu keluar ke kiri; tiga tile/kartu fitur sejajar; kotak input/searchbar yang diketik; urutan hook → fitur → fitur → janji → logo → CTA. Dua atau lebih tanpa tuntutan konsep → template, walau kulitnya baru. Pilih ulang kerangka dari references/opener-konsep.md.

Gagal satu poin saja → rombak sebelum ditunjukkan ke user.

Jenis pekerjaan yang dicakup

Skill ini untuk motion graphic web secara UMUM. Explainer hanya salah satu jenis — ia punya dokumen sendiri karena strukturnya beda, bukan karena ia yang utama.

Starter dinamai menurut kategorinya: starter-opener.html untuk opener, promo, bumper, intro, dan kinetic typography; starter-explainer-*.html untuk explainer, dengan akhiran mode/gaya (-kartun, -jurnalisme, -katalog, -sketsa = kolase; tanpa akhiran = aksi kontinu; -panggung = kartun panggung). Kartun panggung adalah mode explainer (gaya 6), bukan kategori sendiri: tujuannya tetap menjelaskan dengan VO, yang berbeda hanya cara produksinya.

Jenis	Durasi lazim	Ciri	Resep
Opener / promo produk	25–40 dtk	satu konsep dari menu (kerangka lahir dari produk, bukan urutan baku), satu momen istimewa, penutup brand	references/opener-konsep.md + alur kerja di bawah + references/techniques.md
Bumper / ident / logo sting	3–8 dtk	logo build-on, satu gerak tanda tangan, selesai sebelum penonton sadar	techniques.md (logo build-on, light leak)
Intro / outro kanal	5–12 dtk	nama kanal + tanda tangan gerak yang sama tiap episode	alur kerja di bawah
Kinetic typography / lirik	15–60 dtk	teks adalah subjek; split per kata/huruf; ritme mengikuti audio	techniques.md (split + blur berarah, pan 3D per kata)
Title / lower third / bumper segmen	2–6 dtk	elemen kecil di atas footage, masuk-keluar bersih, latar transparan	techniques.md
Explainer / video penjelasan	30–90 dtk	fakta bersumber, entitas tampil, sudut pandang berganti, lima gaya	references/explainer.md + starter per gaya

Explainer dan karakter: baca sebelum menentukan shot

Untuk explainer kartun edukasi flat berkarakter (gaya keenam, kartun panggung), atau revisi yang terasa seperti slideshow/miniatur, baca references/kartun-panggung.md: satu panggung per adegan, zoom 1,08–1,95, kontinu di dalam panggung dan cut/geser 96 px di antaranya, rig sendi dengan transform manual, nol caption, palet flat cerah. Bedakan kalimat, beat visual, framing, dan pergantian panggung. Untuk membangunnya langsung di After Effects, baca references/ae-bridge-higgsfield.md. Pedoman khusus explainer ini memperjelas aturan opener di bawah; contoh font, jumlah scene, dan efek bukan resep universal.

Hukum #1 — Ini video, bukan slide

Penyakit paling umum: model menyusun adegan seperti slide — judul + sub-judul

• body copy + deretan badge. Itu langsung terbaca "PPT" dan akan ditolak.

Aturan kerasnya:

• Untuk opener: satu kalimat pendek + maksimal satu objek utama per adegan. Tidak ada kicker ("01 — FITUR"), sub-judul, paragraf keterangan, chip/badge fitur, atau metadata teknis (nama package, URL panjang). Chip, tombol, dan label yang merupakan bagian UI produk yang sedang dipakai tidak termasuk.
• Informasi baru = respons visual baru. Pada explainer, ubah keadaan/aksi di dunia yang sama bila masih berhubungan; pergantian kalimat tidak wajib mengganti shot.
• Daftar poin diganti visual, bukan otomatis tiga tile. Pilih cara dari menu fitur di references/opener-konsep.md (satu fitur didemokan, kata berganti, objek bertransformasi, kartu dikocok, grid tile…); dua opener berturut-turut tidak memakai cara yang sama.
• Adegan harus hidup. Kamera boleh menetap saat objek membawa aksi. Gerakkan kamera untuk mengikuti atau mengungkap sesuatu; jangan mengandalkan teks fade/slide di atas latar diam, atau pan/zoom berulang di semua segmen.
• "Zoom in-out" = ukuran shot, bukan napas kamera. Bila video terasa statis atau user meminta zoom, kamera mendekat ke elemen yang sedang bercerita (medium close-up / close-up) lalu mundur ke wide mengikuti ketukan isi; napas beberapa persen hampir tak terlihat (techniques.md §3b).

Baca references/anti-ppt.md SEBELUM mendesain adegan — berisi daftar pelanggaran nyata beserta perbaikannya.

Hukum #2 — Deterministik atau mati

Tidak ada satu baris pun yang membaca jam sistem. Semua visual adalah fungsi murni dari tl.time() (waktu timeline GSAP): spektrum, angka berjalan, partikel, getar kamera (sinus frekuensi tinggi, bukan Math.random()), posisi objek yang "mengalir" (tween JARAK, bukan akumulasi kecepatan per frame). Konsekuensinya: scrub akurat seperti timeline After Effects, dan render frame-by-frame ke MP4 menghasilkan gambar identik setiap kali.

Hukum #3 — Gaya lahir dari tema, bukan dari starter, bukan dari referensi

Kegagalan yang umum: opener untuk produk lain keluar dengan kulit PERSIS opener produk sebelumnya — gelap, aksen biru, glow, nebula, font yang sama — karena model mengambil gayanya dari starter. Animasinya bisa bagus, tetap gagal: opener adalah wajah produk, dan dua produk tidak boleh berwajah sama.

1. Style brief dulu, kode belakangan. Sebelum menyentuh starter, tulis enam baris ini dan tunjukkan ke user bersama rundown adegan:
   • tema/produk + tiga kata sifat perasaan yang ingin ditinggalkan;
   • konsep & sidik jari struktur (opener/promo): tiga kandidat konsep dari references/opener-konsep.md, satu dipilih dengan alasan dari produk, lalu konsep · jumlah adegan · objek utama tiap adegan · pembuka · penutup;
   • palet: satu warna utama DARI brand/tema (logo, ikon aplikasi, situs, kemasan), satu warna latar, satu aksen — sebutkan hex DAN sumber tiap warna; warna yang bukan dari brand ditulis "turunan: alasan";
   • font display yang punya karakter sesuai perasaan itu (bukan Poppins/Inter/Roboto/Montserrat/Arial) + font pendamping; pengecualian: konsep klaim → cara → hasil memakai font UI produk sendiri (references/opener-konsep.md);
   • penekanan teks: tanpa sorotan kata, atau satu bentuk sorotan (sebutkan) — sorotan kata OPSIONAL, bukan bawaan setiap opener;
   • bahasa latar per segmen: satu arah dari tabel "Arah gaya" untuk semua, atau rencana pergantian (segmen mana ganti, ke apa, kenapa, dipicu apa);
   • tanda tangan gerak: satu jenis gerak yang diulang sebagai identitas (wipe objek, roll 3D per kata, kertas terbang, garis yang menggambar, blok warna menabrak tepi…);
   • gerak latar: satu bahasa dari menu techniques.md §7c — bukan hal yang sama dengan tanda tangan gerak, dan bukan otomatis "benda melintas";
   • permukaan latar: dari menu §7d (gradien/cahaya/tekstur/grainy gradient, ≥ 2 lapis) — bukan flat;
   • gaya render objek: satu keluarga dari menu techniques.md §7e (flat, clay, glossy, kaca, isometrik, realistis, garis neon…);
   • aset foto (bila konsep memakai foto orang/tempat/produk): sumbernya — foto user, generate lewat MCP Higgsfield, atau stok berlisensi — DITANYAKAN ke user, plus daftar shot per babak (references/opener-konsep.md "Foto dalam opener");
   • transisi: tentukan batas mana yang memerlukan efek dan mana yang cukup cut; pilih dari menu §4c sesuai konteks, bukan wajib dua jenis atau wajib 3D;
   • satu momen istimewa (di mana efek termahal dipakai, sekali).
2. Starter adalah arsitektur, bukan gaya. Warna abu-abu, font sistem, dan latar WebGL di assets/starter-opener.html adalah PLACEHOLDER. Kalau salah satunya masih terlihat di hasil, gaya belum diturunkan. Latar WebGL (nebula, debu, grid, bloom) hanya satu bahasa latar dari delapan; matikan bila arah gayanya lain.
3. Referensi = ritme, bukan kulit. Dari video referensi ambil: durasi per shot, jenis transisi, hierarki atensi, energi, bahasa gerak. JANGAN ambil: palet, font, tekstur, tata letak, bentuk ornamen, kalimat, urutan adegan, dan momen unik (pembuka/penutup khas, gimmick satu kali). "Buatkan seperti ini" berarti "seenergik ini", b

…

[truncated for translation]