# desain.md — Gaya Whiteboard Doodle · 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-whiteboard.md. Buat iklan 15 detik untuk [GANTI: jasa/produk], tiga poin layanan [GANTI],
> harga [GANTI], kontak [GANTI]. Kirim still frame kunci dulu sebelum render MP4.

Cara memakai:
1. Ganti nilai bertanda **[GANTI]** dengan data usaha Anda. Nilai yang sudah terisi boleh dipakai apa adanya.
2. Sebut satu benda yang mewakili usaha Anda (AC, kulkas, motor, kue, buku). Benda itu digambar sebagai garis spidol.
3. Gaya ini paling meyakinkan untuk **jasa**: terasa seperti teknisi yang menjelaskan langsung di papan.

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

Papan tulis putih yang hangat dengan bingkai aluminium tipis di atas dan bawah serta bekas hapusan samar.
**Spidol menggambar sendiri:** judul ditulis tangan, benda utama digambar garis demi garis, aliran atau detail
diberi warna biru, poin layanan dicentang hijau satu per satu, dan harga ditulis merah lalu **dilingkari**.
Ujung spidol selalu menempel di ujung goresan dan berpindah cepat di antara goresan, sehingga penonton merasa
sedang melihat seseorang menjelaskan. Garisnya sedikit bergetar seperti tangan sungguhan.

Cocok untuk: jasa servis, les dan kursus, konsultan, perbandingan sebelum-sesudah, penjelasan paket harga.
Kurang cocok untuk: produk yang dijual karena warna dan tampilannya (makanan, fesyen).

## 1. Format

| Hal | Nilai |
| --- | --- |
| Video utama | 1080 × 1920 (9:16), 30 fps, H.264, audio AAC 48 kHz |
| Durasi | 15 detik. Versi penjelasan 30–45 detik dengan kamera menggeser ke bawah papan |
| Turunan | 1920 × 1080 (16:9) untuk YouTube: papan melebar, susunan kiri-kanan |
| Zona aman | Tulisan penting di y 300–1700 dan x 120–960 |
| Akhir video | Spidol keluar layar, papan lengkap ditahan minimal 1,5 detik |

## 2. Warna

| Token | Hex | Dipakai untuk |
| --- | --- | --- |
| `board` | `#FBFAF6` | papan |
| `frame` / `frameHi` | `#C9CDD2` / `#E6E8EB` | bingkai aluminium |
| `ghost` | `#EFEEE8` | bekas hapusan (diburamkan, opasitas 55 %) |
| `black` | `#1E1E1E` | spidol utama: judul, benda, teks poin |
| `blue` | `#1F5FD1` | spidol kedua: subjudul, garis bawah, aliran, detail |
| `green` | `#1E9E5A` | hanya centang |
| `red` | `#D7263D` | hanya harga dan lingkarannya |

Aturan:
- Maksimal 4 warna spidol. Merah hanya untuk satu hal per layar.
- Tidak ada isian warna besar; semua berupa garis. Pengecualian: layar kecil di benda (kotak biru kecil).

## 3. Tipografi

| Peran | Font | Bobot | Ukuran @1080 px |
| --- | --- | --- | --- |
| Judul | Caveat | 700 | 190–200 px, kapital |
| Subjudul | Caveat | 600 | 74–80 px, biru |
| Poin layanan | Caveat | 600 | 84–90 px |
| Harga | Caveat | 700 | 140–150 px, merah |

- Font tulisan tangan dimuat lokal (`@fontsource/caveat`). Maksimal 4 kata per baris.

## 4. Goresan & komponen

- **Garis tangan:** tebal 9–12 px, ujung bulat, titik-titik garis diberi getaran acak ±1,5–3 px (acak berbenih).
- **Tekstur tinta:** filter noise yang membuat bolong-bolong kecil, seperti spidol yang mulai kering.
- **Benda utama:** digambar dari kotak bersudut bulat + 2–4 garis detail. Tidak perlu realistis; harus langsung dikenali.
- **Spidol:** badan putih, tutup dan cincin berwarna sesuai tinta yang sedang dipakai, miring −35°.
- **Lingkaran harga:** elips tangan yang sedikit lebih dari satu putaran (ujungnya bertumpuk).
- **Bekas hapusan:** 1–2 elips samar yang diburamkan, supaya papan terasa pernah dipakai.

