Cara Membuat Animasi Website dengan React Bits di Next.js

React Bits adalah koleksi komponen dan efek React yang dapat dipilih untuk menambah gerak atau visual pada antarmuka. Alih-alih memasang seluruh pustaka, pilih satu efek yang punya tujuan—misalnya konten muncul saat memasuki viewport—lalu baca kode dan dependency sebelum memasukkannya ke Next.js. Dokumentasi komponen yang dipakai dapat berubah, jadi jadikan halaman component resmi sebagai sumber install dan props.

Pilih efek berdasarkan tugas halaman

Efek hero dapat mengarahkan mata ke headline, sedangkan animasi kartu dapat memberi feedback saat interaksi. Hindari menggerakkan setiap bagian: animasi serentak menambah beban visual dan berpotensi mengganggu pengguna yang sensitif terhadap gerak. Periksa kebutuhan motion, keyboard, dan prefers-reduced-motion pada komponen sebelum instalasi.

Pasang AnimatedContent secara terarah

Situs React Bits menyediakan instruksi penambahan komponen via shadcn CLI. Halaman AnimatedContent yang ditinjau memberikan perintah berikut untuk varian TypeScript dan Tailwind. Jalankan dari root repository yang benar setelah memastikan konfigurasi shadcn proyek cocok; baca file yang dibuat sebelum menerima perubahan.

npx shadcn@latest add @react-bits/AnimatedContent-TS-TW

1. Pilih komponen dan varian yang sesuai dengan stack serta lisensi proyek.
2. Tinjau prompt CLI dan pastikan file akan ditulis ke lokasi yang diharapkan.
3. Buka komponen hasil instalasi; cek dependency, props, dan client/server boundary.
4. Gunakan pada satu section yang memang perlu entrance animation.
5. Jalankan development server dan uji animasi, konten tanpa JavaScript jika sesuai, serta aksesibilitas.

Contoh integrasi Next.js

Komponen yang menggunakan observer, state, atau animasi browser kemungkinan perlu menjadi Client Component. Tempatkan batas `use client` pada wrapper sekecil mungkin, dan jangan menjadikan seluruh halaman interaktif tanpa alasan. Berikut pola pemanggilan; cocokkan nama props dengan source komponen yang telah terpasang.

'use client';

import AnimatedContent from '@/components/AnimatedContent';

export function ServiceIntro() {
  return (
    <AnimatedContent
      distance={24}
      direction="vertical"
      reverse={false}
      duration={0.55}
      ease="power3.out"
      initialOpacity={0}
      animateOpacity
      scale={1}
      threshold={0.15}
      delay={0}
    >
      <section aria-labelledby="service-title">
        <h2 id="service-title">Website untuk proses bisnis Anda</h2>
        <p>Jelaskan kebutuhan, alur kerja, dan cakupan layanan secara ringkas.</p>
      </section>
    </AnimatedContent>
  );
}

Nama props pada contoh mengikuti bentuk komponen yang tersedia di halaman React Bits saat riset, tetapi source versi yang terpasang adalah rujukan akhir. Hindari menyalin contoh lama bila prop API sudah berubah. Bila komponen membutuhkan GSAP atau dependency lain, pertimbangkan apakah animasi sederhana dengan CSS native sudah cukup.

Pahami dependency dan lisensi component code

Contoh AnimatedContent menggunakan GSAP serta ScrollTrigger pada source yang ditinjau. Registry CLI dapat menambahkan file komponen dan dependency itu; baca diff dan lockfile, jangan hanya melihat preview. Jika hanya butuh fade sederhana, CSS `@keyframes` atau IntersectionObserver ringan mungkin mengurangi JavaScript. React Bits menyediakan varian JavaScript/TypeScript serta CSS/Tailwind, jadi pilih satu varian agar style tidak tercampur.

Repository React Bits saat ini menandai lisensi MIT + Commons Clause. Baca file lisensi repository sebelum memakai source dalam proyek komersial atau mendistribusikannya sebagai produk; kata “open source” di halaman tidak menggantikan pemeriksaan syarat dan pengecualian. Pastikan juga semua aset pihak ketiga dalam demo yang Anda salin memiliki atribusi atau lisensi yang sesuai.

