# desain.md — Gaya Chat Story · 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-chat-story.md. Buat iklan 15 detik untuk [GANTI: produk], harga [GANTI], varian [GANTI],
> nama toko [GANTI]. Tulis dulu isi percakapannya untuk saya setujui.

Cara memakai:
1. Ganti nilai bertanda **[GANTI]** dengan data usaha Anda. Nilai yang sudah terisi boleh dipakai apa adanya.
2. Tulis pertanyaan yang **paling sering ditanyakan pembeli** Anda. Itulah pengait terbaik untuk gaya ini.
3. Warna kepala percakapan dan gelembung penjual diganti dengan warna merek 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

Penonton "mengintip" percakapan jual-beli di tampilan chat yang generik: pertanyaan pembeli muncul, status
berubah menjadi "sedang mengetik…", titik-titik memantul, jawaban penjual masuk, lalu **kartu produk** dengan
foto atau ilustrasi, nama, dan harga. Pembeli memesan, penjual mengonfirmasi dengan centang yang tergambar, dan
tanda baca berubah biru. Setiap gelembung meletup dari sudut ekornya. Rasanya seperti transaksi sungguhan,
sehingga penonton langsung paham cara memesan.

Cocok untuk: makanan rumahan, produk pre-order, jasa yang dipesan lewat chat, toko yang menjawab cepat.
Kurang cocok untuk: produk yang perlu banyak visual gerak (fesyen, kosmetik) kecuali kartunya berisi foto.

## 1. Format

| Hal | Nilai |
| --- | --- |
| Video utama | 1080 × 1920 (9:16), 30 fps, H.264, audio AAC 48 kHz |
| Durasi | 15 detik (5–6 gelembung). Sampel 3 detik di video Ep 3 sengaja dipercepat |
| Turunan | 1080 × 1350 (4:5): kepala chat dipendekkan |
| Zona aman | Gelembung di x 48–1032, y 285–1700. Kolom ketik di bawah (y 1730–1850) boleh tertutup tombol aplikasi |
| Waktu baca | Setiap gelembung tampil minimal (jumlah kata × 0,25 detik) + 0,8 detik sebelum gelembung berikutnya |

## 2. Warna

| Token | Hex | Dipakai untuk |
| --- | --- | --- |
| `head` | `#C8321F` | kepala percakapan [GANTI] warna merek |
| `chili` / `chiliDeep` | `#D93A2B` / `#A82418` | gelembung penjual, tombol kirim, harga |
| `bg` / `dot` | `#FFF4E6` / `#F6E3CC` | latar chat dengan pola titik |
| `white` | `#FFFFFF` | gelembung pembeli, kartu produk |
| `ink` | `#2A1A14` | teks di gelembung pembeli |
| `mute` | `#9B8574` | jam, label kecil, teks placeholder |
| `cream` / `gold` | `#FFE9C9` / `#E8B04A` | latar foto produk, tutup toples |
| `read` | `#BFE0FF` | centang dua yang sudah dibaca |

Aturan:
- **Jangan memakai hijau khas aplikasi chat tertentu**, logo, atau ikon mereka. Tampilan harus generik.
- Gelembung pembeli putih dengan teks gelap; gelembung penjual warna merek dengan teks putih (kontras ≥ 4,5:1).

## 3. Tipografi

| Peran | Font | Bobot | Ukuran @1080 px |
| --- | --- | --- | --- |
| Nama toko | Plus Jakarta Sans | 800 | 46 px |
| Status (online / sedang mengetik…) | Plus Jakarta Sans | 600 | 32 px |
| Isi gelembung | Plus Jakarta Sans | 600 (konfirmasi 800) | 52 px, maksimal 2 baris |
| Jam & centang | Plus Jakarta Sans | 600 | 28 px |
| Kartu produk: nama / harga | Plus Jakarta Sans | 800 | 50 px / 46 px |

- Font dimuat lokal. Hindari emoji: font emoji sering tidak ada saat render dan muncul sebagai kotak. Ganti dengan ikon SVG.

## 4. Komponen

- **Kepala percakapan:** tombol kembali, avatar bulat berisi ilustrasi produk atau logo, nama toko, status.
  Status berubah menjadi "sedang mengetik…" selama indikator mengetik tampil.
- **Gelembung:** radius 40, sudut ekor 10 (kiri bawah untuk pembeli, kanan bawah untuk penjual), bayangan lembut,
  jam kecil dan centang dua di sudut kanan bawah.
