# desain.md — Gaya Animated Explainer Flat 2D · Video Jualan UMKM

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

> Pakai desain-flat-2d.md. Buat iklan 15 detik untuk [GANTI: usaha/jasa], harga [GANTI: harga],
> tiga langkah [GANTI: langkah 1, 2, 3], ajakan [GANTI: cara pesan]. Kirim still frame kunci dulu.

Cara memakai:
1. Ganti nilai bertanda **[GANTI]** dengan data usaha Anda. Nilai yang sudah terisi boleh dipakai apa adanya.
2. Tulis siapa pemilik atau penjualnya (ibu berhijab, bapak berpeci, anak muda, dan sebagainya). Karakter
   digambar Claude dari bentuk sederhana, bukan dari foto orang sungguhan.
3. Punya warna logo? Ganti `teal` di bagian 2 dengan warna utama logo Anda.

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

Ilustrasi vektor datar yang bersih seperti video penjelasan perusahaan rintisan, tetapi hangat dan dekat:
latar mint terang dengan bulatan lembut, judul tebal dua baris, **karakter penjual yang hidup** (berkedip,
melambai, lalu mengacungkan jempol sambil tersenyum lebar), properti usaha (mesin cuci, etalase, gerobak),
dan **tiga langkah bernomor** dengan centang yang tergambar sendiri. Satu figur pendukung bergerak melintas
untuk menunjukkan layanan (kurir motor, pelanggan). Gerak halus 30 fps dengan pegas yang sedikit memantul.

Cocok untuk: jasa (laundry, servis, katering, les), alur pemesanan, produk yang perlu dijelaskan cara pakainya.
Kurang cocok untuk: produk yang dijual karena tampilannya (fesyen, makanan premium).

## 1. Format

| Hal | Nilai |
| --- | --- |
| Video utama | 1080 × 1920 (9:16), 30 fps, H.264, audio AAC 48 kHz |
| Durasi | 15 detik. Versi penjelasan 30 detik (satu langkah per 5 detik) |
| Turunan | 1080 × 1350 (4:5), 1920 × 1080 (16:9) untuk YouTube atau presentasi |
| Zona aman | Teks penting di y 220–1560 dan x 80–1000. Figur yang melintas boleh di bawah y 1560 |
| Akhir video | Komposisi lengkap ditahan minimal 1,5 detik |

## 2. Warna

| Token | Hex | Dipakai untuk |
| --- | --- | --- |
| `bg` | `#EAF6F4` | latar |
| `blob` / `floor` | `#D5EEEA` / `#CFE7E3` | bulatan latar, bayangan lantai, jalan |
| `teal` / `tealDeep` | `#12A594` / `#0B7F72` | warna utama: baris judul kedua, baju, ikon langkah, bayangan baju |
| `navy` / `navyShade` | `#1D2B53` / `#141F40` | judul, pil subjudul, rok/celana |
| `yellow` | `#FFC83D` | lencana harga, kilau, keranjang |
| `coral` | `#FF6B57` | centang, aksen, sepatu, motor |
| `white` / `panel` | `#FFFFFF` / `#DDEFF0` | kartu langkah, celemek, mesin |
| `hijab` / `hijabShade` / `hijabLight` | `#FF8A7A` / `#E8695A` / `#FFB0A3` | kerudung, lipatan, kilau |
| `skin` / `skinLight` / `skinShade` | `#C98E6B` / `#E8B08A` / `#CF9068` | kulit (tangan, wajah, bayangan) |

[GANTI] warna kulit, rambut, dan pakaian sesuai karakter Anda. Pakai minimal dua warna kulit bila ada lebih dari satu orang.

Aturan:
- **Tanpa garis tepi dan tanpa gradasi.** Bayangan dibuat dari bentuk warna yang lebih gelap (dua tona).
- Teks di atas `bg` memakai `navy` atau `teal`. Teks putih hanya di atas `navy` atau `teal`.
- Satu layar hanya punya satu elemen `yellow` besar (harga).

## 3. Tipografi

| Peran | Font | Bobot | Ukuran @1080 px |
| --- | --- | --- | --- |
| Judul (2 baris) | Poppins | 800 | 110–120 px, kapital, spasi −2 px; baris 2 warna `teal` |
| Pil subjudul | Poppins | 600 | 40–44 px, putih di atas `navy` |
| Label langkah | Poppins | 600 | 34–40 px |
| Harga | Poppins | 800 | 72–80 px |

- Muat font secara lokal (`@fontsource/poppins`). Maksimal 3 kata per label langkah.

## 4. Karakter & komponen

**Karakter utama (penjual)** — tinggi ±560 px, berdiri di samping properti usaha:
- Kepala bulat dengan wajah oval; mata elips gelap dengan **titik kilau putih**, alis tipis, hidung garis kecil,
  pipi merona (coral 40 %), mulut senyum. Ekspresi berubah: senyum tertutup → **tertawa lebar** (mulut terbuka
  dengan lidah) saat harga muncul.
- Pakaian berlapis: atasan + celemek dengan saku berlogo kecil + rok/celana. Bayangan dua tona di satu sisi badan.
- Tangan berbentuk sarung tangan bulat dengan ibu jari. Lengan dua ruas (bahu → siku → tangan) supaya gestur luwes.
- Untuk karakter berhijab: kerudung menutup kepala dan menjuntai ke dada, lipatan lebih gelap di bawah dagu,
  satu garis kilau di atas kepala.
- Properti di tangan (keranjang, nampan, kotak) supaya karakter terlihat sedang bekerja.

