Motion & Interaction Patterns
Khám phá các micro-interaction phổ biến: hover glow, floating label, skeleton shimmer, toggle switch, và scroll-triggered animation — tất cả trong một file HTML duy nhất.
Glow Buttons
Hover → translateY(-2px) + box-shadow glow |
Active → translateY(0)
Di chuột vào từng button và nhấn giữ để thấy active state
Floating Label Inputs
Label trượt lên khi input được focus hoặc có giá trị.
Skeleton Loading Cards
Shimmer animation — gradient 90° di chuyển liên tục.
Toggle Switch
Transition mượt với cubic-bezier bounce nhẹ. Click để thay đổi trạng thái.
Thông báo đẩy
Nhận thông báo qua trình duyệt
Chế độ tối
Giao diện nền tối cho mắt
Xác thực 2 bước
Bảo mật tài khoản nâng cao
Email marketing
Nhận ưu đãi và tin tức mới
Vị trí GPS
Cho phép xác định vị trí
Scroll Fade-in
IntersectionObserver thêm class .visible
khi phần tử vào viewport — opacity 0→1, translateY 28px→0.
24,891
Người dùng
₫ 3.2B
Doanh thu tháng
4.9 / 5
Đánh giá trung bình
Hiệu suất cao
Tối ưu hóa tốc độ tải trang với lazy loading và code splitting tự động.
Bảo mật tuyệt đối
Mã hóa end-to-end, xác thực đa yếu tố và kiểm tra bảo mật 24/7.
Sẵn sàng bắt đầu?
Đăng ký miễn phí và trải nghiệm ngay hôm nay. Không cần thẻ tín dụng.
Thiết kế đẹp
Responsive
Clean code
Accessible
prefers-reduced-motion
Tất cả animation bị tắt khi người dùng bật chế độ giảm chuyển động trong hệ điều hành.
Tất cả transition bị vô hiệu hóa
duration chuyển về 0.01ms
Skeleton shimmer dừng lại
animation-duration: 0.01ms
Scroll fade-in hiển thị ngay
opacity: 1, transform: none
Glow & bounce button tắt
transition-duration: 0.01ms
CSS:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.fade-in-up,
.fade-in-left,
.fade-in-right {
opacity: 1 !important;
transform: none !important;
}
}Đang kiểm tra cài đặt hệ thống…