# desain.md — Gaya Kinetic Typography · Video Promo UMKM

Aturan gaya untuk membuat video promo pendek dengan Claude + Remotion.
Simpan file ini di folder project Anda, lalu minta Claude:

> Pakai desain-kinetic-type.md. Buat promo 10 detik: produk [GANTI], penawaran [GANTI: diskon/gratis ongkir],
> tanggal/batas [GANTI], ajakan [GANTI]. Tulis dulu daftar kata per ketukan untuk saya setujui.

Cara memakai:
1. Ganti nilai bertanda **[GANTI]** dengan data promo Anda. Nilai yang sudah terisi boleh dipakai apa adanya.
2. Gaya ini hampir hanya berisi huruf. Kekuatannya ada di **pilihan kata** dan **ragam gerak skala** (bagian 5).
3. Warna merek bisa menggantikan `pink`; pertahankan satu warna gelap dan satu warna terang untuk kontras.

Template oleh KolamDigital · versi 1.0, November 2026. Gaya lain dan versi terbaru: kolamdigital.com/prompt-motion
Bebas dipakai dan diubah untuk usaha sendiri maupun klien, tetapi tidak boleh dijual ulang sebagai produk template.

---

## 0. Ringkasan gaya

Huruf kondensasi yang sangat tebal memenuhi layar, **satu kata atau satu angka per ketukan** (150 bpm, 12 frame),
dan warna latar berganti di setiap ketukan lewat bukaan melingkar dari tengah. Yang membuatnya tidak monoton:
**setiap ketukan memakai gerak skala yang berbeda.** Ada kata yang jatuh dari ukuran raksasa lalu mengecil, ada
yang tumbuh dari titik sampai meluap, ada yang menembus kamera, ada huruf yang meletup bergantian, ada angka yang
menghitung naik, ada yang meregang pipih lalu memantul. Setiap ketukan juga diberi hentakan kamera, gelombang
kejut, dan pita kain yang melambai di latar. Di akhir, semua kata mengunci menjadi satu poster promo yang
**bernapas** mengikuti ketukan.

Cocok untuk: promo tanggal kembar, diskon, peluncuran produk, pengumuman buka cabang, fesyen.
Kurang cocok untuk: penjelasan cara pakai, produk yang dijual karena tampilannya (tanpa foto produk).

## 1. Format

| Hal | Nilai |
| --- | --- |
| Video utama | 1080 × 1920 (9:16), 30 fps, H.264, audio AAC 48 kHz |
| Durasi | 6–10 detik (5–8 ketukan + poster akhir minimal 1 detik). Versi 15 detik: dua rangkaian ketukan |
| Turunan | 1080 × 1080 dan 1920 × 1080: ukuran huruf mengikuti lebar layar |
| Zona aman | Kata utama di y 500–1400 dan x 80–1000 |
| Tempo | 150 bpm = 1 ketukan per 12 frame. Boleh 120 bpm (15 frame) untuk produk yang lebih kalem |

## 2. Warna

| Token | Hex | Dipakai untuk |
| --- | --- | --- |
| `ink` | `#151515` | latar gelap, teks di atas kuning/krem |
| `pink` | `#FF3D8B` | warna utama [GANTI] dengan warna merek |
| `yellow` | `#FFE45C` | latar angka penting, stiker tanggal |
| `cream` | `#FFF1E6` | latar poster akhir, teks di atas pink/hitam |
| `lilac` | `#B79CFF` | pita kain di latar, tidak untuk teks |

Urutan latar per ketukan: `ink` → `pink` → `yellow` → `ink` → `pink` → poster `cream`.
Pasangan teks/latar yang boleh: krem di atas hitam/pink, hitam di atas kuning/krem, kuning di atas hitam.

## 3. Tipografi

| Peran | Font | Ukuran @1080 px |
| --- | --- | --- |
| Kata per ketukan | Anton (atau Bebas Neue) | 250–360 px, kapital; kata panjang dipaksa selebar 880–940 px |
| Angka utama (diskon, tanggal) | Anton | 400–500 px, ketukan sendiri |
| Poster akhir | Anton | 190–230 px, satu kalimat diberi blok pink |
| Baris kecil (HANYA SEHARI) | Anton | 60–70 px, spasi huruf lebar |

- Maksimal 2 kata per ketukan. Angka selalu mendapat ketukan sendiri dan ukuran terbesar.
- Font dimuat lokal (`@fontsource/anton`).

## 4. Komponen

- **Bukaan latar:** lingkaran warna baru membesar dari tengah dalam 4 frame di awal setiap ketukan.
- **Gelombang kejut:** cincin tipis membesar dan memudar dalam 10 frame setiap ketukan.
- **Pita kain:** dua pita lebar bergelombang di atas dan bawah, opasitas 15–20 %, bergerak terus (tema kain; ganti
  dengan bentuk lain yang mewakili produk Anda).
