Yang bisa kita pakai dari reel “vibecoding websites”
Reelnya menyebut 5 tool: Spline, Recent, Skiper UI, Aceternity UI, Manus. Tapi tidak semua cocok untuk hub statis kita. Di bawah ini gua uji satu-satu — yang bisa langsung jalan di halaman ini, bukan cuma dijelaskan.
Tombol kanan-bawah untuk mematikan semua efek — halaman harus tetap enak dibaca tanpa JS. Scroll ke bawah ↓
Keputusannya dulu
| Tool di reel | Bisa kita pakai? | Alasannya |
|---|---|---|
Recentrecent.design | ya, langsung | Cuma galeri referensi — nggak perlu di-embed, cukup dipakai sebagai sumber ide. Gratis, tanpa daftar. Yang dipakai dari situ: pola desainnya (contoh di halaman ini: Floating Preview Chips). |
Splinespline.design | ya (lihat uji 1) | Ada web component <spline-viewer> resmi — tinggal tempel ke HTML, tanpa build, tanpa React. Berat: runtime ≈3,6 MB, jadi dimuat dari CDN Spline, bukan di-host sendiri. |
Aceternity UIui.aceternity.com | ya, versi vanilla (uji 2) | Kodenya React + Tailwind + Motion → tidak bisa ditempel apa adanya. Efeknya bisa ditiru: “Container Scroll Animation” yang dipakai reel itu cuma CSS 3D + satu angka progres scroll. |
Skiper UIskiper-ui.com | sebagian | Library komponen shadcn/ui — lebih dalam lagi ke React (registry + CLI). Untuk halaman statis, yang bisa diambil cuma idenya, bukan kodenya. |
Manusmanus.im | belum | Berbayar per kredit, dan segmen di reel-nya iklan (#manuspartner #ads). Bukan alat yang bisa “dipakai” gratis untuk hub ini. |
Uji 1 — Spline 3D, nempel di HTML statis
Ini bukan gambar atau video: 3D asli yang bisa diputar-putar. Tidak ada React, tidak ada build — hanya satu tag. Scene di bawah = scene contoh resmi milik Spline (scene bikinan sendiri butuh akun; free plan menempelkan watermark saat export web).
Kalau yang muncul gambar robot tambang itu = fallback yang bekerja (3D gagal jalan di perangkat ini). Di HP yang lemah bagian ini paling berat, jadi selalu sediakan fallback — jangan biarkan kotak kosong.
Uji 2 — “Container Scroll Animation” bikin sendiri
Ini komponen persis yang dibuka di reel (ui.aceternity.com/components/container-scroll-animation). Kode aslinya React, tapi isinya cuma tiga angka yang berubah mengikuti posisi scroll — jadi gua tulis ulang pakai CSS + JS biasa. Kartu di atas sedang dianimasikan sekarang; angkanya live:
Uji 3 — pola dari Recent, dipakai ulang
Referensi yang dibuka di reel: Floating Preview Chips (chip pill yang memunculkan kartu melayang saat di-hover). Ini versi kita — hover/tap chip-nya. Murni CSS + 15 baris JS, tanpa library.
Pelajaran dari layar itu: ide desain tidak bisa di-copy-paste seperti kode — yang dipakai adalah polanya, lalu ditulis ulang sesuai stack sendiri.
Yang tidak bisa kita pakai
- Skiper UI & Aceternity UI versi asli. Keduanya komponen React/Next.js + Tailwind (shadcn). Hub kita HTML statis — ditempel langsung = nggak jalan. (Sama seperti catatan React Bits & Watermelon UI di gelombang 1–2.)
- Manus. Berbayar per kredit + di reel posisinya iklan. Berguna untuk membandingkan hasil, bukan untuk dipakai tetap.
- Scene Spline bikinan sendiri, versi gratis. Bisa dibikin, tapi export web-nya ber-watermark — watermark hilang baru di paket Hobby ($12/kursi/bln).
Cara pakai di halaman kita
- Spline — tempel 2 baris di halaman mana pun:
<script type="module" src="https://cdn.spline.design/@splinetool/viewer/build/spline-viewer.js"></script>lalu<spline-viewer url="…" style="height:400px">. Cuma pakai di satu halaman (hero), jangan di semua. - Scroll animation — resepnya:
perspectivedi parent →transform-origin: center topdi kartu → satu fungsi yang menghitung progres section →rotateX/scale/translateY. Tiga angka, tanpa library. - Smooth scroll — Lenis sudah ke-load di halaman ini (vendor kita sendiri di
/demo-premium/vendor/lenis.min.js). Efeknya halus tapi wajib punya tombol mati untuk perangkat lemah. - Recent — simpan sebagai bookmark; ambil 3 referensi per halaman yang dikerjakan, tulis bagian mana yang mau ditiru.