01Fitur 02Spesifikasi 03Cara Pakai Coba Demo →
Blob aktif 0 · Kecepatan rata-rata 0.00 px/f · Rona saat ini

Warna yang meleleh mengikuti kursormu.

Gumpalan cahaya bertenaga fisika lembut, saling menarik dan berbaur di canvas seperti tinta di air. Cocok jadi latar video santai, live wallpaper, atau visual pengiring musik lo-fi.

Lihat Spesifikasi

Gerakkan mouse atau jari di atas layar untuk menarik blob mendekat · tekan H untuk sembunyikan antarmuka

Gulir untuk detail
Kenapa animasi ini

Cahaya yang berperilaku seperti cairan.

Bukan video loop, melainkan beberapa lingkaran gradien yang dipadukan lewat blur dan kontras tinggi sehingga tepi-tepinya melebur jadi satu — efek metaball klasik, dijalankan ringan langsung di browser.

Perpaduan metaball

Filter blur dan contrast pada canvas membuat blob-blob terpisah tampak menyatu dan berpisah secara organik, bukan sekadar bertabrakan.

Magnet kursor

Setiap blob perlahan tertarik ke posisi mouse atau sentuhan, memberi rasa bahwa layar merespons gerakan penonton.

Pad ambien & gema

Tiga osilator sine lembut diberi delay dan feedback untuk membentuk lapisan suara lo-fi yang terus bergema pelan.

Petikan nada acak

Nada dari tangga nada pentatonik dipetik secara acak tiap 0,9–2,1 detik, menjaga suasana tetap santai dan tak repetitif.

Jumlah blob adaptif

Enam blob di layar lebar, empat di layar sempit — menjaga animasi tetap mulus di perangkat kecil sekalipun.

Sepenuhnya responsif

Canvas menyesuaikan resolusi dan rasio piksel perangkat secara otomatis, dari layar telepon hingga proyektor lebar.

Di balik layar

Lembar spesifikasi.

Angka nyata dari mesin simulasi yang sedang berjalan di bagian atas halaman ini.

ParameterNilaiKeterangan
RenderingCanvas 2D APIDigambar ulang tiap frame lewat requestAnimationFrame, tanpa dependensi eksternal.
Jumlah blob4 (mobile) / 6 (desktop)Ambang batas di lebar layar 700px menentukan jumlah blob yang dirender.
Radius blob60 – 140 pxDitentukan acak saat inisialisasi agar komposisi tidak seragam.
Filter visualblur(22px) contrast(24)Kombinasi inilah yang menghasilkan tepi menyatu khas metaball.
Tarikan kursor0.00003 × jarakPercepatan menuju posisi mouse/sentuhan, terasa halus bukan instan.
Audio engineWeb Audio APIPad 3 osilator sine + delay 0,45 dtk dengan feedback 0,3 dan LFO 0,06 Hz.
Interval petikan900 – 2100 msNada dipilih acak dari enam nada tangga pentatonik C mayor.
Fade masuk audio3 detikGain dinaikkan bertahap saat backsound pertama kali diaktifkan.
Cara pakai

Tiga langkah, layar penuh.

01 — Suara

Aktifkan backsound

Klik tombol backsound pada demo di atas untuk memulai pad ambien dan petikan nada lo-fi yang bergema pelan.

02 — Gerakan

Gerakkan mouse atau jari

Blob-blob akan perlahan tertarik mengikuti posisi kursor, membentuk aliran warna baru setiap kali digerakkan.

03 — Rekam bersih

Tekan H untuk sembunyikan UI

Semua elemen antarmuka menghilang halus, menyisakan layar gumpalan cahaya penuh — siap direkam atau ditayangkan.

Biarkan warnanya mengalir.

Kembali ke Demo ↑