Interaktif
Adu Kelereng Mata Kucing
Tujuh kelereng kaca mata kucing berwarna permen tersusun di tengah nampan keramik krem. Kursor menarik gacoan dan menembak sampai kelereng berhamburan keluar lingkaran, memutar meja, mengganti palet warna, lalu kelereng melayang membentuk cincin dan jatuh kembali ke formasi awal.
Prompt
Buat "Adu Kelereng": satu file HTML mandiri (semua JS/CSS inline, tanpa build step) berisi mainan interaktif kelereng kaca mata kucing di atas nampan keramik bundar berwarna gading. Render dengan Three.js (WebGL). Setiap kelereng memakai shader kustom: ray-march bilah warna terpilin yang diberi shading dan kilap, tersimpan di bagian dalam bola kaca tanpa menyentuh permukaannya, lantai dan garis kapur di belakangnya terlihat terbias di dalam kaca, pantulan Fresnel dari softbox studio, dan kilau specular tajam. Tiap kelereng punya bayangan lembut yang paling gelap di titik sentuh (oklusi kontak) dan membawa titik kaustik berwarna di dalamnya; saat kelereng terangkat bayangannya melebar dan memudar. Fisika 2D: tumbukan elastis antar kelereng, gesekan gulir, pantulan di bibir nampan, rotasi menggelinding yang benar. Lantai nampan bertekstur canvas: bintik halus, lingkaran kapur terakota, dan garis tembak putus-putus. Tujuh kelereng tersusun heksagonal di dalam lingkaran; gacoan bening yang lebih besar dengan bilah biru tinta dan kuning emas menunggu di garis tembak. Tarik gacoan ke belakang untuk membidik (titik-titik arah, tali ketapel, cincin kekuatan, label persen), lepas untuk menembak. Kelereng yang melewati lingkaran memunculkan label "+1" dan menambah skor. Seret bibir nampan untuk memutar meja (label kecil "Putar meja" di samping kursor). UI editorial di atas latar krem hangat: kicker kecil berhuruf kapital, judul serif "Adu Kelereng" dengan kata kedua miring, deskripsi singkat, tombol ikon bundar di kanan atas, dan toolbar pil kaca di bawah berisi swatch palet (Pelangi, Laut, Senja, Hutan, Permen) beserta namanya, tombol gelap "Susun Ulang", serta angka serif besar untuk jumlah kelereng yang keluar dan jumlah tembakan. Saat dibuka, demo otomatis langsung berjalan dengan kursor terlihat: tembakan pembuka memecah susunan, kursor menyeret bibir nampan untuk memutar meja, tembakan kedua ke kelereng yang tersisa, palet diganti ke Laut sambil kelereng meloncat kecil, lalu Susun Ulang: angka keluar dan tembakan kembali ke nol bersamaan, gacoan melompat kembali ke garis tembak, kelereng terangkat membentuk cincin melayang yang berputar di atas nampan, kemudian jatuh satu per satu ke formasi awal. Sentuhan atau klik pengguna mengambil alih kapan saja.
