Interaktif
Pecah Celengan Jago Legenda
Kursor otomatis mengetuk celengan ayam tanah liat bergaya game kartun sampai naik tingkat dari hijau ke emas, lalu celengan retak bercahaya dan pecah menjadi ledakan koin, permata, dan konfeti. Hadiah utamanya, Caping Emas, tampil sendirian di panggung cahaya sebelum hadiah diklaim dan koin terbang ke saldo.
Prompt
Buatkan momen hadiah game ponsel yang orisinal: «Pecah Celengan Jago». Satu file HTML (HTML + CSS + JS) yang langsung main saat dibuka, lengkap dengan mode demo otomatis: kursor panah terskrip mengetuk sendiri sehingga seluruh pertunjukan berjalan tanpa input, setara pertunjukan hadiah di game ponsel komersial.
【Dunia dan gaya】
- Desain orisinal, tanpa IP, karakter, atau logo game mana pun.
- Gaya game ponsel kartun: warna jenuh, garis luar gelap seragam #1A1033, bentuk bulat dan tebal. Siluet bergaris tebal, sambungan antarbagian bergaris tipis.
- Semua ilustrasi diwarnai 3 lapis (warna dasar, blok bayangan, sorotan), bukan satu gradasi.
- Warna naik per tingkat: BIASA hijau #62D35B → LANGKA biru #4FA8FF → EPIK ungu #B66DFF → LEGENDA emas #FFC53A. Setiap naik tingkat, warna glasir celengan, warna percikan, dan nada latar ikut berganti.
- Judul memakai font bulat Lilita One dengan garis gelap dan bayangan; hurufnya «dibanting» satu per satu ke layar dengan pantulan.
【Tokoh utama: celengan ayam tanah liat (SVG)】
- Badan bulat, ekor tiga helai (merah muda, warna tingkat, kuning), jengger dan gelambir merah, paruh oranye, lukisan bunga putih di badan, celah koin di punggung dengan satu koin menyembul.
- Melayang naik turun di atas tampah bambu anyaman berbentuk elips; bayangan lembut di tampah mengecil dan memudar saat celengan naik.
【Lima babak dalam 18 detik】
1. Siaga (0-1,2 dtk): celengan melayang dan bergoyang pelan, sekali bergetar sebagai tanda; pil «KETUK CELENGAN!» berdenyut di bawah; kursor masuk dari kanan bawah.
2. Naik tingkat (1,2-5,2 dtk): tiga ketukan. Setiap ketukan celengan memadat, melompat, salto satu putaran di udara, mendarat gepeng lalu memantul elastis dengan kepulan debu. Di puncak lompatan warna berganti dengan kilat putih dan cincin percikan, dan papan nama di tengah atas berganti menjadi «CELENGAN LANGKA», «CELENGAN EPIK», «CELENGAN LEGENDA», dengan empat permata indikator yang menyala satu per satu. Bingkai papan nama ikut naik kelas: baja berpaku keling → perak bermata batu biru → perak bermata batu ungu → emas bermata berlian dengan mahkota kecil.
3. Mengisi tenaga (5,2-6,5 dtk): ketukan keempat ditahan, pil berganti «SIAP PECAH!». Celengan bergetar makin keras, matanya memicing, retakan bercahaya muncul satu per satu, percikan tersedot ke pusat, latar meredup, lalu celengan gepeng sekali.
4. Ledakan (6,5 dtk): kilat radial dengan mix-blend-mode screen (maksimal 0,8, tidak putih total), layar berguncang, kamera mendorong maju, tiga lapis gelombang kejut (lebar-pudar, sedang, tipis-terang), garis cahaya panjang, bintang kelip, pecahan tanah liat, koin dan permata yang berputar, dan konfeti satu kali saja.
5. Pengungkapan dan klaim (7-18 dtk):
- Tirai gradien hangat yang bersih dengan cahaya lembut berputar menggantikan latar; tampah dan papan nama disembunyikan. Caping Emas muncul dari titik ledakan dan berputar pada sumbu tegak (garis anyaman dan dua permata hijau di pita merahnya ikut berputar). Cahaya di belakangnya hanya meluber dari tepi, 6 berkas cahaya buram menyebar seperti kipas dan berkedip lembut, debu cahaya naik pelan, dan dua komet debu bintang mengorbit di luar siluet tanpa melintas di depannya.
- Papan nama emas «CAPING EMAS» bermahkota, lima bintang, label LEGENDA, dan lencana «BARU!». Panel ATRIBUT masuk dari kanan: Hasil Panen +25%, Teduh +40, Pesona +18, angkanya bergulir naik dengan bilah yang terisi dan muncul «▲+nilai».
- Judul «HADIAHMU!» dibanting masuk, caping mengecil masuk ke ubinnya, dan tiga ubin lain terbang melengkung lalu mendarat dengan lonjakan dan goyangan: Koin ×1.200, Permata ×36, Caping Emas ×1 (bingkai pelangi berputar dan lencana BARU!), Benih Padi ×8. Ikon tiap ubin punya ekspresi sendiri dan pola latar berbeda (garis miring, kisi wajik, sinar, titik); bingkainya baja berpaku, perak bermata batu, atau emas bermahkota sesuai kelangkaan.
- Kursor menekan tombol emas KLAIM; koin dan permata terbang di kurva Bezier ke saldo kanan atas, saldo memantul setiap kali kena dan angkanya bertambah; ubin diberi centang dan tombol berubah menjadi TERKLAIM.
- Penutup: ubin jatuh, latar kembali hijau, celengan baru jatuh ke tampah dan memantul, siap diketuk lagi.
【Cahaya】
- Sinar latar: 3 lapis repeating-conic-gradient bertepi lembut dengan kerapatan dan kecepatan putar berbeda, plus bokeh yang melayang.
- Setiap percikan punya pendar tipis; gelombang kejut digambar 3 lapis garis.
【Antarmuka】
- HUD: judul «PECAH CELENGAN» di kiri atas; saldo koin dan permata, tombol suara, dan «LEWATI ››» di kanan atas.
- Bingkai, papan nama, dan tombol bermaterial logam: gradien sikat, tepi terang kiri atas dan gelap kanan bawah, bayangan dalam.
【Teknik】
- Satu timeline GSAP mengatur semua babak; semua gerak memakai squash & stretch, overshoot, dan pantulan elastis, tidak ada gerak linear.
- Sistem partikel Canvas 2D buatan sendiri: gravitasi, hambatan, umur, additive blending, serta gerak tersedot, terbang melengkung, dan mengorbit.
- Getaran, napas, dan goyangan dihitung dari waktu, bukan tween berulang, supaya berhenti bersih saat status berganti.



