Mesin Status Tiga Fase Pembuka

Masalahnya dulu

Sebuah undangan digital sinematik tidak seharusnya langsung memunculkan seluruh isi halaman secara tiba-tiba saat tautan dibuka. Selain karena aset gambar latar beresolusi tinggi dan audio membutuhkan waktu inisialisasi, kita perlu membangun suasana (mood) sejak detik pertama dan memancing satu ketukan jari dari tamu.

Tiga fase perjalanan layar

Komponen utama Home diatur menggunakan tipe union sederhana: Phase = 'loading' | 'opening' | 'experience'. Masing-masing fase memiliki koreografi animasi tersendiri sebelum menyerahkan tongkat estafet ke fase berikutnya.

Layar pembuka yang dirancang dengan baik mengubah waktu tunggu teknis menjadi bagian dari pertunjukan itu sendiri.

Implementasi di ngodingan ini

Pada fase Loading, angka persentase merayap hingga 94% lalu memicu sub-fase 'reveal' yang merenggangkan jarak antar-huruf (letter-spacing) nama mempelai beserta kilau garis emas, sebelum memudar masuk ke layar Opening:

useEffect(() => {
  if (pct >= 94 && !doneRef.current) {
    doneRef.current = true;
    if (idRef.current) {
      clearInterval(idRef.current);
      idRef.current = null;
    }
    setPct(100);
    setTimeout(() => setPhase("reveal"), 300);
    setTimeout(() => setPhase("out"), 1400);
    setTimeout(onDone, 2200);
  }
}, [pct, onDone]);

Jebakan dan detail yang harus dijaga

• Menggunakan doneRef.current sebagai pengaman mutlak agar rangkaian setTimeout transisi fase tidak terpanggil berulang kali ketika state pct mencapai angka 94 ke atas.
• Di layar Opening, ketiga kata ['Ais', '&', 'Tangkas'] di-render menggunakan perulangan dengan jeda transisi bertingkat (0.15 + i * 0.12 detik) sehingga muncul berurutan secara anggun dari bawah ke atas.
• Saat fase berganti ke 'experience', komponen Loading dan Opening benar-benar di-unmount dari pohon DOM sehingga tidak menyisakan layer tersembunyi yang membebani memori browser.

Ringkasnya

Pemisahan tegas menjadi tiga fase membuat alur pembukaan undangan terasa terstruktur layaknya pembukaan judul film layar lebar.