Indeks Serangga dalam Satu Bentuk

<arah> Film motion UI 14 detik bergaya Dribbble untuk aplikasi indeks serangga fiktif bernama Indeks Serangga. Satu bentuk tidak pernah terputus: sebuah lensa bulat hijau tua (#1D5A44) dengan tombol hitam di tengah terus berubah ukuran, radius, dan warna menjadi setiap komponen antarmuka. Kanvas abu hangat terang (#E7E3DC), kartu putih gading (#FAF7F1), hitam (#16140F), tipografi Geist dan Geist Mono, ikon bergaris konsisten. Ilustrasi kumbang SVG digambar prosedural dengan kilap logam, tetap dengan warna aslinya. Kursor yang terlihat menggerakkan setiap interaksi: klik, seret, dan hover. Pakai spring teredam ketat dengan overshoot sangat kecil, dihitung closed-form sebagai fungsi waktu murni, satu respons spring per perubahan target. Konten berganti dengan blur singkat, waktu masuk dan keluar dipisah supaya label tidak pernah bertumpuk. Kamera sedikit memperbesar saat bentuknya kecil supaya antarmuka tetap besar dan terbaca. Akhir video kembali tepat ke lensa pembuka untuk loop mulus. Dilarang: pantulan berlebihan, ledakan partikel, glow, gradasi di chrome UI, ruang mati, layout dashboard generik, pergantian adegan mendadak. </arah> <struktur> 120 BPM, 28 ketukan, sekitar 14 detik. Selalu ada yang terjadi di setiap ketukan. 1. Lensa hijau tertutup di tengah, kursor mendekat dan mengklik tombol tengahnya. 2. Tombol menjadi loader pindai melingkar, lalu berubah menjadi tanda centang, dan cangkang lensa meregang menjadi kartu ringkas "1 spesies cocok" dengan header hijau. 3. Kartu membesar menampilkan Kumbang Atlas jantan bertanduk tiga; nomor, nama, famili Scarabaeidae, panjang, habitat, dan waktu aktif muncul berurutan. 4. Kursor mengklik tombol putar Sayap: tombol menjadi jeda, gelombang ringkas beranimasi, dan kumbang membuka elitra lalu mengepakkan sayap belakang. 5. Gelombang mendatar menjadi slider Perbesaran. Kursor menyeret kenop berbentuk lensa mini ke 3,0×, ilustrasi ikut membesar, seretan melewati batas meregangkan slider secara elastis, lalu dilepas dan mengendap. 6. Slider memampat menjadi sakelar. Kursor membalik sakelar ke Betina: ilustrasi berganti ke betina tanpa tanduk berwarna cokelat kusam, panjang tubuh berubah menjadi 3–6 cm. 7. Kenop sakelar meregang menjadi indikator tab cair dengan tepi depan dan belakang memakai spring berbeda. Kursor memilih tab Siklus. 8. Kartu membuka grafik lama tiap tahap hidup (telur, larva, pupa, dewasa, dalam bulan); batang tergambar sesuai ketukan, hover pada batang larva memunculkan tooltip. 9. Grafik menarik diri, wadah memampat menjadi kolom pencarian, lalu meluas menjadi command palette. Kata "rusa" diketik dan hasil tersaring; kursor memilih Kumbang Rusa Pelangi yang menampilkan ilustrasi mini dan famili Lucanidae. 10. Tombol Enter ditekan, palette terlipat menjadi notifikasi gelap "Masuk koleksi". Tanda centangnya menjadi tombol tengah lensa, notifikasi menyusut menjadi cangkang bulat hijau, dan kursor kembali ke posisi awal. </struktur> <build> Satu file HTML mandiri berukuran persegi. Satu elemen luar yang sama dipakai sepanjang urutan. Semua gaya animasi dihitung dari waktu setiap frame, tanpa transisi CSS atau state yang dibawa antar frame. Seretan adalah manipulasi langsung, nilai mengikuti posisi kursor dan setelah dilepas kembali dengan spring. Lintasan kursor memakai spline periodik supaya posisi dan kecepatannya cocok di batas loop. </build>