Animasi Background Halus Tanpa Library JavaScript

Commit terakhir yang saya push ke situs ini nambahin efek “signal field” — grid tipis yang drift pelan plus partikel-partikel kecil yang mengambang di background, ditambah glow yang ngikutin posisi kursor. Nggak pakai canvas, nggak pakai library animasi.

Grid dan partikelnya murni CSS. Grid-nya dibuat dari dua linear-gradient (garis horizontal dan vertikal) yang di-tile jadi pattern 64x64px, dianimasiin geser posisi lewat @keyframes gridDrift. Partikelnya cuma <span> kosong yang posisi, ukuran, durasi, dan delay animasinya di-random di frontmatter Astro (Math.random()), lalu dianimasiin naik-turun (floatY) dan berkedip opacity-nya (pulseGlow) pakai CSS murni juga.

Detail yang menarik: posisinya di-random pas build, bukan pas runtime. Karena Math.random() jalan di frontmatter komponen Astro, itu dieksekusi sekali pas situsnya di-build jadi HTML statis — bukan tiap kali halaman dibuka. Efeknya, tiap halaman (home, blog post, portfolio) punya layout partikel yang beda satu sama lain (karena masing-masing di-render terpisah pas build), tapi pengunjung yang sama buka halaman yang sama berkali-kali bakal liat pola partikel yang identik terus. Trade-off yang saya terima demi nggak butuh JavaScript generate posisi di client.

Satu-satunya JavaScript yang jalan cuma buat glow yang ngikutin kursor — itu pun dibatesin ketat: cuma aktif kalau device-nya punya hover dan pointer presisi (matchMedia('(hover: hover) and (pointer: fine)')), jadi nggak nyalain listener yang nggak guna di HP/tablet. Ada juga pengecekan prefers-reduced-motion sebelum listener-nya dipasang sama sekali.

Aksesibilitas nggak saya lewatin. Di prefers-reduced-motion: reduce, grid berhenti gerak, transisi glow dimatiin, dan partikel berhenti animasi dengan opacity statis. Di prefers-reduced-transparency: reduce dan pas nge-print halaman, seluruh efeknya disembunyiin total — nggak ada alasan buat maksain efek dekoratif di kondisi itu.

Pelajarannya: animasi dekoratif skala kecil kayak gini nggak butuh library seberat apapun. CSS @keyframes plus sedikit randomization di build time udah cukup buat efek yang kelihatan hidup, dan constraint aksesibilitas (reduced motion, reduced transparency, print) yang justru butuh perhatian lebih daripada animasinya sendiri.