Motion design
Irigasi Tetes dalam Satu Bentuk
Satu bentuk tanpa potongan berubah dari tombol hitam "Siram kebun" menjadi pemuat, status pompa, kartu bedeng cabai, slider debit air, sakelar mode otomatis, tab, grafik kelembapan tanah, palet perintah, dan notifikasi, lalu kembali menjadi tombol. Kursor mengklik dan menyeret setiap perubahan di atas kanvas abu-abu hangat dengan satu warna aksen hijau daun.
Prompt
Motion UI setara Dribbble untuk pengendali irigasi tetes kebun cabai fiktif, persegi 960x960, 14 detik, berulang mulus.
Arah: satu bentuk, tanpa potongan. Setiap keadaan adalah elemen yang sama yang berubah ukuran, radius sudut, dan warnanya, sementara isinya berganti dengan blur singkat. Kursor menggerakkan setiap perubahan dengan klik dan seretan sungguhan. Kanvas abu-abu hangat polos (#E6E3DD), komponen hitam dan putih, satu warna aksen hijau daun (#157A47), satu font UI bersih (Geist). Pegas di mana-mana dengan overshoot sangat kecil. Kamera zoom sehingga tiap keadaan mengisi bingkai. Frame terakhir sama dengan frame pertama.
Dilarang: easing memantul, ledakan partikel, glow, gradien pada komponen, ketebalan ikon yang tidak seragam, waktu mati.
Struktur pada grid 120 BPM, 7 birama, sesuatu terjadi di setiap ketukan:
0,0 s tombol hitam "Siram kebun" dengan ikon tetes air, kursor mengklik pada 1,0 s.
1,0 s menyusut menjadi lingkaran pemuat yang berputar.
2,0 s melebar menjadi pil status "Pompa menyala" dengan centang hijau yang tergambar dan angka debit yang menghitung naik ke 12 L/mnt.
3,0 s membuka menjadi kartu putih "Bedeng Cabai, Zona 2" dengan bilah air tersalur: kursor menekan jeda (ikon pause berubah menjadi play), menekan lagi, lalu menyeret bilah progres; liter dan sisa menit ikut berubah.
6,0 s kartu memipih menjadi slider debit air; kursor menyeret melewati batas maksimum dan bentuknya meregang seperti karet, lalu memegas kembali saat dilepas.
7,5 s menjadi sakelar hitam "mode otomatis" yang berpindah ke hijau tepat di ketukan, kenopnya meregang karena tepi depan dan belakang memakai pegas berbeda.
8,5 s kenop berubah menjadi indikator tab cair (Hari ini, Minggu, Bulan) yang tepi depannya mendahului tepi belakang.
10,0 s tab membuka menjadi grafik batang kelembapan tanah 7 hari yang tumbuh berurutan, dengan garis batas siram 40% dan tooltip "Kam · 64%" saat kursor menyorot.
11,5 s grafik menciut menjadi pil ⌘K, melebar menjadi palet perintah, mengetik "jadwal s" sehingga daftar tersaring dari tiga menjadi satu, lalu kursor mengklik "Jadwal siram subuh".
12,5 s menjadi notifikasi hitam "Jadwal subuh tersimpan · 05.00".
13,25 s kembali menjadi tombol "Siram kebun" dengan kursor di posisi awal.
Build: satu file HTML. Setiap gaya dihitung dari waktu di dalam seek(t), tanpa CSS transition dan tanpa state antar-frame. Pegas berupa respons langkah bentuk tertutup; nilai yang berganti target berkali-kali adalah jumlah satu pegas per perubahan. Seretan adalah manipulasi langsung: selama kursor ditahan nilai dihitung dari posisinya, saat dilepas ia memegas dari posisi terakhir.