- **Indikator mengetik:** gelembung penjual berisi tiga titik putih yang memantul bergantian.
- **Kartu produk:** gelembung penjual berisi kartu putih: foto/ilustrasi produk (tinggi 320 px), nama produk,
  pil harga merah, keterangan varian.
- **Gelembung konfirmasi:** ikon centang dalam lingkaran yang tergambar, teks tebal.
- **Kolom ketik:** pil putih "Ketik pesan…" + tombol kirim bulat.
- **Label tanggal** "Hari ini" di atas percakapan.

## 5. Gerak

| Gerak | Aturan |
| --- | --- |
| Gelembung masuk | Pegas (stiffness 420, damping 19) dari skala 0,6 di sudut ekornya, naik 40 px, memudar masuk |
| Titik mengetik | Naik-turun 8 px, fase berselang 3 frame |
| Centang konfirmasi | Tergambar dalam 6 frame, mulai 3 frame setelah gelembung muncul |
| Centang dibaca | Berubah biru tepat saat pembeli membalas |
| Gulir | Bila gelembung baru melewati y 1700, seluruh percakapan bergeser naik dengan ease-out 10 frame |
| Ajakan akhir | Kartu ajakan meluncur dari bawah menutupi kolom ketik |

## 6. Struktur iklan 15 detik

| Detik | Isi [GANTI] |
| --- | --- |
| 0–2,5 | Pertanyaan pembeli yang paling umum ("Kak, sambal bawangnya ada?") |
| 2,5–4 | Status "sedang mengetik…" + titik memantul |
| 4–6 | Jawaban penjual + varian ("Ada, Kak! Level 1 sampai 5") |
| 6–9 | Kartu produk dengan harga |
| 9–11 | Pembeli memesan ("Mau 2 ya, Kak. Level 3!") |
| 11–13 | Konfirmasi penjual + info kirim ("Siap! Pesanan dicatat, kirim sore ini") |
| 13–15 | Kartu ajakan: nomor/akun, jam buka |

## 7. Suara

- **Efek:** dua nada naik saat pesan masuk, desir naik saat pesan terkirim, ketukan papan ketik halus selama mengetik,
  denting lembut saat konfirmasi.
- **Musik:** lo-fi santai ±90 bpm: akor piano elektrik, bas lembut, hi-hat tipis.
- **Narasi (opsional):** sebaiknya tidak dibacakan per gelembung. Cukup satu kalimat ajakan di akhir (ElevenLabs, satu kali jalan).
- Semua efek dan musik dibuat dengan kode. Loudness akhir sekitar −14 LUFS.

## 8. Gaya bahasa iklan

- Bahasa chat yang sopan dan wajar: "Kak", "Siap", tanpa singkatan berlebihan.
- Pertanyaan pembeli = keraguan nyata (stok, varian, ongkir, jam kirim). Jawaban penjual = cepat, jelas, ramah.
- Harga ditulis lengkap di kartu (Rp25.000), bukan di gelembung teks.

## 9. Aturan isi & hak

- **Percakapan adalah contoh alur pemesanan, bukan testimoni.** Jangan menulis pujian pembeli ("enak banget, langganan!")
  seolah kutipan asli, kecuali memang diambil dari chat nyata dan pembelinya sudah mengizinkan.
- Nama dan nomor pembeli tidak ditampilkan. Nama toko dan produk adalah milik Anda.
- Tampilan chat generik: tidak meniru tata letak, warna, atau logo aplikasi tertentu.

## 10. Workflow produksi

1. **Naskah percakapan dulu** (tabel bagian 6), disetujui sebelum kode ditulis. Hitung waktu baca tiap gelembung.
2. **Aset:** foto produk berlatar polos (atau ilustrasi), logo/avatar toko.
3. **Still frame kunci:** pertanyaan pertama, sedang mengetik, kartu produk, konfirmasi, ajakan.
4. **Render uji penuh** (ringan: 3 detik ±14 detik di laptop 2 core).
5. **Suara** mengikuti waktu tiap gelembung.

## 11. QC sebelum dikirim

- [ ] Tidak ada gelembung yang tertutup kolom ketik atau tombol aplikasi (cek frame terakhir).
- [ ] Tidak ada kata tunggal yang jatuh sendirian di baris kedua gelembung.
- [ ] Setiap gelembung tampil cukup lama untuk dibaca.
- [ ] Tidak ada emoji yang berubah menjadi kotak.
- [ ] Harga, varian, dan kontak benar; tidak ada testimoni karangan.