- **Ledakan bintang** di belakang angka; **garis bawah** kuning di bawah tanggal.
- **Penanda ketukan:** titik kecil di bawah (y 1700) yang terisi satu per satu.
- **Poster akhir:** baris produk, blok pink berisi penawaran, stiker kuning miring berisi tanggal, baris kecil batas waktu.

## 5. Gerak — ragam skala per ketukan

Jangan pakai satu jenis masuk untuk semua kata. Putar enam pola ini:

| Pola | Cara | Contoh |
| --- | --- | --- |
| **Geser + tumbuh** | Baris 1 menyelinap dari samping dengan miring −18° → 0; baris 2 tumbuh dari 8 % ke 100 % dengan pegas memantul | HIJAB / VOAL |
| **Besar → kecil (hantam)** | Mulai 4,5× (keluar layar), pegas kuat (stiffness 420, damping 30) ke 1×, lalu terus mengecil pelan ke 0,93× | DISKON |
| **Kecil → besar + hitung** | Tumbuh dari 5 % dengan kebablasan (stiffness 300, damping 12); angka menghitung 0 → nilai dalam 7 frame | 30% |
| **Huruf meletup** | Tiap huruf masuk sendiri, jeda 1,5 frame, dari bawah sambil berputar ±20°, lalu seluruh kata membesar 0,8 → 1,25× | CUMA |
| **Regang-pipih** | Masuk 2,6× lebar dan 0,25× tinggi, memantul ke normal (pegas 380/10), lalu menjauh pelan ke 0,9× | 12.12 |
| **Kunci jadi poster** | Tiap bagian datang dari skala berbeda (2,4× → 1, 0,1× → 1, 3,2× → 1), jeda 3 frame | poster akhir |

Cara keluar juga diputar: **menembus kamera** (membesar ke 4× + memudar dalam 3 frame), **mengecil ke titik**,
atau **potong langsung** saat ketukan berikutnya jatuh.

Di setiap ketukan: kamera menghentak (skala 1,06 → 1 dalam ±6 frame) dan bergetar maksimal 16 px yang meluruh 6 frame.
Poster akhir **bernapas**: membesar 2,5 % di setiap ketukan, stiker tanggal 10 %.

## 6. Struktur

| Ketukan (12 frame) | Isi [GANTI] |
| --- | --- |
| 1 | Nama produk (2 kata, 2 baris) |
| 2 | Kata penawaran (DISKON, GRATIS, BARU) |
| 3 | Angka (30%, 50RB, 2+1) |
| 4 | Kata penghubung yang menahan napas (CUMA, MULAI, KHUSUS) |
| 5 | Tanggal atau batas waktu |
| 6+ | Poster akhir ≥ 1 detik + ajakan (link di bio, kode promo) |

## 7. Suara

- **Musiknya adalah ketukan itu sendiri:** kick di setiap ketukan, snare di tengah ketukan, hi-hat tiap setengah.
- **Efek sesuai pola:** desir saat menyelinap, debuk berat saat hantam, nada turun saat mengecil, detik-detik kecil
  saat angka menghitung, letupan bernada naik untuk tiap huruf, "boing" untuk regang-pipih, riser sebelum poster,
  hantaman besar saat poster mengunci, desir tiap bagian poster.
- **Narasi (opsional):** biasanya tidak perlu. Bila dipakai, satu kalimat pendek di poster akhir (ElevenLabs, satu kali jalan).
- Semua dibuat dengan kode. Loudness akhir sekitar −14 LUFS.

## 8. Gaya bahasa iklan

- Kata pendek dan konkret. Satu kata harus bisa dibaca dalam 0,4 detik.
- Angka diskon dan tanggal harus sesuai kenyataan. Bila ada syarat, tulis singkat di poster (mis. "selama stok ada").

## 9. Aturan isi & hak

- Jangan memakai logo marketplace atau nama acara belanja milik platform sebagai elemen desain; cukup tanggalnya.
- Font yang dipakai harus berlisensi bebas (Anton, Bebas Neue: SIL Open Font License).

## 10. Workflow produksi

1. **Daftar kata per ketukan** dulu (tabel bagian 6), disetujui sebelum kode ditulis.
2. **Tentukan pola gerak tiap ketukan** dari tabel bagian 5; dua ketukan berurutan tidak boleh memakai pola yang sama.
3. **Still frame** di puncak setiap ketukan (frame ke-6 tiap ketukan) dan poster akhir.
4. **Render uji penuh** (ringan: 3 detik ±14 detik di laptop 2 core).
5. **Suara** dibuat dari daftar ketukan yang sama, supaya kick jatuh tepat di frame 0, 12, 24, dan seterusnya.

## 11. QC sebelum dikirim

- [ ] Tidak ada dua ketukan berturut-turut dengan pola gerak yang sama.
- [ ] Setiap kata terbaca di frame tengah ketukannya (tidak terpotong tepi layar kecuali sengaja meluap sesaat).
- [ ] Kontras teks/latar sesuai pasangan di bagian 2.
- [ ] Angka diskon dan tanggal benar.
- [ ] Kick tepat di awal ketukan (cek dengan memutar per frame).