Explainer
Merapikan Halaman Lacak Paket
Halaman lacak paket kurir fiktif Jinjing yang penuh kode gudang dirapikan dalam tiga keputusan desain: kode diterjemahkan jadi kalimat, estimasi tiba naik ke atas sementara riwayat dilipat, lalu seluruh halaman berubah menjadi kerangka cetak biru berlabel ukuran sebelum kembali utuh.
Prompt
Buat video penjelas keputusan UX berdurasi 20 detik (1280x720) dengan HTML, CSS, dan GSAP. Subjeknya halaman web lacak paket untuk kurir fiktif bernama Jinjing, digambar sebagai antarmuka terang yang realistis: kartu jendela putih bersudut bulat di latar abu sangat muda, sidebar ikon tipis, breadcrumb, judul nomor resi JNG-4471-0923, kolom Detail di kiri (pengirim, penerima, asal, tujuan, berat, layanan) dan tab Riwayat di kanan dengan sembilan baris status. Font Inter untuk antarmuka, JetBrains Mono untuk kode dan label teknis. Satu warna aksen cyan (#1fa9c9) dipakai khusus untuk anotasi desainer.
Di bawah kartu ada baris keterangan bergaya catatan presentasi: lencana bulat gelap bernomor, label kapital kecil, satu kalimat hitam yang muncul kata demi kata, lalu kalimat kedua berwarna cyan.
Bab 01, BAHASA MANUSIA (0-6 dtk): kotak sorot cyan menyapu enam baris yang hanya berisi kode gudang seperti OUT-DLV dan DEP-HUB SOC-02 > CGK-01, penghitung 6/9 muncul, lalu tiap kode berubah dengan efek acak huruf menjadi kalimat biasa seperti 'Kurir sedang menuju alamatmu'.
Bab 02, SATU JAWABAN DI ATAS (6-12 dtk): enam baris riwayat lama meredup dan terlipat menjadi tautan 'Tampilkan 6 riwayat lainnya', lalu kartu estimasi tiba membuka dari atas: 'Hari ini, 10.00-14.00', bilah kemajuan empat tahap (Dikemas, Berangkat, Kota tujuan, Diantar) terisi, ikon mobil boks kecil terus melaju di atasnya menuju titik Diantar yang berdenyut, disertai anotasi cyan 'dibaca pertama'.
Bab 03, KERANGKA (12-18 dtk): seluruh warna halaman bergeser ke cyan pucat, setiap blok digambar ulang sebagai garis kerangka dengan sudut siku, kolom grid, garis ukur jarak, label skala huruf (32, 14, 11), garis pindai horizontal yang menyapu naik turun, dan bingkai sorot berlabel TINGKAT 1, 2, 3 yang berpindah dari kartu estimasi ke riwayat lalu ke tautan lipatan, sementara kamera sedikit mendekat ke kartu estimasi.
Penutup (18-20 dtk): kerangka memudar, halaman kembali berwarna utuh, dan keterangan terakhir berbunyi 'Satu pertanyaan, dijawab di baris pertama.' Gerak tenang dan presisi dengan easing power3/expo, tanpa jeda mati.
