Sebuah animasi toples tabungan bergaya pixel art, lengkap dengan fisika koin jatuh, musik bassline yang groovy, dan momen perayaan setiap toples penuh. Dibangun murni dengan Canvas 2D dan Web Audio — tanpa aset gambar, tanpa file suara.
Koin muncul dari atas layar dengan kecepatan acak, lalu mendarat di permukaan toples disertai efek squash-bounce dan bunyi denting pendek.
Setiap koin yang mendarat menambah nominal total. Saat melewati kelipatan seribu, angka penghitung berdenyut halus dan memercikkan sparkle.
Layar bergetar, terdengar bunyi "cha-ching", notifikasi meluncur masuk dari atas, lalu toples perlahan mengalir turun dan siap terisi lagi.
Kecepatan jatuh, rotasi, dan titik mendarat dihitung acak setiap saat — tidak ada dua koin yang bergerak identik.
Penghitung total membesar sesaat dan berubah warna setiap kali tabungan melewati kelipatan seribu, diiringi ledakan partikel.
Kombinasi screen shake, flash layar lembut, koin yang memantul keluar, dan jingle tiga nada saat target tercapai.
Banner "JAR FULL" masuk dengan easing bergaya pantulan (ease-out-back), bertahan sejenak, lalu keluar mulus — dan tetap stabil meski layar bergetar.
Lembaran uang samar melayang perlahan di latar belakang untuk kedalaman visual, tanpa mengganggu fokus pada toples.
Musik dan efek suara memakai gain node terpisah, sehingga tombol mute bisa membisukan keduanya secara instan tanpa memutus loop.
Aplikasi keuangan sering terasa kering — deretan angka tanpa emosi. Animasi seperti ini meminjam bahasa game: umpan balik instan, perayaan kecil, dan progres yang terasa nyata di mata, bukan cuma di laporan.
Layar onboarding aplikasi tabungan, widget dashboard fintech, atau elemen gamifikasi di dalam produk edukasi keuangan.
Tinggal salin satu file HTML — canvas, audio, dan logikanya sudah menyatu, siap ditempel ke produkmu.
Satu file, nol dependensi eksternal, dan sudah lengkap dengan suara. Tinggal salin dan sesuaikan warnanya.