Explainer

Kisah Tetes Kedua dari Dapur Warga

Animasi kolase gambar tangan menceritakan perjalanan komunitas fiktif Tetes Kedua dari 2019 sampai 2025: Bu Rani menuang jelantah dari wajan ke jeriken, titik setor menyebar di peta kota pesisir, jelantah diolah jadi biodiesel, lalu perahu nelayan melaut dengan bahan bakar itu.

Explainer · SVG, GSAP, CSS · 20 detik · 1280×720

Prompt

Buat animasi JavaScript murni (SVG + GSAP) berdurasi 20 detik bergaya kolase gambar tangan yang jenaka untuk halaman "Tentang Kami" komunitas fiktif Tetes Kedua, pengumpul minyak jelantah. Latar abu muda bertekstur kertas dengan garis sungai dan jalan peta yang pudar. Setiap babak punya label tahun di atas selotip kuning dengan huruf spidol, kartu-kartu kertas putih yang ditempel selotip warna, catatan tempel kuning, dan satu strip kertas sobek di bawah berisi satu kalimat cerita. Semua garis berwarna hitam dan sedikit bergetar seperti digambar ulang tiap beberapa frame. Babak 1 (2019): potongan ilustrasi Bu Rani berkerudung merah dengan spatula, tangan berlengan baju hijau memiringkan wajan di atas corong sehingga jelantah mengalir ke jeriken plastik bergagang dan bertutup merah yang perlahan terisi, catatan tangan "bukan ke selokan!" di sampingnya, dan tabel SETORAN.XLS yang barisnya tercoret dan dicentang satu per satu. Di antara babak, selembar kertas berpetak berwarna lembut menyapu layar membawa angka tahun besar, subjudul tulisan tangan bergaris bawah, selotip di sudut, dan coretan kecil (tetesan, pin, saringan, atau perahu) sebagai transisi. Babak 2 (2021): di kertas milimeter, garis pantai kota pesisir fiktif tergambar sendiri lalu lautnya diwarnai biru muda, lengkap dengan sungai, kios pasar, dermaga pelabuhan, dan pulau kecil berlabel, puluhan pin tetesan bermunculan di daratan, catatan tempel menghitung titik setor sampai 214 lalu berhenti sejenak, dan kupon "2 liter = 1 kg beras" dicap SAH. Babak 3 (2023): diagram alur di kartu panjang, jeriken, saringan, tangki pengolah dengan gelembung dan jarum pengukur, sampai drum biodiesel, dihubungkan pipa yang dialiri tetesan, dengan penghitung naik ke 12.400 liter. Babak 4 (2025): kartu laut bergambar tangan dengan ombak bergerak dan perahu nelayan bercerobong yang berlayar mengepulkan asap abu-abu tipis yang lembut, naik dan memudar ke belakang, catatan tempel 31 perahu, lalu stempel bundar oranye TETES KEDUA SEJAK 2019 dihentakkan di akhir. Gerak terasa seperti potongan kertas: muncul dengan pantulan kecil, sedikit miring, ritme santai tapi tidak pernah diam.

Video Explainer lainnya

  1. Kenapa Sabun Mengangkat MinyakExplainer20 dtkKenapa Sabun Mengangkat MinyakSpidol menggambar catatan sketsa hitam putih: bahan air, minyak, dan sabun, molekul sabun dengan kepala suka air dan ekor suka minyak, lalu noda minyak di tengah piring dikepung molekul sabun sampai terangkat menjadi misel. Garis air menyapu misel keluar kotak, empat poin ringkasan dicentang satu per satu, dan piring berkilau bersih.SVG · CSS
  2. Gumuk Pasir yang BerjalanExplainer20 dtkGumuk Pasir yang BerjalanSimulasi 3D sebuah gurun dilihat dari atas lalu dari samping: angin meniup butir pasir dari sebelas tumpukan bulat sampai masing-masing menjadi gumuk bulan sabit (barkan) yang terpisah, lereng luncurnya longsor, lalu gumuk itu berjalan puluhan meter searah angin. Label penjelas menandai punggung landai, lereng luncur, ujung tanduk, dan jarak pergeseran dari bendera tahun ke-6.Three.js · Shader · Fisika
  3. Lab Garis Geser Kunci SilinderExplainer20 dtkLab Garis Geser Kunci SilinderDi ruang lab dengan panel skema yang menyala, rak kunci, dan lemari laci, sebuah kunci silinder kaca berbingkai kuningan berdiri di meja kerja. Kursor otomatis mencoba kunci kuningan yang salah lalu yang benar sampai kelima pin rata di garis geser, silinder berputar, grendel tertarik, dan kamera mendekat ke tumpukan pin saat status berubah menjadi terbuka.Three.js · Shader · WebGL
  4. Lab Pasir: Nada Menjadi PolaExplainer20 dtkLab Pasir: Nada Menjadi PolaDi sebuah laboratorium gelap bercahaya tembaga, kursor otomatis menggeser nada generator sinyal sehingga pasir di atas pelat kuningan yang bergetar berkumpul membentuk tiga pola garis simpul yang makin rumit. Peta getar berwarna menunjukkan bagian yang bergerak dan garis yang diam, lalu setiap pola tercatat di bingkai dinding.Three.js · Shader · Partikel
ArtikelSusun brief