Lembaran Cerita Cinta yang Terbuka Perlahan
Pada bagian kisah asmara, usapan layar akan membalik lembaran cerita pertemuan pertama hingga lamaran satu per satu sebelum melanjutkan ke adegan akad nikah.
Pada bagian kisah asmara, usapan layar akan membalik lembaran cerita pertemuan pertama hingga lamaran satu per satu sebelum melanjutkan ke adegan akad nikah.
Tantangan & Kebutuhan Pengguna
Adegan ke-5 (Kisah Cinta) memuat 3 babak perjalanan cinta mempelai ('Pertemuan Pertama', 'Bersama Melewati Segalanya', dan 'Babak Baru'). Apabila pergantian bab dibuat menggunakan tombol klik terpisah atau carousel horizontal, mayoritas pengguna yang sudah terbiasa melakukan scroll vertikal akan langsung melewati adegan ini tanpa sempat membaca bab kedua dan ketiga.
Jangan paksa pengguna mempelajari pola interaksi baru di tengah cerita; gunakan gerakan gulir yang sama untuk membuka sub-bab sebelum melanjutkan perjalanan kamera.
Solusi & Cara Kerja
Fitur ini menggabungkan state lokal di komponen StoryOv dengan referensi bersama bernama storyIdxRef yang dapat dibaca langsung secara sinkron oleh SnapScroller. Ketika pengguna berada di STORY_SCENE (indeks 4) dan menggulir maju (dir === 1), SnapScroller memeriksa apakah storyIdxRef.current masih lebih kecil dari jumlah bab terakhir. Jika masih ada bab tersisa, perpindahan adegan utama ditahan dan sistem memancarkan CustomEvent('story:step', { detail: 1 }) ke window. Komponen StoryOv menangkap event tersebut, menjalankan animasi fade-out kartu selama 260ms, memperbarui indeks bab, lalu menampilkan bab berikutnya.
Berikut adalah kode intersepsi di dalam SnapScroller dan pendengar event transisi bab di dalam StoryOv pada file app/page.tsx:
Detail & Hal yang Diperhatikan
- Navigasi Dua Arah (Bidirectional Stepping): Intersepsi bekerja secara simetris baik saat menggulir maju (bab 1 -> 2 -> 3 -> Adegan Resepsi) maupun saat menggulir mundur (bab 3 -> 2 -> 1 -> Adegan Kutipan).
- Reset Otomatis Saat Lompat Navigasi: Apabila pengguna melompat langsung ke adegan Kisah Cinta melalui tombol titik samping (DotNav), sistem memancarkan event 'story:reset' dan mengembalikan storyIdxRef.current ke 0 agar pembaca selalu memulai dari bab pertama.
- Indikator Progres & Petunjuk Kontekstual: Baris indikator pil emas memanjang secara dinamis pada bab aktif (width: 22px vs 6px), diikuti teks petunjuk yang berubah otomatis dari 'Scroll untuk lanjut' menjadi 'Scroll untuk resepsi' di bab terakhir.
Penggunaan objek referensi bersama (storyIdxRef) di level modul menghindari re-render seluruh pohon komponen Home setiap kali pengguna hanya membalik sub-bab cerita.