Taburan Partikel Debu Emas Berkilau Ringan
Taburan butiran debu emas yang melayang anggun di latar belakang layar, dirancang sangat hemat memori sehingga ponsel tamu tidak cepat panas.
Taburan butiran debu emas yang melayang anggun di latar belakang layar, dirancang sangat hemat memori sehingga ponsel tamu tidak cepat panas.
Tantangan & Kebutuhan Pengguna
Ketika kamera selesai melakukan transisi dan berhenti di suatu adegan, latar belakang yang diam sepenuhnya dapat mengurangi kesan hidup pada undangan. Diperlukan efek atmosfer berupa butiran debu emas yang melayang perlahan ke atas layaknya cahaya panggung. Namun, membuat ratusan elemen DOM atau mengalokasikan objek baru setiap frame di JavaScript akan memicu Garbage Collection (GC) berkala yang membuat animasi kamera tersendat (frame drop).
Untuk menjaga animasi 60fps tetap mulus di perangkat mobile, daur ulang objek partikel di memori yang sama dan gunakan fungsi trigonometri untuk menghaluskan kemunculannya.
Solusi & Cara Kerja
Komponen Particles membuat tepat satu elemen <canvas> berposisi fixed (z-index: 10, pointer-events: none) dan menginisialisasi array statis berisi 100 objek partikel. Setiap frame, posisi partikel diperbarui berdasarkan vektor kecepatan (vx, vy) dan penghitung umur (life++) ditambah. Ketika partikel melewati batas atas layar (p.y < -8) atau melampaui batas umur maksimumnya (p.life > p.max), objek yang sama langsung ditimpa menggunakan Object.assign(p, mk(false)) sehingga tidak ada alokasi referensi objek baru di heap memori. Tingkat transparansi dihitung dengan rumus Math.sin((p.life / p.max) * Math.PI) * p.a agar partikel memudar masuk dan keluar secara organik.
Berikut adalah implementasi generator partikel, daur ulang memori in-place, dan loop rendering Canvas dari file app/page.tsx:
Detail & Hal yang Diperhatikan
- Distribusi Awal vs Kelahiran Ulang: Saat inisialisasi pertama (init = true), koordinat Y disebar merata di seluruh layar agar kanvas langsung terlihat terisi; sedangkan saat daur ulang (init = false), partikel muncul dari bawah layar (H + 5).
- Kurva Opasitas Sinusoidal: Karena sin(0) = 0, sin(π/2) = 1, dan sin(π) = 0, partikel tidak pernah muncul atau hilang secara mendadak (popping effect) meskipun masa hidupnya di-reset.
- Adaptasi Ukuran Layar: Event listener resize memperbarui dimensi piksel internal kanvas (W = cvs.width = innerWidth) secara langsung agar partikel tetap tajam ketika ukuran jendela berubah.
Kombinasi warna partikel diatur 56% emas (#C9A96E) dan 44% krem lembut (#FFF8EE) dengan opasitas tereduksi untuk menciptakan kedalaman visual berlapis.