✨ framer-motion
Animated Showcase
12 komponen standar — ripple, magnetic hover, 3D tilt, shimmer, spring physics.
02
Buttons
ripple + magnetic hover✨ ripple click, translateY hover, scale active
03
Form Inputs
focus glow, shake error, spring toggle✨ focus glow, shake on error, spring toggle
Email tidak valid
🔍
0 / 200
Notifikasi Aktif
04
Cards
shimmer sweep, 3D hover✨ shimmer sweep on hover, translateY lift, count-up
Siswa Aktif
0
↑ 3.5%
Surat Terbit
0
↑ 12%
Pending
0
↓ 2
05
Data Table
row hover| NIS | Nama | Kelas | Status |
|---|---|---|---|
| 242507024 | Anisa Putri | 9C | Mutasi |
| 242507001 | Budi Santoso | 7A | Aktif |
| 242507055 | Citra Dewi | 8B | Aktif |
| 242507089 | Dimas P. | 9A | Lulus |
06
Modal
spring scale-in✨ spring cubic-bezier(0.34,1.56,0.64,1)
Konfirmasi Hapus
Yakin ingin menghapus data siswa Anisa Putri (9C)?
07
Badges & Alerts
slide-in, scale hover✨ alert slide-in, badge scale on hover
DefaultSuccessWarningDanger
ℹ️
Info: Tahun ajaran dimulai 15 Juli 2026.
✅
Berhasil: Data siswa diimpor.
⚠️
Peringatan: 3 siswa belum ada NISN.
❌
Error: Koneksi gagal.
08
Tabs
underline indicator09
Progress Bar
shimmer fill✨ shimmer sweep on fill, gradient bar
Impor data — 68%
Sinkronisasi — 100%
Penyimpanan — 85%
10
Accordion
spring chevronBagaimana cara menambah siswa? ▼
Buka menu Siswa → klik tombol "+ Tambah Siswa" → isi formulir → simpan.
Cara mencetak surat? ▼
Buka menu Persuratan → pilih jenis surat → isi data → klik "Cetak".
Cara reset password? ▼
Hubungi admin TU untuk reset password akun portal.
11
Toast
slide-in springBerhasil. Surat B/027 dicatat.
12
Empty State
float + fade-in📭
Belum ada surat
Belum ada surat yang terbit bulan ini.