Thư viện animation · 9 nhóm · 50+ hiệu ứng

Tổng hợp animation tham khảo.

Cuộn xuống để xem từng nhóm kỹ thuật — hover, loaders, text, scroll reveal, 3D, dataviz, micro-interaction, ambient và navigation. Mỗi ô đều có nhãn tên để bạn dễ tìm lại.

01 · Hover & Micro

Hiệu ứng di chuột

Nâng nút, đổ màu, gạch chân, nam châm, phát sáng, xoay icon, thẻ 3D nghiêng theo chuột.

// lifttranslateY + shadow khi hover
// underlineDi chuột vào đâyGạch chân scale X từ phải qua trái
// fillNền xanh trượt lên, đổi màu chữ
// magnetNút chạy về phía con trỏ
// glowViền sáng + box-shadow mở rộng
// 3d tilt
Nghiêng theo
rotateX/Y theo vị trí chuột
// icon rotate
Icon xoay + scale khi hover
// ripple btnSóng tròn tỏa ra từ điểm click
// shimmer sweepVệt sáng lướt qua nút CTA
02 · Loaders

Trạng thái tải

Spinner, dots nhảy, thanh indeterminate, pulse ring, skeleton shimmer, orbit kép.

// spinner
Vòng tròn quay vô hạn
// bouncing dots
3 chấm nhảy so le
// indeterminate bar
Thanh tiến trình không xác định
// pulse ring
Vòng sóng lan tỏa
// skeleton
Nền xương shimmer
// dual orbit
Hai quỹ đạo ngược chiều
03 · Text

Animation chữ

13 biến thể: glitch, shimmer, typewriter, float, stretch, neon, sóng chữ, scramble, outline hover, flip 3D, wipe, hue cycle, đếm ngược.

// glitch
AURIS
Lớp RGB lệch nhịp
// gradient shimmer
Shimmer
Gradient chạy ngang chữ
// typewriter
loading data_
Gõ + caret nhấp nháy
// float
🚀 Float
Trôi lên xuống nhẹ
// stretch
STRETCH
Co giãn letter-spacing
// neon flicker
NEON
Đèn neon nhấp nháy
// scramble
AURIS
Xáo chữ rồi hội tụ
// outline → fill
HOVER ME
Viền chữ → đặc khi hover
// flip 3d
FLIP
Xoay 360° quanh trục Y
// wipe
WIPE
Nửa sáng nửa tối lướt qua
// hue cycle
CYCLE
Đổi màu liên tục
// countdown
23:59:42
Đồng hồ đếm ngược
// per-letter wave
Mỗi chữ nhấp nhô so le, đổi màu xanh ở đỉnh
04 · Scroll Reveal

Hiện dần khi cuộn

5 biến thể: trượt trái, phải, lên, blur, xoay. Cuộn lại để xem lại — được kích hoạt bởi IntersectionObserver.

↗ Trượt từ trái vào · translateX(-50px) → 0
↖ Trượt từ phải vào · translateX(50px) → 0
↑ Trượt từ dưới lên · translateY + scale
Blur → sắc nét · filter: blur(12px) → 0
Xoay và trượt · rotate(-8deg) → 0
05 · 3D & Parallax

Chiều sâu không gian

Parallax nhiều lớp theo chuột, lập phương 3D tự xoay, thẻ lật 180°.

// parallax layers
Di chuột trong khung
// rotating cube
1
2
3
4
5
6
Lập phương 6 mặt tự xoay
// flip card
Mặt trước
Mặt sau ✓
Hover để lật 180°
06 · Counters & Dataviz

Số liệu động

9 biến thể: đếm số, count + đơn vị, progress ring, bar chart, live counter, gauge, line chart vẽ dần, sparkline, odometer số nhảy.

// count up
0
Đếm từ 0 đến 12.480
// count + unit
0
Đếm kèm đơn vị %
// progress ring Vòng tròn vẽ tới 78%
// live counter
1 284
Số nhảy ngẫu nhiên realtime
// gauge needle
0%
Kim đo + arc tăng tới 68%
// odometer
0000
Mỗi chữ số lật độc lập
// bar chart grow
10 cột mọc lên so le khi cuộn tới
// line chart draw Đường vẽ dần + chấm cuối nhấp nhó
// sparkline
+12.4%
Cột nhỏ cập nhật mỗi 1.2s
07 · Micro-interactions

Tương tác nhỏ

Toggle switch, checkbox bouncy, ripple click, slider có glow.

// toggle switch
Trượt nút, đổi màu nền
// bouncy checkbox
Đồng ý với điều khoản
Tick nảy ra elastic
// ripple clickSóng từ điểm click
// range slider
40
Thumb glow + phóng to khi hover
08 · Ambient & Decorative

Hiệu ứng nền

Quỹ đạo vệ tinh, aurora gradient, viền sáng xoay conic, marquee chữ chạy.

// orbit system
Hạt nhân + 2 vệ tinh quay
// aurora
Gradient chảy多 sắc xanh
// shimmer border
Viền sáng xoay quanh
khối nội dung
Conic gradient quanh khung
// marquee
★ Auris Motion · tốc độ thunder · 60fps · thiết kế chiều sâu · realtime · animation mượt mà · ★ Auris Motion · tốc độ thunder · 60fps ·
Chữ chạy vô hạn, mask mờ 2 đầu
10 · Page Builder

Tự ráp landing page động

Chọn kỹ thuật animation cho từng phần. Trang demo bên phải cập nhật theo thời gian thực. Bấm "Replay" để xem lại hiệu ứng.

auris-preview.pages.dev

Dữ liệu sống động

Auris biến mọi con số thành câu chuyện. Nhanh, đẹp, chính xác — đúng tinh thần macOS.

Tính năng nổi bật

Mọi thứ bạn cần trong một nền tảng.

Tốc độ

Phản hồi dưới 50ms, mượt như native.

🎯

Chính xác

Số liệu kiểm chứng chéo tự động.

🌙

Tối giản

Giao diện đẹp, tập trung vào điều quan trọng.

0
Người dùng
0
Uptime
0
Doanh thu
0
Hiệu năng