Product Motion Ad (Remotion + ElevenLabs)

Hasil akhir: MP4 1920×1080 30 fps, 30–45 detik, hook kuat, VO bahasa target yang terdengar manusia, SFX profesional, transisi cepat ala referensi, dan alur = flow produk asli. Dikirim ke user dengan SendUserFile.

Template teruji ada di template/ (folder skill ini). Contoh lengkap 13 scene dari proyek nyata ada di references/example-scenes-threads-automation.tsx.txt dan references/example-promo-threads-automation.tsx.txt. Baca references/script-and-storyboard.md sebelum menulis naskah dan references/elevenlabs.md sebelum membuat audio.

Prinsip yang tidak boleh dilanggar

1. Produk harus jelas dalam 8 detik pertama: nama produk + "melakukan apa untuk siapa".
2. Urutan scene = urutan flow pemakaian produk (daftar/login -> setup -> proses inti -> hasil -> fitur lanjutan -> bukti hasil -> CTA). Jangan acak.
3. Satu kalimat VO = satu scene = satu keunggulan + bukti visualnya (UI yang bergerak: form terisi, tombol diklik, kartu hasil muncul, angka naik). Jangan hanya teks.
4. Fakta dari sumber produk, bukan karangan: baca kode/landing/onboarding/halaman "cara kerja". Angka contoh (views, skor) boleh ilustrasi, tapi sebutkan ke user bahwa itu ilustrasi.
5. Tempo cepat seperti referensi: transisi 10 frame (T = 10), animasi di dalam scene dipercepat speed 1.5–3. Jangan memperlambat scene untuk mengisi VO yang lambat — perbaiki VO-nya.
6. VO manusiawi: satu take utuh, gaya ngobrol, tempo cepat, tanpa tag emosi di tiap baris. Bukan per-kalimat terpisah (itu yang membuat kaku).
7. Ikuti aturan performa user: satu kali ukur awal & akhir, jangan render berulang tanpa alasan.

Alur kerja

1. Kumpulkan bahan (paralel bila bisa)

• Produk: di repo, cari teks landing, onboarding, halaman cara kerja/fitur, nama fitur di UI (Grep string UI). Di luar repo: minta deskripsi/URL. Tulis tabel flow keunggulan: Langkah | Aksi user | Keunggulan | Bukti visual (UI yang ditampilkan).
• Brand: warna & font dari CSS (globals.css, tema Tailwind, CSS landing), logo dari public/. Isi template/src/theme.ts (C, GRADIENT, font, BRAND).
• Referensi gaya (bila ada video): ekstrak frame dengan ffmpeg bawaan Remotion lalu lihat contact sheet: npx remotion ffmpeg -v error -i "<video>" -r 3 -s 340x192 <dir>/f%03d.png (filter fps=/tile TIDAK tersedia di ffmpeg Remotion; gunakan -r dan scripts/contact-sheet.cjs). Catat: latar (blob buram/grid titik), cara teks muncul, potongan keras, UI 3D, kursor klik, glow, ritme.

2. Naskah & storyboard

Ikuti references/script-and-storyboard.md: hook 3 ketukan (curiosity gap), 1 baris ≤ 10 kata per scene, gaya ngobrol, kalimat pertama diawali kata pembuka ("Eh,") agar kata kunci tidak salah ucap di detik 0, CTA pendek. Tunjukkan naskah + urutan scene singkat ke user hanya bila brief-nya ambigu; selain itu langsung kerjakan.

3. Proyek Remotion

• Salin template/ ke folder baru di repo user (mis. promo-video/), npm install.
• Bila di dalam repo Next.js/TS lain: tambahkan folder itu ke exclude di tsconfig.json root dan ke globalIgnores ESLint. Folder sudah punya .gitignore (node_modules, out).
• Salin logo ke promo-video/public/ dan set BRAND.logo.
• Tulis scene per produk di src/scenes.tsx (pakai pola di contoh: useFrame(), useRise/rise, glass/white, StepTag, Words, typed+Caret, Cursor, BlurFilter). Scene generik makeFeature hanya untuk prototipe.
• Isi DEFS di src/Promo.tsx: urutan scene, cue (frasa pembuka kalimat VO), beats (hook), speed, transisi, dark, sfx.

4. Audio ElevenLabs (lihat references/elevenlabs.md)

• VO satu take -> public/vo/full.mp3; transkrip Scribe per kata -> public/vo/words.json. Periksa transkripnya (kata salah ucap? baris hilang?).
• SFX pack 10 file -> public/sfx/*.mp3.
• Timeline otomatis: scene mulai 6 frame sebelum frasa cue-nya diucapkan; SFX diletakkan di waktu desain scene (dibagi speed).

5. Render & verifikasi

• npm run typecheck lalu npm run render (port 3456 — port 3000 sering dipakai dev server Next, render akan gagal "not a valid Remotion project").
• Jalankan render di background bila > 2 menit.
• Cek visual: node <skill>/scripts/contact-sheet.cjs out/promo.mp4 <scratchpad>/chk lalu Read sheet-nya. Untuk detik tertentu beri daftar detik. (Sampel -r ffmpeg sering menampilkan frame awal kosong palsu — cek detik spesifik bila ragu.)
• Periksa: teks tidak blur menetap, tidak terpotong/terbungkus, label langkah tidak tertutup panel, animasi kunci selesai sebelum scene berganti, teks layar = kata VO.
• Kirim dengan SendUserFile (display render), laporkan durasi, ukuran, dan apa yang belum diverifikasi (mis. level audio tidak didengar langsung).

Jebakan yang sudah terjadi (hindari)