## 5. Gerak

| Gerak | Aturan |
| --- | --- |
| Garis | Tergambar dengan `strokeDashoffset` (panjang path dinormalkan 1), kecepatan ±1,5 px per frame per px tebal |
| Tulisan | Terbuka dari kiri ke kanan lewat clip, ujung spidol mengikuti tepi clip dan naik-turun mengikuti huruf |
| Ujung spidol | Posisi diambil dari titik di sepanjang path (`getPointAtLength`); warna spidol ikut warna goresan aktif |
| Pindah goresan | Spidol melompat ke awal goresan berikutnya dalam 2–4 frame |
| Masuk & keluar | Spidol masuk dari kanan bawah di frame awal, keluar ke kanan bawah setelah goresan terakhir |
| Kamera | Diam untuk 15 detik. Untuk versi panjang: geser pelan ke bagian papan berikutnya (ease in-out 20 frame) |

- Tidak ada pop, pantulan, atau zoom. Satu-satunya "efek" adalah tangan yang menulis.

## 6. Struktur iklan 15 detik

| Detik | Isi | Di layar |
| --- | --- | --- |
| 0–2,5 | Pengait | Judul ditulis + garis bawah biru + subjudul [GANTI] "datang ke rumah" |
| 2,5–6 | Benda/masalah | Benda utama digambar, detail biru (aliran dingin, asap, retak) |
| 6–10 | Tiga poin layanan | Centang hijau lalu teks, satu per satu [GANTI] |
| 10–13 | Harga | "mulai 75rb" ditulis merah lalu dilingkari |
| 13–15 | Ajakan | Nomor kontak ditulis + panah ke arahnya, spidol keluar |

## 7. Suara

- **Efek:** decit spidol sepanjang setiap goresan (berbunyi hanya saat menulis), ketukan tutup spidol di akhir.
- **Musik:** gitar petik sangat pelan ±100 bpm. Gaya ini paling enak dengan narasi.
- **Narasi (disarankan):** ±35 kata untuk 15 detik, nada seperti teknisi yang menjelaskan. ElevenLabs satu kali
  jalan (±1 kredit per karakter di Eleven v3, dicek November 2026). Goresan disinkronkan dengan kata yang diucapkan.
- Semua efek dan musik dibuat dengan kode. Loudness akhir sekitar −14 LUFS.

## 8. Gaya bahasa iklan

- Seperti orang menjelaskan: kata kerja di depan ("Cuci unit + filter", "Cek & isi freon").
- Harga "mulai …" hanya bila memang ada harga terendah itu. Garansi ditulis dengan durasinya.

## 9. Aturan isi & hak

- Benda digambar dari nol; logo merek AC/kulkas/motor tidak ditampilkan.
- Klaim garansi dan sertifikasi hanya bila benar.

## 10. Workflow produksi

1. **Brief & naskah** (tabel bagian 6). Bila memakai narasi, buat suara dulu lalu ambil waktu per kata (transkripsi)
   supaya tiap goresan mulai tepat saat katanya diucapkan.
2. **Daftar goresan:** tiap goresan punya jenis (garis/tulisan), warna, frame mulai dan selesai.
3. **Still frame kunci:** judul selesai, benda selesai, checklist lengkap, harga dilingkari, akhir.
4. **Render uji penuh** (3 detik ±27 detik di laptop 2 core).
5. **Suara:** decit spidol dibuat dari daftar goresan yang sama, panjangnya mengikuti durasi goresan.

## 11. QC sebelum dikirim

- [ ] Ujung spidol selalu menempel di ujung goresan (cek beberapa frame di tengah goresan).
- [ ] Lingkaran harga tidak menabrak teks poin di atasnya.
- [ ] Tulisan terbaca di layar ponsel; tidak ada huruf yang terpotong clip.
- [ ] Decit spidol hanya berbunyi saat ada goresan.
- [ ] Harga, poin layanan, dan kontak benar.