Outfit berganti,
satu sapuan piksel.
Kanvas 40×40 ini membelah layar jadi dua channel outfit dan menyatukannya lewat satu garis cahaya yang menyapu dari kiri ke kanan — animasi ringan yang meniru transisi outfit yang lagi tren di reels, dibangun murni dengan canvas 2D.
Siaran langsung dari <canvas>, tanpa gambar, tanpa GIF.
Efek yang lebih murah dijalankan daripada satu GIF loop.
Bukan file media yang di-loop, tapi instruksi gambar yang dijalankan browser tiap frame — jadi ukurannya, warnanya, dan ketajamannya sepenuhnya di tangan kamu.
Kode, Bukan Media
GIF loop 40×40 sekalipun biasanya puluhan–ratusan KB dan tetap harus di-decode tiap kali dimuat. Di sini seluruh animasi cuma ~40 baris JavaScript yang di-cache sekali oleh browser.
Ganti Warna Real-Time
Outfit A dan B masing-masing cuma satu baris fillStyle. Uji 4 varian produk tanpa render ulang video atau export ulang GIF — cukup ubah nilai hex.
Tegas di Semua Ukuran
Raster 40×40 yang di-upscale biasanya buram. Dengan image-rendering: pixelated, tepian piksel tetap tegas dari thumbnail 80px sampai hero layar penuh — tanpa aset resolusi ganda.
Dua clip, satu gradient, satu ilusi transisi.
Belah kanvas jadi dua
Dua ctx.clip() membatasi area gambar: setengah kiri untuk outfit A, setengah kanan untuk outfit B — kepala dan pose tetap sama di kedua sisi.
Warnai tiap sisi berbeda
Tiap clip diberi fillStyle sendiri sebelum digambar, jadi satu bentuk badan yang sama tampil sebagai dua outfit berbeda.
Sapukan garis cahaya
Sebuah linearGradient tipis bergerak dari kiri ke kanan tiap frame, menjadi penanda visual momen "ganti outfit" yang terus berulang.
outfit a — clip kiri | wipe bar | outfit b — clip kanan