Demo hidup · Lenis + GSAP

Halaman yang terasa
kelihatan mahal

Scroll-nya halus karena Lenis. Gerak-geraknya karena GSAP ScrollTrigger. Nggak ada satu pun foto di halaman ini — semua efek, nol gambar berat.

136 KB JavaScript Coba tekan tombol kanan bawah untuk membandingkan.

↓ scroll pelan-pelan

Efek 1Teks yang muncul saat di-scroll

Ini yang paling sering bikin situs terasa "hidup": elemen masuk sedikit demi sedikit, bukan semuanya muncul serentak. Ada tiga baris di bawah ini yang muncul berurutan.

Yang penting soal detail: gerakannya pendek — sekitar 26 piksel dan kurang dari setengah detik. Kalau terlalu jauh atau terlalu lama, kesannya jadi murah, bukan premium.

Semuanya dinonaktifkan otomatis kalau HP-nya menyetel "reduce motion" — jadi tetap sopan untuk yang sensitif terhadap gerakan.

Efek 2Parallax: tiga lapis, tiga kecepatan

Kartu-kartu di bawah bergerak dengan kecepatan berbeda saat di-scroll. Ini trik paling tua di buku, tapi tetap yang paling efektif memberi kesan kedalaman.

Lapis cepat

Ikut hampir secepat scroll.

Lapis sedang

Sedikit tertinggal.

Lapis lambat

Paling tertinggal — inilah kedalamannya.

Di HP sempit kartunya menumpuk vertikal; parallax tetap jalan.

Efek 3 · dipin + scrub

Section ini ditahan di tempat sementara halaman terus di-scroll,
dan angka di atas naik mengikuti posisi scroll.

Efek 4Efek ala React Bits — versi vanilla

React Bits butuh project React, sementara halaman ini HTML statis. Jadi tiga efek khasnya gua tulis ulang pakai CSS + canvas kecil: gradient bergerak, marquee, dan blob yang mengikuti kursor. Hasilnya mirip, ongkosnya jauh lebih kecil — dan ini yang gua pilih untuk halaman statis.

Animated gradient

CSS murni, nol byte JavaScript.

salin tempel·tanpa dependency·salin tempel·tanpa dependency·

Marquee

CSS murni juga — cuma animasi transform.

Blob mengikuti kursor

Beberapa baris JS: kursor di-lerp, bukan diikuti kaku. Di HP efek ini dimatikan.

· · ·

Progress bar

Garis tipis di paling atas halaman, digerakkan posisi scroll.

OngkosnyaApa yang sebenernya dibayar

Ini bukan situs ajaib. Efek-efek di atas menukar kehalusan dengan beban JavaScript. Angka di bawah diukur oleh halaman ini sendiri di browser yang sedang kamu pakai — bukan dari brosur.

Yang diukur	Nilai	Keterangan
JavaScript perpustakaan	136 KB	Lenis 18,7 + GSAP 72,9 + ScrollTrigger 44,6 (minified, sebelum gzip)
Gambar	0 KB	Halaman ini sengaja nol gambar
Byte yang benar-benar terunduh	…	dibaca dari `performance` API — 0 KB kalau berkasnya sudah ada di cache browser
DOM siap (DOMContentLoaded)	…	ms sejak navigasi
Halaman selesai dimuat	…	ms sejak navigasi
Tugas panjang (>50 ms)	…	yang bikin scroll tersendat
Sumber berkas	server sendiri	bandingkan sendiri: tambahkan `?src=cdn` di URL, muat ulang, lalu lihat lagi tabel ini

Yang PASTI, dan yang jangan dipercaya Pasti (deterministik) — ukuran berkas. Lewat CDN terkirim 48 KB karena CDN meng-gzip otomatis; dari server ini 135 KB karena blok Caddy ican.product-sid.us belum punya direktif encode. Perbaikannya satu baris — encode zstd gzip di blok itu → turun ke ±48 KB juga. Jadi: kalau host sendiri tanpa kompresi, versi CDN justru lebih ringan 3×.

Jangan dipercaya — angka waktu di tabel ini (kalau kamu memuatnya dari uji otomatis, bukan dari HP-mu). Dua kali uji gua dengan kondisi sama memberi 0,8 dtk dan 3,7 dtk untuk variasi yang sama; variansnya terlalu besar untuk disimpulkan. Yang benar: buka di HP kamu — angka di tabel ini diukur di browser kamu sendiri.

Kesimpulan yang jujur Sebelum menebar efek ini ke situs yang benar-benar dipakai orang: pasang di satu halaman, ukur di HP kelas menengah, dan pastikan reduce motion dihormati. Kalau angkanya memburuk dan efeknya nggak menambah kejelasan — cabut. Efek yang mahal tapi nggak membantu cuma jadi ongkos.