Safe Area 9:16 untuk Reel & Media Sosial

Video 9:16 di Reels, TikTok, atau Shorts tidak pernah tampil sendirian. Aplikasinya menggambar antarmuka sendiri di atasnya: bar di atas, nama akun, caption, dan baris audio di bawah, tombol-tombol di sisi kanan. Apa pun yang ada di bawahnya jadi susah dibaca atau tertutup. Aturan MotionMind sederhana: semua yang penting berada di antara y 285 dan y 1635.

Angkanya

Di kanvas 1080×1920:

Safe area adalah bagian tengah 4:5 dari frame (1080×1350), bagian yang sama yang ditampilkan preview feed 4:5. Di dalamnya:

• Beri jarak 60 px dari tepi kiri dan kanan, dan letakkan CTA di tengah, jauh dari tombol di kanan.
• Teks yang harus terbaca minimal 28 px (pada lebar 1080); lebih kecil dari itu tidak terbaca di ponsel.
• Video ditutup dengan CTA yang diam dan terbaca minimal 1,5 detik.
• Frame 0 menjadi thumbnail di banyak player, jadi judul atau gambar utama sudah tampil di detik 0.

Di kode HyperFrames, satu kotak sudah mencakup dua aturan pertama:

/* 1080×1920: headline, UI and CTA live inside this box */
.safe {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 285px;
  bottom: 285px; /* 1920 − 1635 */
}

Cek di MotionMind Studio

Halaman run setiap versi 9:16 punya tombol Show 4:5 safe zone (y 285–1635) di bawah player. Tombol ini mengarsir pita atas dan bawah: pause di bagian CTA lalu lihat. Di v1 di atas, CTA dan logo berada di pita bawah; v2 memindahkannya ke dalam.

Overlay ini penting karena tidak ada pengecekan lain yang menangkapnya:

• QA ✓ di halaman run hanya soal suara: loudness dan true peak. Sebuah versi bisa lolos meskipun CTA-nya salah tempat, seperti v1.
• npx hyperframes check mencari teks yang bertumpuk, terpotong, atau terlalu kecil, bukan zona platform. CTA v1 tidak ditandai.

Agent menjaga safe area karena skill-nya mewajibkan itu, dan ia mengecek CTA sebelum Gate 3. Kalau Anda ingin mengecek tanpa Studio, gambar pita-pitanya di satu frame hasil render:

V=projects/demo/launch-6s/runs/v1-steam
ffmpeg -ss 4.6 -i $V/video.mp4 -frames:v 1 \
  -vf "drawbox=y=0:w=iw:h=285:[email protected]:t=fill,drawbox=y=1635:w=iw:h=285:[email protected]:t=fill" \
  safe-check.png

Cara Memintanya

Sebutkan platform dan format di brief, dan agent merencanakan layout-nya untuk itu:

Use the motionmind skill. A 15-second 9:16 reel for Instagram and TikTok;
keep everything that matters inside the 9:16 safe area.

Kalau ada sesuatu di pita atas atau bawah, sebutkan apa dan di mana:

Revise demo/launch-6s v1-steam: the CTA and logo sit under the platform caption.
Keep headline, UI and CTA within y 285–1635 and hold the CTA still for at least 1.5 s.

Perbaikan layout seperti ini, sebelum disetujui, biasanya dilakukan di versi yang sama (demo di atas membuatnya jadi v2 hanya agar keduanya bisa dibandingkan); lihat Mengelola Campaign vs Versi untuk kapan perubahan menjadi versi baru.