← Belajar

🎨 3 Library Frontend biar Website Kelihatan Premium (Day 1)

Bedah reel “3 Frontend Libraries to Build Premium Websites — Day 1” dari kreator kevin · Developer | Coding (Instagram). Nama library & semua angka di bawah gua cek sendiri ke npm, GitHub, dan situs resminya pada 9 Okt 2026 — bukan disalin dari caption.

Baca ini dulu. Reel-nya tanpa trek suara (yang diunduh cuma video), jadi isinya gua baca dari teks & kode yang tampil di layar, bukan dari transkrip. Reel ini juga bergaya mesin konten: berakhir dengan CTA “Comment ‘Libraries’ — I’ll send you all the Links”, jadi link-nya tidak pernah dibagikan terbuka; tiga library-nya gua identifikasi & verifikasi sendiri.

koreksi Paket npm bernama react-bits bukan React Bits yang dimaksud di sini. Yang di npm itu paket lama (“Common React Interfaces”, terakhir diubah 25 Jun 2022). React Bits yang benar ada di reactbits.dev dan cara pakainya salin-tempel source, bukan npm install.

Tangkapan layar paket Lenis di npm: 0 dependencies, npm i lenis, lisensi MIT — 1 · **Lenis** — **0 dependency**, `npm i lenis`, MIT

Potongan kode inisialisasi Lenis tiga baris dengan opsi autoRaf — Lenis dipakai cuma 3 baris

Halaman GSAP: The go-to animation library, ScrollTrigger dan plugin SVG — 2 · **GSAP** — *“the go-to animation library”*

React Bits: kumpulan besar komponen animasi React yang bisa disalin-tempel — 3 · **React Bits** — kumpulan komponen salin-tempel

1. Tiga library-nya (terverifikasi 9 Okt 2026)

#	Library	Gunanya	Lisensi / harga	Hasil cek langsung
1	Lenis `npm i lenis`	Smooth scroll — scrolling jadi halus & ber-inersia (“buttery smooth scrolling”). Ini efek yang paling cepat bikin situs terasa premium.	MIT — gratis penuh	terverifikasi versi 1.3.26 (18 Sep 2026) · repo `darkroomengineering/lenis` · dibuat 2023
2	GSAP `npm i gsap`	Animasi — timeline animasi + ScrollTrigger (animasi yang jalan mengikuti posisi scroll: parallax, teks muncul, angka naik).	“Standard No-Charge License” — gratis, efektif 30 Apr 2025, pemiliknya sekarang Webflow. Plugin yang dulu berbayar (SplitText, MorphSVG) ikut gratis. syarat dilarang dipakai bikin tool animasi visual yang menyaingi Webflow.	terverifikasi versi 3.15.0 · repo `greensock/GSAP` · ada sejak 2014
3	React Bits `reactbits.dev`	Komponen React siap salin — 215+ komponen animasi, background, text effect, micro-interaction. Gaya shadcn: source-nya jadi milikmu, tiap nilai bisa diatur.	Open-source gratis + ada React Bits Pro (berbayar) untuk blok halaman & template Next.js	terverifikasi 48,8K ★ GitHub · 5 kategori · 4 varian (JS/TS × CSS/Tailwind)

2. Kenapa ketiganya dipakai bareng

Lenis memperbaiki cara halaman bergerak saat di-scroll — tidak mengubah desain, tapi langsung mengubah kesan.
GSAP + ScrollTrigger mengisi halaman dengan animasi yang terikat posisi scroll. Ini tulang punggung situs-situs yang menang penghargaan (Awwwards-style).
React Bits menyediakan komponennya supaya tidak perlu bikin dari nol — tinggal salin yang dibutuhkan.

Urutan pemasangan yang wajar: Lenis dulu (scroll) → sambungkan ScrollTrigger ke Lenis (Lenis resmi menyebut dirinya “perfect companion” untuk GSAP ScrollTrigger) → hias dengan komponen React Bits.

Kode minimal (dari reel + dokumentasi resmi)

# 1. Lenis — smooth scroll
npm i lenis

import Lenis from 'lenis';
const lenis = new Lenis({ autoRaf: true });

# 2. GSAP + ScrollTrigger — animasi ikut scroll
npm i gsap

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

gsap.timeline({
  scrollTrigger: { trigger: '.section', start: 'top top',
                   end: 'bottom bottom', scrub: true }
}).to('.box', { x: 500, rotation: 360, duration: 2 });

# 3. React Bits — salin komponen, tempel ke project
#    buka reactbits.dev -> pilih komponen -> salin source-nya

3. Kalau dipakai untuk situs kita sendiri

Lenis & GSAP — bisa masuk ke halaman statis kita (hub ini, ican.product-sid.us) cukup lewat <script> dari CDN. Tidak perlu build ulang.
React Bits — butuh project React. Hub ini HTML statis, jadi belum cocok untuk React Bits kecuali dibuat satu halaman demo React terpisah.

Batas jujur: efek-efek ini menambah JavaScript dan bisa memperlambat halaman di HP kelas bawah. Aturan mainnya: pasang di satu halaman landing dulu, ukur dengan Lighthouse, baru disebar kalau memang lebih enak dipakai.

Clue lanjutan

Butuh: 1 halaman statis (paling murah: satu halaman di situs ican.product-sid.us) + 30–45 menit.
Kerjakan: (1) tempel Lenis + GSAP dari CDN ke satu halaman itu saja — jangan ke semua halaman; (2) bikin 1 animasi sederhana pakai ScrollTrigger (mis. judul naik + memudar saat di-scroll); (3) buka di HP: dicek masih enak atau malah berat.
Output: kamu tahu dari tangan sendiri efek mana yang layak dipakai di situs sendiri, dan berapa ongkos performanya.
Lanjutannya: reel aslinya berjudul “Day 1”, jadi bakal ada library berikutnya. Kalau dikirim, gua tambahkan ke kategori yang sama di hub.

Verifikasi jujur

dicocokkan Nama & fungsi 3 library: sesuai dengan sumber resminya (npm/GitHub/situs).
dicek Versi & angka: Lenis 1.3.26 · GSAP 3.15.0 · React Bits 48,8K ★ — dibaca langsung, bukan dari caption.
dikoreksi Paket npm react-bits bukan library yang dimaksud (lihat “Baca ini dulu”).
tidak dibuktikan Klaim implisit bahwa “3 library ini bikin website otomatis premium” — itu opini kreator. Yang terverifikasi cuma bahwa library-nya nyata, aktif, dan gratis dipakai.