Baca source component untuk mengetahui apakah animasi memerlukan subscription/plugin GSAP tertentu serta apakah class CSS disertakan. Component registry membuat salinan kode di proyek Anda, sehingga update library tidak selalu otomatis memperbarui file yang sudah di-copy. Catat versi source dan jadwalkan peninjauan ketika library mengubah API; hindari mengandalkan package manager untuk mengelola salinan yang sebenarnya sudah disalin langsung ke repository.

Atur keadaan awal agar informasi tak hilang

Source komponen AnimatedContent yang ditinjau menyembunyikan wrapper sebelum animasi aktif. Jika JavaScript gagal, observer tidak berjalan, atau pengguna mengaktifkan reduced motion, konten jangan tetap tersembunyi. Pertimbangkan fork kecil yang membuat teks terlihat secara default lalu menjalankan animasi progresif setelah mount, dan sediakan cabang `matchMedia('(prefers-reduced-motion: reduce)')` untuk melewati gerak. Uji dengan JavaScript dinonaktifkan dan tab keyboard, bukan hanya melihat preview normal.

Perhatikan trigger scroll di container nested: ScrollTrigger perlu tahu scroll container yang benar, dan konfigurasi otomatis dapat memilih container yang berbeda pada layout Next.js. Jika animasi tidak muncul, periksa ukuran elemen, root/scroll container, threshold, dan error hydration. Jangan menutupi bug dengan mengurangi threshold secara acak; pastikan section memiliki tinggi yang layak dan state akhir tetap terlihat.

Sebelum memakai efek pada seluruh halaman, mulai dengan satu section lalu bandingkan perilaku saat JavaScript aktif, motion dikurangi, dan halaman dibuka ulang di tengah scroll. Perhatikan apakah komponen menyebabkan layout shift atau menyembunyikan konten selama menunggu library. Pada perangkat berdaya rendah, turunkan jarak dan jumlah elemen yang bergerak. Animasi yang halus di laptop developer belum tentu terasa sama pada ponsel pelanggan.

Jika Anda memodifikasi salinan source, simpan perubahan lokal secara terpisah dan dokumentasikan alasannya. Jangan menimpa file fork ketika menyalin versi terbaru dari registry; bandingkan diff supaya fallback aksesibilitas tidak terhapus.

Performa di ponsel dan aksesibilitas

@media (prefers-reduced-motion: reduce) {
  .animated-section {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

CSS di atas pola dasar, bukan perbaikan universal: komponen bisa mengatur transform melalui JavaScript dan membutuhkan prop khusus. Pastikan state akhir elemen terlihat saat motion dimatikan. MDN menjelaskan media query `prefers-reduced-motion`; audit DOM dan source library untuk memastikan fallback benar-benar diterapkan.

Kesalahan integrasi yang umum

• CLI menambahkan file ke path yang tidak dipakai: tinjau opsi config dan pindahkan hanya setelah memahami import.
• Error `window is not defined`: batasi komponen yang menyentuh browser ke client boundary.
• Layout bergeser saat scroll: cek tinggi dan posisi elemen sebelum animasi dimulai.
• Bundle menjadi berat: hapus dependency yang tidak dibutuhkan dan bandingkan alternatif CSS.
• Teks tak muncul jika observer gagal: atur initial state yang tidak menyembunyikan konten tanpa kebutuhan.

Animasi harus mendukung tujuan halaman, bukan sekadar memperlihatkan efek. Mulai dari satu komponen, periksa layout sebelum dan sesudah, lalu putuskan apakah gerak menambah pemahaman. Untuk gerak yang menghasilkan video, baca Remotion bersama Claude Code; untuk SVG/CSS yang dibuat lewat Claude, baca panduan animasi Claude AI.

Sumber: React Bits — Animated Content

Sumber: React Bits — Source repository

Sumber: MDN — prefers-reduced-motion