Motion design
Senter Rontgen di Atas Biola
Header produk gelap untuk bengkel biola fiktif GESEK: kursor otomatis menyapu biola berpernis cokelat, dan lingkaran sorotnya membuka lapisan rontgen teal yang memperlihatkan batang bas, tiang suara, lining, dan blok kayu di dalamnya. Di akhir, kursor menekan tombol pesan dan sorotan melebar sampai seluruh biola terbuka.
Prompt
Buat header produk satu layar penuh yang gelap dan sinematik untuk bengkel biola fiktif bernama GESEK. Teknologi: satu file HTML, biola digambar prosedural di canvas 2D, teks dan tata letak dengan CSS murni (tanpa library animasi), font Almarai dari Google Fonts.
Latar #272727 dengan aksen krem hangat #E0E1CC dan aksen teal #2ed3b1 yang hanya muncul di lapisan rontgen. Navigasi atas berbentuk grid 1fr auto 1fr: logo "GESEK." 28px tebal di kiri, menu "Biola", "Bengkel", "Kontak" di tengah, dan tautan huruf kapital "LIHAT ISINYA" di kanan.
Di tengah, sebuah biola dilihat dari atas, rebah horizontal dengan gulungan kepala di kanan, berproporsi asli: bout bawah (sisi tailpiece) jelas lebih lebar daripada bout atas (sekitar 20,5 cm lawan 16,5 cm), keduanya membulat penuh, pinggang C yang dalam dan asimetris, serta empat sudut runcing yang menjadi bagian dari garis tepi. Pernis cokelat kemerahan dengan serat kayu cemara halus dan kilau lengkung di tiap bout, purfling ganda di tepi, lubang f hitam, kuda-kuda kayu maple dengan dua kaki, puncak melengkung, dan lubang hati, papan jari dan tailpiece ebony, sandaran dagu ebony berbentuk mangkuk timbul dengan bibir berkilau dan bayangan lembut, kotak pasak berongga dengan dinding samping dan pasak yang porosnya menembus dinding lalu berujung kepala pegangan, empat senar perak, dan bayangan lembut di lantai. Kamera melayang sangat pelan (zoom dan rotasi beberapa derajat), pita cahaya hangat diagonal (blend screen, alpha sekitar 0,3) menyapu pernis dua kali, dan debu halus melayang di udara.
Interaksi utamanya adalah senter rontgen: lapisan kedua berisi biola yang sama sebagai rontgen teal tembus pandang (grid tipis, lining di sepanjang rusuk, blok atas, bawah dan empat blok sudut, batang bas yang panjang, tiang suara bercahaya merah muda di bawah kaki kuda-kuda, rongga leher, pasak yang menembus kotak pasak, dan spiral gulungan), lengkap dengan gelombang suara merah muda yang memancar dari tiang suara dan garis pindai teal terang (inti tipis bercahaya dengan jejak glow) yang bergerak di sepanjang badan. Lapisan ini disembunyikan oleh mask radial-gradient yang mengikuti kursor: jari-jari 185px, inti penuh 140px, tepi feather 45px. Saat senter melewati sebuah bagian, label kecil teal muncul hanya ketika kursor berada sekitar 40px dari bagian itu (misalnya "TIANG SUARA", "BATANG BAS", "BLOK SUDUT"), dan senar yang tersapu bergetar 2 sampai 3px lalu mereda dalam sekitar 0,6 detik.
Karena tidak ada pengguna, buat kursor otomatis yang terlihat: masuk dari kanan bawah, menyapu tiang suara, blok bawah, batang bas, blok sudut di kedua sisi, blok atas, leher, kotak pasak, dan gulungan, lalu berpindah ke tombol CTA. Saat kursor menekan tombol, sorotan melebar dengan easing sampai seluruh biola terbuka dalam rontgen.
Bagian bawah memakai grid 12 kolom. Judul besar kiri bawah "Suara Dari Dalam" (krem, line-height 0.85, letter-spacing -0.07em, sekitar 7vw) muncul per kata dengan animasi naik 20px, durasi 0.6 detik, jeda 0.08 detik antar kata, easing cubic-bezier(.16,1,.3,1). Di kanan bawah, paragraf "Batang bas, tiang suara, dan rusuk cemara dirakit tangan agar setiap nada lahir utuh. Semua bagiannya, terbuka untuk dilihat." lalu tombol pil krem "Pesan biolamu" dengan lingkaran hitam berisi panah, keduanya fade-up dengan jeda 0.5 dan 0.7 detik. Veil gradien vertikal menggelapkan atas dan bawah supaya teks tetap terbaca. Durasi 13 detik.



