Motion design
Membuat Motif Batik di Ponsel
Panduan aplikasi tiga langkah di atas latar lukisan cat minyak warna pasir: kursor sentuh memilih motif kawung, mengganti warnanya dari sogan ke indigo dan merapatkan polanya, lalu kain batik hasilnya digantung di batang bambu, melambai tertiup angin, dan disimpan.
Prompt
Buat video motion design vertikal 720x1280 berdurasi 14 detik dengan HTML, CSS, SVG, Canvas 2D dan GSAP: tutorial tiga langkah untuk aplikasi fiktif bernama Nitik, aplikasi pembuat motif batik di ponsel.
Gaya visual: latar lukisan cat minyak prosedural (sapuan kuas lebar yang lembut dan sedikit buram, warna pasir #E4C7A2, krem #F4E8D6, terakota muda dan sedikit biru abu-abu), bergeser dan membesar sangat pelan. Di atasnya kartu putih bersudut 26px dengan bayangan lembut, logo garis kawung empat kelopak di kiri atas. Tipografi Inter Tight berat 500 dengan tracking rapat: baris pertama hitam, baris kedua abu-abu. Ponsel gelap modern (bezel hitam, dynamic island, status bar 9:41, tombol samping) dengan UI gelap #09090A, teks putih, keterangan abu-abu, dan aksen emas #E9B04F. Sentuhan ditandai lingkaran kursor putih transparan yang mengecil saat ditekan dan memancarkan riak.
Pembuka (0-2,1 dtk): kartu putih tinggi di tengah dengan label "Panduan 3 langkah", judul besar "Membuat motif" dan "batik di Nitik." (tracking merapat pelan), merek "Nitik" di kanan atas. Di bagian atas kartu, satu motif kawung besar digambar seperti berkas desain: garis bantu kotak, diagonal dan lingkaran muncul, empat kelopak tergambar garis demi garis lalu terisi gradasi krem dengan inti cokelat soga, sambil berputar pelan.
Transisi (2,1-3,2 dtk): isi pembuka menghilang, kartu menyusut jadi kartu langkah di atas dengan penghitung "01 / 03", lalu ponsel naik dari bawah dengan easing expo.
Langkah 1 (3,2-5,1 dtk): kartu "Pilih motif dasar." / "Ada empat pola klasik." Layar "Motif baru" berisi judul "Pertama, pilih motif dasarmu.", subjudul emas "Pola warisan dari Jawa" dan kisi 2x2 pratinjau SVG yang bergerak pelan: Kawung, Parang, Truntum dan Mega Mendung, masing-masing dengan keterangan kecil. Kamera mendekat, kursor mengetuk Kawung: tepinya menyala emas, muncul lencana centang, tiga ubin lain meredup, tombol "Lanjut" aktif lalu diketuk.
Langkah 2 (5,1-9,4 dtk): layar bergeser ke "Editor motif", kartu berganti "Warnai dan atur rapatnya." / "Pratinjau ikut berubah." dengan penghitung "02 / 03". Pratinjau persegi besar motif kawung sogan (cokelat dan krem). Kursor mengetuk swatch Indigo: warna indigo menyebar melingkar dari titik sentuh dengan cincin emas, label "Kawung · Sogan" berganti "Kawung · Indigo". Lalu kursor menyeret slider "Kerapatan" dari kiri ke kanan sehingga motif mengecil dan nilainya berubah dari "3 × 3" ke "5 × 5", kemudian mengetuk "Terapkan ke kain".
Langkah 3 (9,4-12,4 dtk): layar "Pratinjau kain" dengan judul "Kawung Indigo." / "Siap dibatik." dan keterangan emas "Katun primisima · 2 × 1,15 m". Kain batik indigo terbuka ke bawah dari batang bambu yang digantung tali, lalu melambai dengan lipatan berbayang, ujung berumbai dan ayunan angin (Canvas 2D per kolom). Muncul tabel "Rincian" (Motif, Pewarna, Kerapatan). Kamera mendekat ke kain, lalu kursor mengetuk "Simpan motif": tombol berubah emas dengan centang tergambar dan tulisan "Tersimpan", notifikasi "Motif tersimpan" turun dari atas.
Penutup (12,4-14 dtk): kartu berganti "Motifmu sudah jadi." / "Tinggal dibatik." dengan penanda emas "Selesai", ponsel mundur pelan sementara kain terus melambai.
Semua teks di layar berbahasa Indonesia. Pergantian teks kartu memakai mask per baris dari bawah ke atas, perpindahan layar memakai dorongan horizontal expo.inOut, dan ponsel selalu sedikit melayang.
