AI Ghibli Effect

Kenapa ini bukan GIF biasa

Kecil di ukuran, hidup di gerakan

Tiga keputusan desain yang bikin animasi ini terasa lebih halus daripada bobotnya.

40×40, bukan 4K

Resolusi logisnya sengaja rendah, lalu dibesarkan dengan image-rendering: pixelated. Hasilnya terasa seperti sprite era konsol lama, bukan foto yang dipaksa jadi piksel.

Gerak dari rumus, bukan frame

Tidak ada sprite sheet atau video. Napas matahari, ayunan awan, dan kepakan burung masing-masing punya periode sinus sendiri — jadi tidak pernah terasa berulang secara mekanik.

Satu file, nol dependensi

Cuma HTML dan Canvas 2D API bawaan browser. Tidak ada library, tidak ada build step — salin, tempel, jalan di mana saja.

Urutan Lapisan

Setiap frame dilukis ulang, belakang ke depan

Tidak ada layer Photoshop di baliknya — ini urutan gambar sungguhan yang dijalankan ulang di setiap frame lewat requestAnimationFrame.

Langit

Gradasi linear dua warna jadi kanvas suasana — pagi jingga, siang biru, atau malam ungu tua, tergantung channel yang aktif.

Matahari

Radiusnya berosilasi lewat Math.sin(t/400), ditambah cincin glow transparan di luarnya supaya terasa berdenyut, bukan sekadar membesar-mengecil kaku.

Awan

Tiga lingkaran bertumpuk digeser horizontal oleh Math.sin(t/900) — jauh lebih lambat dari matahari, biar tidak terasa searah gerak yang sama.

Bukit

Dua kurva quadraticCurveTo bertumpuk memberi ilusi kedalaman — bukit depan lebih gelap, bukit belakang lebih terang, seperti kabut jarak jauh.

Burung

Guratan tiga titik naik-turun dengan sinus ketiga, periodenya sengaja berbeda dari matahari dan awan supaya tidak pernah sinkron sempurna.

Tempel di Proyekmu

Cukup elemen canvas dan satu fungsi gambar

Tidak perlu npm install. Tidak perlu bundler. Buka file HTML-nya di browser, sudah jalan.

<!-- 1. taruh elemen kanvasnya -->
<canvas id="scene" width="40" height="40"></canvas>

// 2. panggil draw() di dalam loop rAF
function loop(t){
  drawScene(ctx, t, PALETTES.day);
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);