Kunci Visual Mewah: Rahasia Konfigurasi & Scene Fase A (Immersive Stage) Laxy Motions!

Fase A (Immersive Stage) Laxy Motions adalah zona tampilan awal undangan digital yang mengunci layar (scroll-snap) untuk menyajikan transisi cinematic parallax 3D. Tahap ini dikontrol penuh oleh nilai vProg (Virtual Progress) dari vProg 0.0 hingga 5.0 guna memastikan visual transisi antar-elemen bergerak presisi dan mewah.

---

🛠️ Penjelasan Teknis & Alur Scene Fase A

Fase A dirancang untuk memberikan impresi visual pertama yang memukau tamu undangan. Dengan sistem scroll ter-intercept, pergerakan scroll tamu diterjemahkan menjadi perubahan nilai vProg secara halus.

Langkah 1: Memahami Timeline vProg di Setiap Scene

Sebelum Fase A dimulai, tamu melihat Splash Screen. Fase A sendiri berisi 5 slide yang masing-masing berjarak 1.0 vProg (setara 1x tinggi layar ponsel). Satu kali scroll, swipe, atau ketukan memindahkan layar tepat satu slide. Kolom vProg di bawah menunjukkan titik saat slide tampil penuh:

Slide	Posisi vProg	Fokus Visual & Fungsi
Splash Screen	Sebelum 0.0	Overlay Pembuka: Lapisan terpisah (#splash-screen) di atas panggung parallax. Menampilkan judul, inisial, tanggal, nama tamu dari parameter URL ?to=, dan tombol "Buka Undangan". Musik latar mulai diputar saat tombol diklik.
Slide 0	0.0	Header & Kutipan: Header nama mempelai dan tanggal, gambar cover, serta kartu kutipan (teks quote atau pembuka) dengan hashtag pasangan. Gambar cover turun dan memudar begitu scroll dimulai.
Slide 1	1.0	Mempelai Pria: Foto pasangan (couple-img.webp) di-zoom ke wajah pria, disertai kartu nama lengkap, keterangan keluarga, nama orang tua, dan ikon media sosial.
Slide 2	2.0	Mempelai Wanita: Foto yang sama bergeser (panning) ke wajah wanita, dengan kartu data yang sama.
Slide 3	3.0	Jadwal & Acara: Dua acara pertama dengan nama acara, sesi (jika diisi), tanggal, jam, lokasi, alamat, dan tombol Google Maps.
Slide 4	4.0	Countdown & Live Streaming: Hitung mundur menuju acara, satu tombol live streaming untuk setiap link di data live yang diisi (YouTube, Zoom, Instagram), dan acara ke-3 jika ada. Foto pasangan penutup mulai muncul dari vProg 4.0 (Bali dan Minang dari 4.25).
Keluar ke Fase B	4.9 → 5.4	Transisi: Mulai vProg 4.9 (VPROG_EXIT_THRESHOLD) engine berhenti mencegat scroll. Gerakan berikutnya dari slide 4 membawa layar ke vProg 5.0 (VPROG_MAX). Antara 5.0 dan 5.4 panggung memudar hingga opacity 0.2 dan tetap terlihat samar di belakang Fase B.

Langkah 2: Mengatur Posisi & Skala Zoom Wajah (Config Parallax)

Untuk memastikan wajah mempelai tidak terpotong saat di-zoom oleh engine pada slide 1 dan 2, atur nilai di objek TEMPLATE_STYLE pada berkas assets/js/style-injector.js. Jangan mengubah CONFIG.couple di parallax-engine.js, karena nilai di sana ditimpa oleh TEMPLATE_STYLE saat halaman dimuat. Nilai bawaan keempat template (Jawa, Bali, Banjar, Minang) sama:

const TEMPLATE_STYLE = {
  // ...
  couple_scale_initial: 0.92,   // Ukuran awal foto couple
  couple_scale_groom: 2.4,      // Zoom ke wajah pria (slide 1), rentang aman 1.5 - 5.0
  couple_scale_bride: 2.4,      // Zoom ke wajah wanita (slide 2), rentang aman 1.5 - 5.0
  couple_x_offset_groom: -135,  // Geser X wajah pria (px, negatif = kiri)
  couple_x_offset_bride: 175,   // Geser X wajah wanita (px, positif = kanan)
  // ...
};

Parameter di atas mengatur letak koordinat sumbu X (horizontal) dan skala zoom foto utama (couple-img.webp). Simpan berkas, lalu muat ulang halaman undangan untuk melihat hasilnya. Daftar lengkap properti TEMPLATE_STYLE ada di panduan Kustomisasi Theme & Style.

Langkah 3: Mengelola Transisi Layer Kultural

Keindahan visual Laxy Motions ditopang oleh 3 layer kedalaman gambar. Anda wajib menyelaraskan format gambar transparan PNG/WEBP agar transisi pergeseran per vProg terlihat mulus:

• Background (Latar Belakang): Disarankan berformat JPG/WEBP tanpa transparansi dengan resolusi optimal 1080x1920px (rasio 9:16).
• Midground (Layer Tengah): Foto pasangan (couple-img.webp) yang di-zoom dan digeser oleh engine, ditambah gambar cover (cover-img.webp) yang turun dan memudar di awal scroll. Berkas awan-img.png bukan layer bergerak; berkas itu hanya gambar latar kartu kutipan di Jawa, Bali, dan Minang (di Bali dan Minang juga kartu mempelai), sedangkan Banjar tidak memakainya.
• Foreground (Layer Depan): Berupa ornamen bingkai adat transparan (semak-img.webp) yang dipasang di kiri dan kanan layar. Saat di-scroll, kedua ornamen bergeser ke arah luar layar, dan di desktop layer ini paling responsif terhadap gerakan mouse sehingga memunculkan ilusi kedalaman.