Mascot SVG ยท eye tracking
Cursor lu punya teman baru.
Lookie nggak ikut-ikutan. Dia mengikuti section yang lagi lu baca, matanya mengawasi mouse lu.
Dia cuma ngelihatin. Santai.
Ekspresi
8 ekspresi, satu baris atribut
Tambah data-mascot-expr="loading" ke section manapun dan Lookie otomatis ganti raut wajah pas section itu masuk layar. Klik salah satu ekspresi di bawah buat langsung liat di Lookie.
Cara kerja
Aset SVG
Mascot digambar sebagai satu file SVG dengan animasi idle: bob naik turun dan kedip tiap 4,4 detik. Bentuk mata dan mulut adalah varian dalam SVG yang di-toggle lewat class ekspresi.
Ikut section
Scroll-spy di loop requestAnimationFrame: section yang menutupi titik 80% layar jadi aktif, Lookie meluncur ke section itu dengan lerp lalu ganti ekspresi sesuai atributnya.
Mata mengawasi
Pupil menghitung arah cursor dari pusat mata dan menggeser dengan lerp, dikunci di dalam bola mata. Mouse pakai mousemove, sentuhan pakai touchmove.
Auto state
Pakai data-lookie-auto dan Lookie nunjukin loading kalau ada fetch yang molor lebih dari 300 ms, balik sendiri pas kelar. Blink dan bob jalan sendiri di CSS.
Aksesibel
prefers-reduced-motion mematikan semua gerak. Mascot dekoratif murni, pointer-events: none, tidak menghalangi klik atau pembaca layar.