Ingin Visual Premium? Kenali Keunggulan Cinematic Parallax 3D Laxy Motions!

Laxy Motions adalah lini template undangan digital premium dari WDP (WeddingPress) yang menyajikan visual eksklusif menggunakan efek parallax 3D berlayer. Setiap template dibangun berbasis HTML statis murni tanpa framework berat untuk menjamin loading halaman instan dan performa responsif, sekaligus menggunakan Google Sheets gratis sebagai database utama.

✨ Keunggulan Utama Laxy Motions

• Visual Immersive: Menggunakan teknik penataan layer multi-kedalaman (Multi-layer depth) yang bergerak dinamis mengikuti scroll.
• Zero-Framework: Dibangun dengan HTML5, Vanilla CSS, dan Vanilla JS tanpa framework seperti jQuery atau Bootstrap. Library eksternal yang dimuat hanya lottie-web dari CDN (animasi burung di latar), YouTube IFrame API (hanya jika musik latar memakai link YouTube), dan Google Fonts.
• Database Google Sheets: Menggunakan Google Sheets gratis sebagai database utama untuk menyimpan data tamu, RSVP, dan doa ucapan.
• Toolkits Cerdas: Dua alat di folder tools/ mempermudah setup: Data Editor untuk mengisi konten dan menghasilkan data.json, Code.gs, serta .htaccess, dan Kirim Generator untuk mengelola daftar tamu dan mengirim link undangan personal via WhatsApp.

---

🛠️ Struktur Template: 2 Fase Utama & vProg Engine

Arsitektur template Laxy Motions terbagi menjadi dua zona/fase interaksi scroll yang diatur oleh engine khusus berbasis vProg (Virtual Progress). Pembagian ini menjamin tamu undangan merasakan pengalaman visual sinematik di awal, sebelum masuk ke bagian fungsional pengisian RSVP.

┌─────────────────────────────────────────────────────────────────────────┐
│            SPLASH SCREEN (overlay terpisah, sebelum vProg 0)            │
│         Nama tamu (?to=) + tombol "Buka Undangan" + musik mulai         │
└───────────────────────────────────┬─────────────────────────────────────┘
                                    │ (klik "Buka Undangan")
                                    ▼
┌─────────────────────────────────────────────────────────────────────────┐
│                         ZONA A: Immersive Stage                         │
│                vProg 0.0 ─────────────────────────► 5.0                 │
│                                                                         │
│  [vProg 0] ──► [vProg 1] ──► [vProg 2] ──► [vProg 3] ──► [vProg 4]      │
│   Quote &       Mempelai      Mempelai      Acara         Countdown &   │
│   Cover         Pria          Wanita                      Live Stream   │
└───────────────────────────────────┬─────────────────────────────────────┘
                                    │ (vProg ≥ 4.9: scroll normal, panggung memudar 5.0 → 5.4)
                                    ▼
┌─────────────────────────────────────────────────────────────────────────┐
│                  ZONA B: Post-Immersive / Free-Scroll                   │
│                                                                         │
│   Love Story  ──►  Galeri Foto  ──►  Kado Digital  ──►  RSVP & Ucapan   │
└─────────────────────────────────────────────────────────────────────────┘

1. Fase A: Immersive Stage (vProg 0.0 → 5.0)

Sebelum Fase A, tamu melihat Splash Screen, yaitu overlay terpisah yang berisi nama tamu dari parameter URL ?to= dan tombol "Buka Undangan". Musik latar mulai diputar saat tombol itu diklik.

Fase A adalah panggung tempat efek parallax bekerja penuh. Engine mencegat scroll, swipe, dan ketukan, sehingga satu gerakan memindahkan layar tepat satu slide. Posisi dihitung dengan nilai vProg (Virtual Progress): 1 vProg sama dengan 1 kali tinggi layar. Fase A berisi 5 slide, masing-masing mencapai tampilan penuh di titik vProg berikut:

• vProg 0: Header nama mempelai dan tanggal, gambar cover, serta kartu kutipan (teks quote atau pembuka) dengan hashtag pasangan.
• vProg 1: Mempelai pria. Foto pasangan di-zoom ke wajah pria, disertai kartu nama lengkap, keterangan keluarga, nama orang tua, dan ikon media sosial.
• vProg 2: Mempelai wanita. Foto bergeser ke wajah wanita dengan kartu data yang sama.
• vProg 3: Jadwal acara. Dua acara pertama tampil lengkap dengan sesi (jika diisi), tanggal, jam, lokasi, alamat, dan tombol Google Maps.
• vProg 4: Countdown, satu tombol live streaming untuk setiap link di data live yang diisi, dan acara ke-3 jika ada. Saat layar bergerak dari slide ini ke akhir Fase A, foto pasangan penutup muncul di bagian bawah layar.