**Figur pendukung** (opsional, satu saja): skala ±0,75, melintas di bawah atau belakang, misalnya kurir motor
dengan kantong cucian, roda berputar, garis kecepatan, dan kepulan debu.

**Komponen:**
- Properti usaha besar (mesin cuci, etalase, oven) dengan satu bagian yang bergerak terus (drum berputar, asap).
- Pil subjudul `navy` radius penuh.
- **Kartu langkah** putih radius 32: angka kecil, ikon dalam lingkaran `teal`, label, centang `coral` di sudut.
- Lencana harga bulat `yellow`.
- Kilau bintang empat sudut yang berkedip; maksimal 3.

## 5. Gerak

| Gerak | Aturan |
| --- | --- |
| Judul | Tiap baris naik 90 px + memudar masuk, jeda 5 frame antarbaris (pegas 220/15) |
| Muncul dari lantai | Skala Y dari 0 dengan pegas (stiffness 260, damping 12), sedikit melebar saat masih pendek |
| Kartu & lencana | Meletup (stiffness 300, damping 13) |
| Centang | Tergambar dalam 7 frame, 6 frame setelah kartunya muncul |
| Karakter diam | Bernapas (skala Y ±0,8 %), kedip 3 frame tiap ±1,2 detik, kepala miring ±3,5° mengikuti lambaian |
| Gestur | Lengan bawah melambai ±20° (gelombang sinus), lalu berganti **jempol** saat harga muncul |
| Figur melintas | Kiri ke kanan dalam ±1 detik (ease in-out), memantul ±3 px, roda berputar |
| Properti hidup | Drum/kipas/asap bergerak terus selama video |

- Semua gerak dihitung dari nomor frame (di Remotion: `useCurrentFrame`, `spring`, `interpolate`), bukan animasi CSS.
- Jangan menggerakkan lebih dari tiga hal besar sekaligus. Mata penonton harus tahu ke mana melihat.

## 6. Struktur iklan 15 detik

| Detik | Isi | Di layar |
| --- | --- | --- |
| 0–2 | Pengait | Judul naik per baris + pil subjudul; [GANTI] bisa diawali masalah ("Cucian numpuk?") |
| 2–5 | Pemilik & usahanya | Properti dan karakter muncul dari lantai, karakter melambai |
| 5–11 | Tiga langkah | Kartu 1–3 meletup bergantian, centang tergambar; figur pendukung melintas di langkah 2 |
| 11–13 | Harga | Lencana harga meletup, karakter mengacungkan jempol dan tertawa |
| 13–15 | Ajakan | Pil ajakan: [GANTI] "Chat 08xx-xxxx-xxxx" atau "Klik link di bio" |

## 7. Suara

- **Efek:** desir saat judul masuk + ketukan kecil per baris, letupan gelembung saat objek muncul, denting kilau,
  centang yang terang, suara motor yang lewat (makin keras saat di tengah), denting saat jempol.
- **Musik:** latar korporat ceria ±130 bpm: arpeggio synth petik, kick lembut, tepuk tangan, bas bulat. Jauh di bawah efek.
- **Narasi (opsional):** ±30–35 kata untuk 15 detik, suara ramah. Buat dengan ElevenLabs satu kali jalan
  (±1 kredit per karakter di Eleven v3, dicek November 2026). Mulut karakter tidak perlu bergerak; cukup gestur.
- Semua efek dan musik dibuat dengan kode, jadi bebas masalah hak cipta. Loudness akhir sekitar −14 LUFS.

## 8. Gaya bahasa iklan

- Judul menyebut jenis usaha dengan kata yang dicari orang (Laundry Kiloan, Katering Harian, Servis Kulkas).
- Langkah ditulis sebagai kata kerja pendek dari sisi pelanggan: Chat → Dijemput → Wangi & rapi.
- Harga selalu dengan satuan (per kg, per porsi, per jam).

## 9. Aturan isi & hak

- Karakter digambar dari nol. Jangan meniru karakter kartun, maskot, atau ilustrasi milik pihak lain.
- Tidak meniru wajah orang sungguhan tanpa izin. Karakter mewakili usaha, bukan orang tertentu.
- Logo aplikasi (ojek daring, dompet digital) tidak ditampilkan; cukup ikon generik.

## 10. Workflow produksi

1. **Brief.** Isi semua [GANTI]: jenis usaha, karakter, tiga langkah, harga + satuan, cara pesan.
2. **Lembar karakter dulu.** Minta Claude merender satu still karakter (depan, ekspresi senyum dan tertawa)
   sebelum adegan dibuat. Karakter yang sudah disetujui dipakai ulang di semua video.
3. **Storyboard.** Tabel bagian 6 dengan isi nyata, disetujui sebelum kode ditulis.
4. **Still frame kunci:** judul lengkap, karakter melambai, tiga langkah lengkap, harga, akhir.
5. **Render uji 3 detik**, lalu render penuh. Gaya ini ringan: 3 detik ±12 detik di laptop 2 core.
6. **Suara** dibuat terakhir, menempel pada waktu gerak yang sudah final.

## 11. QC sebelum dikirim

- [ ] Tidak ada benda jatuh atau melintas yang terbaca sebagai bagian tubuh karakter (cek frame transisi).
- [ ] Wajah karakter terbaca di layar ponsel: mata, senyum, ekspresi berubah saat harga.
- [ ] Teks dan lencana tidak menabrak karakter atau properti.
- [ ] Harga, satuan, dan kontak benar.
- [ ] Figur melintas tidak menutupi teks penting.