Balok padat, lima tetesan, satu array. Tiap tetesan punya kecepatan dan fase awal sendiri — jadi lelehnya tidak pernah terlihat serentak, dan resetnya tidak pernah terlihat sama sekali.
Tiga keputusan kecil yang bikin efek leleh ini terasa organik, bukan seperti bar loading yang diulang-ulang.
Tiap tetesan di array drips[] punya speed dan base sendiri, jadi tidak ada dua tetesan yang memanjang bersamaan.
Panjang tetesan dihitung dari (t/speed + base) % 1 — begitu mencapai 1, ia melingkar balik ke 0 secara mulus, tanpa lompatan yang kentara.
Seluruhnya cuma fillRect dan arc — tidak ada sprite, GIF, atau aset gambar yang perlu dimuat.
Bukan angka contoh — ini lima objek yang benar-benar dipakai untuk menggambar tiap frame.
Sama seperti melukis lapis demi lapis — belakang ke depan, lewat requestAnimationFrame.
Kanvas dibersihkan dan diisi satu warna solid setiap frame lewat fillRect — tidak ada jejak frame sebelumnya.
Persegi utama digambar dulu sebagai sumber lelehan — bentuk yang belum mencair, jadi acuan visual di atas.
Strip tipis warna lebih terang ditumpuk di atas balok, memberi kesan permukaan yang memantulkan cahaya.
Setiap tetesan digambar sebagai persegi panjang tipis yang memanjang sesuai fase %1 miliknya sendiri.
Lingkaran kecil ditempel di ujung tiap tetesan lewat arc, menandai titik yang paling baru meleleh.
Fungsi gambarnya tidak berubah — hanya warna balok, kilau, dan latar yang diganti lewat objek palet.
Tidak perlu npm install atau bundler. Buka filenya di browser, sudah meleleh.