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.

Interaktif · SVG, GSAP, Canvas 2D, CSS, Partikel, Bisa dimainkan · 18 detik · 1280×720

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.

Video Interaktif lainnya

  1. Memotret Rusa di Hutan GugurInteraktif20 dtkMemotret Rusa di Hutan GugurGame 3D orang pertama yang memainkan dirinya sendiri: pemain menyusuri jalan setapak di hutan maple musim gugur, membidik dengan kamera, lalu memotret rusa betina di tepi sungai, rusa jantan bertanduk di atas bukit, dan kelinci di dekat kayu tumbang. Ketiga hasil jepretannya terkumpul menjadi album di akhir.Three.js · Shader · Canvas 2D
  2. Penjaga Megalit Lembah BatuInteraktif20 dtkPenjaga Megalit Lembah BatuGim aksi first-person 3D yang memainkan dirinya sendiri di lembah rumput saat malam: pemain bertongkat kristal menembakkan bola cahaya ke roh bayangan bertudung yang bangkit dari empat arca megalit, menyeberangi jembatan batu melengkung di atas sungai berkilau, lalu sebuah kalamba batu di atas undakan memancarkan pilar cahaya ke langit.Three.js · Shader · Canvas 2D
  3. Benteng Pasir Lawan PasangInteraktif20 dtkBenteng Pasir Lawan PasangGim pixel art pantai yang memainkan dirinya sendiri: empat anak meracik bahan di bilah racikan untuk menembakkan sinar pasir yang membangun tembok, pusaran angin yang melempar kepiting, lalu kubah kerang keemasan yang membelah ombak pasang besar sampai istana pasir mereka selamat.Canvas 2D · Pixel art · Partikel
  4. Bioskop Purnama Tengah MalamInteraktif15 dtkBioskop Purnama Tengah MalamKamera berjalan menyusuri lobi bioskop 90-an berkarpet neon dengan dua belas poster film pendek berbingkai lampu, menyobek tiket di loket, menembus tirai merah, lalu mendekat ke layar yang memutar film pixel art tentang perahu di laut malam.Three.js · Canvas 2D · Pixel art
ArtikelSusun brief