# desain.md — Gaya Kertas Potong (Papercut) · 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-papercut.md. Buat iklan 15 detik untuk [GANTI: produk], harga [GANTI: harga],
> ajakan pesan lewat [GANTI: chat/nomor/link]. 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. Punya warna logo? Tulis di bagian 2. Gaya ini tetap jalan dengan warna apa pun asalkan kontras teks dijaga.
3. Lampirkan foto produk bila ada. Claude akan menggambar ulang produk sebagai potongan kertas.

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

Dunia kecil dari kertas potong yang ditumpuk: latar kertas krem, bukit berlapis, matahari, awan, dan produk.
Setiap potongan punya serat kertas, tepi yang sedikit tidak rata seperti digunting, dan bayangan lembut di
bawahnya sehingga lapisannya terasa nyata. Gerak dipatok 12 frame per detik dan setiap potongan bergoyang
sedikit di tiap langkah, seperti animasi stop motion di meja kerajinan. Produk **dirakit lapis demi lapis**
(misalnya isi gelas jatuh satu per satu), lalu judul muncul di label kertas yang jatuh, berbalik, dan
diselotip. Harga ada di stiker bergerigi yang meletup. Nuansanya hangat, buatan tangan, dan ramah.

Cocok untuk: minuman, makanan rumahan, kue, produk alami, kerajinan, oleh-oleh.
Kurang cocok untuk: gawai, jasa teknis, promo diskon besar yang butuh kesan mendesak.

## 1. Format

| Hal | Nilai |
| --- | --- |
| Video utama | 1080 × 1920 (9:16), 30 fps, H.264, audio AAC 48 kHz |
| Durasi | 15 detik. Versi pendek 6–8 detik untuk Story, versi panjang 30 detik |
| Turunan | 1080 × 1350 (4:5) untuk feed, 1080 × 1080 untuk katalog |
| Zona aman | Teks penting di y 220–1500 dan x 80–1000. Bagian atas tertutup nama akun, bagian bawah tertutup keterangan dan tombol |
| Akhir video | Komposisi lengkap ditahan minimal 1,5 detik |

## 2. Warna

| Token | Hex | Dipakai untuk |
| --- | --- | --- |
| `bg` | `#F4E4C4` | latar kertas krem |
| `kraft` | `#D9B98A` | sisi belakang label, kertas cokelat |
| `label` | `#FFF8EA` | label judul, kartu manfaat |
| `ink` | `#3B2A20` | teks utama, warna bayangan |
| `brown` | `#6B3A1E` | baris judul kedua, aksen gelap |
| `sun` / `sunIn` | `#F2B544` / `#F7CB6A` | matahari, bunga |
| `hillBack` / `hillMid` / `hillFront` | `#B9D39A` / `#86AE72` / `#4E7A4F` | bukit belakang ke depan |
| `leaf` | `#5E8F55` | daun |
| `red` | `#D2553F` | stiker harga, sedotan, satu penekanan |
| `cloud` | `#FFFDF7` | awan |
| `tape` | `rgba(247,222,140,0.9)` | selotip |

[GANTI] warna produk sesuai produk Anda (contoh es kopi: gula aren `#7A3E16`, susu `#F5E9D6`, kopi `#B07444`).

Aturan:
- Teks selalu `ink` atau `brown` di atas kertas terang. Teks putih hanya di atas `red`.
- Satu layar hanya punya satu elemen merah, yaitu harga atau ajakan.
- Lapisan latar makin gelap ke depan supaya kedalaman terbaca.

## 3. Tipografi

| Peran | Font | Bobot | Ukuran @1080 px |
| --- | --- | --- | --- |
| Judul baris 1 | Fredoka | 700 | 96–104 px, huruf kapital |
| Judul baris 2 (nama produk) | Fredoka | 700 | 120–140 px, huruf kapital, warna `brown` |
| Harga | Fredoka | 700 | 80–90 px |
| Teks kecil (cuma, per pcs) | Fredoka | 600 | 36–44 px |

- Muat font secara lokal (`@fontsource/fredoka`), jangan dari internet saat render.
- Maksimal 6 kata per layar. Logo usaha tidak digambar ulang dengan font, selalu pakai file logo asli.

## 4. Bahan & komponen

- **Tekstur kertas** (wajib, ini yang membuat gayanya terasa): setiap potongan diberi filter SVG berisi
  1) tepi digeser noise halus (`feDisplacementMap` skala ±5) supaya tampak digunting,
  2) serat kertas (`feTurbulence` frekuensi 0,9 dicampur *multiply* ke warna),
  3) bayangan lembut ke kanan bawah (geser 2, 8 px, blur 6, opasitas 30 %, warna `ink`).
- **Latar:** kertas krem bertekstur penuh layar, 3–4 lapis bukit bergelombang di bawah, matahari dan 1–2 awan.
- **Produk:** digambar dari bentuk datar sederhana (gelas, toples, piring, kotak), tanpa garis tepi dan tanpa
  gradasi. Bila memakai foto produk, potong mengikuti bentuknya dan beri tepi putih 12 px seperti stiker.
- **Label judul:** kartu `label` radius 28, miring −3°, diselotip di dua sudut atas.
- **Stiker harga:** bintang bergerigi 14 sudut warna `red`, miring 10°, teks putih.
- **Hiasan:** daun, biji kopi, bunga kecil, bahan baku produk. Maksimal 6 hiasan per layar.