Batas akhir Fase A adalah vProg 5.0 (VPROG_MAX di parallax-engine.js). Mulai vProg 4.9 (VPROG_EXIT_THRESHOLD) engine berhenti mencegat scroll. Rentang 5.0 sampai 5.4 hanya dipakai untuk memudarkan panggung parallax hingga tersisa samar di belakang Fase B.

2. Fase B: Post-Immersive / Free-Scroll (setelah vProg 5.0)

Setelah slide terakhir Fase A, halaman kembali ke mode Free-Scroll (scroll bebas seperti halaman web biasa). Fase B berfokus pada konten interaktif dan administrasi undangan:

• Love Story: Alur cerita romantis perjalanan cinta mempelai (timeline interaktif).
• Galeri Foto & Video: Album dokumentasi prewedding dengan fitur popup zoom (lightbox) dan satu video YouTube opsional. Bentuk tampilannya berbeda per template: grid, deretan foto bergeser, atau carousel.
• Kado Digital: Informasi rekening bank, dompet digital (e-wallet), dan alamat pengiriman kado fisik.
• Formulir RSVP & Ucapan: Buku tamu digital terintegrasi Google Sheets untuk konfirmasi kehadiran dan pengiriman doa restu secara live.
• Penutup & Footer: Ucapan terima kasih dari keluarga dan branding dari vendor pembuat.

3. Cara Kerja Engine vProg & Pembagian Layer

Nilai vProg dihitung secara real-time berdasarkan posisi scroll pengguna (currentScroll / viewportHeight). Engine parallax (parallax-engine.js) mendengarkan pergerakan ini dan menerjemahkannya ke dalam interpolasi linear (lerp) pada properti CSS transform, yaitu translate3d(x, y, 0) dan scale(), ditambah opacity. Engine tidak memakai perspective atau translateZ; kesan kedalaman muncul dari perbedaan kecepatan dan skala tiap layer:

• Background (Latar Belakang): Elemen terjauh yang bergerak paling lambat (misalnya siluet pura, langit sore, atau pegunungan).
• Midground (Tengah): Elemen penengah seperti foto profil mempelai atau ilustrasi dekoratif pelengkap yang bergerak secara moderat.
• Foreground (Latar Depan): Elemen terdekat yang bergerak paling cepat (misalnya gunungan wayang Jawa, ornamen songket, daun melayang, atau kartu informasi teks).

Arsitektur Sistem: Serverless & Statis

Laxy Motions dirancang dengan filosofi serverless-first. Ini berarti vendor tidak memerlukan database hosting berbayar (seperti MySQL) atau web server dengan runtime dinamis (seperti PHP/Node.js) untuk melayani tamu. Skema arsitekturnya dapat dilihat di bawah ini:

┌─────────────────────────────────────────────────────┐
│                    FRONTEND                          │
│  HTML + Vanilla CSS + Vanilla JS (no framework)     │
│  Parallax 3D via CSS transforms + IntersectionAPI   │
│  Konten: data.json | RSVP & ucapan: GSheet API       │
└──────────────────────┬──────────────────────────────┘
                       │
┌──────────────────────▼──────────────────────────────┐
│               BACKEND (Google Apps Script)           │
│  Code.gs — REST API (doGet/doPost)                  │
│  Google Sheet — Database (Tamu, RSVP, Ucapan)       │
│  1 Sheet = 1 Undangan (duplikasi master file)       │
└─────────────────────────────────────────────────────┘

Memahami Dua Mode Operasi

Template Laxy Motions mendukung dua mode operasi. Tidak ada berkas konfigurasi terpisah; mode ditentukan oleh dua kolom di data.json, yaitu rsvpApiUrl dan disable_rsvp_submit (dibaca oleh assets/js/rsvp-client.js). Di kedua mode, konten undangan selalu dibaca dari data.json.

1. Mode Standalone (Demo)

Mode ini aktif jika rsvpApiUrl kosong. Template tidak menghubungi API mana pun: form RSVP tetap bisa diisi, tetapi tidak ada data yang tersimpan. Mode demo juga bisa dipaksa dengan "disable_rsvp_submit": true; form RSVP dan ucapan lalu menolak pengiriman dan menampilkan pesan dari rsvp_disabled_message. Mode ini cocok untuk demo atau preview contoh undangan bagi calon pengantin.

2. Mode GSheet Live (Produksi)

Mode ini aktif jika rsvpApiUrl berisi URL Web App Google Apps Script dan disable_rsvp_submit tidak bernilai true. Formulir RSVP dan ucapan mengirim data ke Google Sheets, dan daftar ucapan dimuat dari sheet tersebut.