Efek Kamera Film Layar Lebar & Latar Buram | Cinematic 3D Wedding Invitation

Tantangan & Kebutuhan Pengguna

Undangan pernikahan digital umumnya menggunakan tata letak dokumen memanjang (vertical long-scroll) yang terasa statis dan monoton. Proyek ini membutuhkan pendekatan visual setara film layar lebar: kanvas terkunci penuh di viewport di mana setiap perpindahan seksi menggerakkan kamera mendekat ke subjek (mempelai pria/wanita), mengatur pencahayaan, mengaburkan latar belakang (depth-of-field) saat kartu informasi tampil, serta menyempitkan rasio layar dengan bilah hitam sinematik (letterbox)—tanpa membebani GPU perangkat mobile dengan library WebGL/Three.js yang berat.

Pisahkan state deklaratif React dari loop animasi 60fps: biarkan React menentukan adegan tujuan, sementara interpolasi kamera dieksekusi langsung ke DOM melalui requestAnimationFrame.

Solusi & Cara Kerja

Komponen PhotoWorld menyimpan matriks konfigurasi kamera di dalam konstanta CAM untuk 8 adegan yang mencakup koordinat pan (x, y), skala perbesaran (s), kecerahan (br), saturasi (sat), radius blur dalam piksel (bl), serta tinggi bilah letterbox (bar). Saat prop scene berubah, komponen hanya memperbarui nilai referensi target (tgt.current) tanpa memicu re-render siklus hidup React. Sebuah loop requestAnimationFrame independen membaca posisi kamera saat ini (cam.current) dan menghitung posisi frame berikutnya menggunakan rumus interpolasi linear lerp(a, b, 0.052), lalu memutasi properti style.transform dan style.filter langsung pada node DOM.

Berikut adalah implementasi matriks preset kamera dan loop interpolasi real-time dari file app/page.tsx:

Detail & Hal yang Diperhatikan

Optimasi GPU pada Filter Blur: Menerapkan string CSS blur(0px) secara terus-menerus tetap memaksa browser mobile membuat tekstur komposit tambahan. Oleh karena itu, properti blur hanya disuntikkan ke dalam string filter apabila nilai c.bl melampaui ambang batas 0.12px.
Pencegahan Kebocoran Tepi Gambar (Viewport Bleed): Saat kamera bergeser secara horizontal hingga -8% atau +8% pada adegan mempelai, tepi kanvas berisiko terlihat kosong. Nilai scale sebesar 1.58 dihitung secara presisi agar area gambar selalu menutup penuh viewport di berbagai rasio layar.
Vignette Terikat Kanvas: Dua layer gradasi (radial vignette dan linear top-bottom) ditempatkan di dalam kontainer worldRef sehingga ikut bertransformasi bersama foto, menjaga keterbacaan tipografi emas dan putih di atasnya.

Tantangan & Kebutuhan Pengguna

Pisahkan state deklaratif React dari loop animasi 60fps: biarkan React menentukan adegan tujuan, sementara interpolasi kamera dieksekusi langsung ke DOM melalui requestAnimationFrame.

Solusi & Cara Kerja

Berikut adalah implementasi matriks preset kamera dan loop interpolasi real-time dari file app/page.tsx:

Detail & Hal yang Diperhatikan

Optimasi GPU pada Filter Blur: Menerapkan string CSS blur(0px) secara terus-menerus tetap memaksa browser mobile membuat tekstur komposit tambahan. Oleh karena itu, properti blur hanya disuntikkan ke dalam string filter apabila nilai c.bl melampaui ambang batas 0.12px.
Pencegahan Kebocoran Tepi Gambar (Viewport Bleed): Saat kamera bergeser secara horizontal hingga -8% atau +8% pada adegan mempelai, tepi kanvas berisiko terlihat kosong. Nilai scale sebesar 1.58 dihitung secara presisi agar area gambar selalu menutup penuh viewport di berbagai rasio layar.
Vignette Terikat Kanvas: Dua layer gradasi (radial vignette dan linear top-bottom) ditempatkan di dalam kontainer worldRef sehingga ikut bertransformasi bersama foto, menjaga keterbacaan tipografi emas dan putih di atasnya.