## 5. Gerak

| Gerak | Aturan |
| --- | --- |
| Irama stop motion | Semua gerak dihitung dari frame yang dipatok ke 12 fps (`Math.floor(frame * 12 / 30)`) |
| Goyang tangan | Tiap langkah, tiap potongan bergeser acak ±1,6 px dan berputar ±0,7° (acak berbenih, bukan `Math.random`) |
| Masuk dari bawah | Pegas (stiffness 170, damping 13), sedikit memantul |
| Isian produk | Lapisan jatuh ke dalam wadah satu per satu, jeda 5 frame, terpotong bentuk wadah |
| Label judul | Jatuh dari atas sambil berbalik (skala Y mengikuti cos sudut), sisi belakang berwarna kraft |
| Selotip | Muncul 2 frame setelah label mendarat, dua sudut bergantian |
| Stiker harga | Meletup (stiffness 260, damping 12) sambil berputar dari −30° |
| Keluar (akhir/loop) | Potongan meluncur keluar berurutan, kebalikan dari urutan masuk |

- Tidak ada blur gerak, cahaya berpendar, atau perpindahan yang terlalu mulus. Kesan buatan tangan lebih penting.
- Semua gerak dihitung dari nomor frame (di Remotion: `useCurrentFrame`, `spring`, `interpolate`), bukan animasi CSS.

## 6. Struktur iklan 15 detik

| Detik | Isi | Di layar |
| --- | --- | --- |
| 0–2 | Pengait | Bukit dan matahari naik, wadah produk muncul kosong |
| 2–6 | Produk dirakit | Isian jatuh lapis demi lapis, hiasan bahan baku meletup |
| 6–10 | 2 keunggulan | Kartu kertas kecil bergantian: [GANTI] mis. "Gula aren asli", "Tanpa pemanis buatan" |
| 10–13 | Harga | Label judul diselotip, stiker harga meletup |
| 13–15 | Ajakan | Pita kertas: [GANTI] "Pesan lewat chat · 08xx-xxxx-xxxx" atau nama akun |

## 7. Suara

- **Efek:** gemeresik kertas saat potongan masuk, tepukan pelan saat mendarat, kibasan saat label berbalik,
  sobekan selotip, letupan kecil untuk stiker. Taruh efek di langkah 12 fps yang sama dengan gerak.
- **Musik:** riang buatan tangan, nada mayor, ±96 bpm: ukulele dipetik, glockenspiel, bas petik pelan.
  Lebih pelan daripada efek.
- **Narasi (opsional):** ±30–35 kata untuk 15 detik. Buat dengan ElevenLabs satu kali jalan (±1 kredit per
  karakter di Eleven v3, dicek November 2026). Saat narasi berjalan, musik turun 6 dB.
- Semua efek dan musik dibuat dengan kode (Web Audio atau Python), jadi bebas masalah hak cipta.
- Loudness akhir sekitar −14 LUFS untuk media sosial.

## 8. Gaya bahasa iklan

- Kalimat pendek, konkret, satu ide per layar. Sebut manfaat yang bisa dirasakan, bukan sifat abstrak.
- Harga ditulis singkat dan jelas (15rb, Rp15.000). Jangan menulis harga coret yang tidak pernah berlaku.
- Ajakan selalu menyebut caranya (chat, nomor, link di bio), bukan sekadar "order sekarang".

## 9. Aturan isi & hak

- Referensi hanya diambil gayanya. Jangan memakai karakter, logo, atau musik milik pihak lain.
- Klaim produk (halal, tanpa pengawet, BPOM, dan sejenisnya) hanya ditulis bila memang benar dan punya bukti.
- Nama usaha dan produk pihak lain tidak dipakai sebagai pembanding.

## 10. Workflow produksi

1. **Brief.** Isi semua [GANTI]: produk, harga, dua keunggulan, cara pesan, kontak.
2. **Storyboard.** Claude menulis tabel bagian 6 dengan isi nyata, lalu menunggu persetujuan sebelum menulis kode.
3. **Aset.** Logo (PNG/SVG), foto produk (opsional), font lokal. Aset disimpan di `public/`, bukan ditautkan dari internet.
4. **Still frame kunci.** Render 5 gambar diam: awal, produk selesai dirakit, keunggulan, harga, akhir.
5. **Render uji 3 detik.** Cek irama 12 fps, goyang, dan urutan lapisan.
6. **Suara.** Efek dan musik dibuat dengan kode. Narasi ElevenLabs dibuat terakhir, setelah teks final.
7. **Render final** 9:16, lalu turunan 4:5 dan 1:1 dengan menata ulang posisi, bukan memotong.

## 11. QC sebelum dikirim

- [ ] Still frame kunci sudah diperiksa, tidak ada potongan yang muncul sebelum waktunya.
- [ ] Semua teks penting ada di zona aman dan terbaca di layar ponsel.
- [ ] Harga, nama produk, dan kontak sudah benar.
- [ ] Efek suara jatuh tepat di langkah gerak; musik tidak menutupi narasi.
- [ ] Filter tekstur cukup berat: di laptop 2 core, 3 detik bisa makan ±3 menit. Bila terlalu lambat,
      minta Claude memanggang tekstur ke PNG sekali lalu dipakai ulang.