React 19 + Framer Motion: Membuat 3D Interactive Card Stack
Tantangan
Untuk stand booth GMTI 2026, kami butuh cara visual yang menarik untuk menampilkan 34 pengurus HIMA TI. Hasilnya: 3D card stack yang bisa di-drag, di-flip, dan punya efek fanning — semua di browser tanpa WebGL.
Teknologi
- React 19 — component model yang clean
- Framer Motion v13 — animasi declarative, spring physics
- Tailwind CSS v4 — styling minimal
Cara Kerja
1. Stack Layout
Kartu ditumpuk dengan offset tipis. Kartu teratas punya z-index tertinggi. Setiap kartu punya rotateY dan translateZ berbeda untuk efek kedalaman.
2. Drag & Swipe
Framer Motion drag prop dengan dragConstraints. Saat drag selesai, animasi spring mengembalikan posisi atau pindah ke kartu berikutnya.
3. Flip Animation
Klik kartu → rotateY dari 0 ke 180° dengan spring transition. Sisi depan dan belakang pakai backface-visibility: hidden.
4. Fanning Effect
Saat hover, kartu-kartu di belakang menyebar ke siri dengan rotateZ dan translateX bertahap — menciptakan efek "fanning" seperti kartu asli.
Audio Engine
Semua sound effect dihasilkan pakai Web Audio API — tanpa file audio eksternal. 4 genre BGM synthesizer (Arcade 8-Bit, Cyberpunk, Lofi, EDM) dan 5 profil SFX.
Tips: pakaiuseMotionValueuntuk value yang berubah tiap frame, danuseTransformuntuk map value ke CSS property.
Need something built?
I help teams ship performant, accessible web products — from landing pages to full-stack apps. If you have an idea, let's scope it together.