Trước khi người dùng click, họ hover. Khoảng thời gian đó — thường chỉ vài trăm millisecond — là cơ hội duy nhất để interface nói: “thứ này có thể tương tác được.” Hover micromotion không phải hiệu ứng trang trí. Nó là ngôn ngữ affordance.

Tại sao hover cần animation

Interface phẳng (flat design) xóa đi hầu hết visual cue truyền thống: bevel, gradient, border dày. Khi nhìn vào một ô màu, người dùng không có cách nào biết nó là button hay decoration — trừ khi nó phản hồi khi họ di chuột lại gần.

Hover animation lấp đầy khoảng trống đó. Nó trả lời câu hỏi “thứ này có làm gì không?” trước khi người dùng phải đặt cược một cú click để tìm hiểu.

Ba loại feedback và khi nào dùng

Lift — element nhích lên (2–4px) kèm shadow đậm hơn. Dùng cho card, tile, item có thể navigate. Tạo cảm giác bề mặt “nổi lên” mời chạm vào.

Fill — background xuất hiện nhẹ, màu chuyển. Dùng cho button, menu item, tab. Đánh dấu vùng hit area và confirm “đây là vùng có thể nhấn.”

Tint — icon hoặc text đổi màu, không thay đổi kích thước hay vị trí. Dùng cho icon button, link trong paragraph, secondary action. Tín hiệu tinh tế nhất — phù hợp khi không muốn làm layout bị xáo trộn.

Chọn đúng loại cho từng component

Button

Button cần hai trạng thái: hover và pressed. Hover báo “có thể nhấn”, pressed xác nhận “đang nhấn”.

• Hover: fill nhẹ hơn hoặc tối hơn một chút (10–15% opacity change)
• Pressed: scale nhỏ xuống 3–4% — mô phỏng cảm giác nhấn xuống vật lý

Không nên: lift button lên khi hover. Button không “nổi” — nó được “nhấn xuống”.

Card navigate

Card dẫn đến trang khác cần signal rõ hơn button vì diện tích lớn hơn và người dùng ít chắc chắn hơn.

• Lift 3–4px + shadow lan rộng: tạo focal point, kéo mắt vào
• Toàn bộ card là hit area — không cần thêm “Click to view” text nếu animation đủ rõ

Icon button

Icon button thường nằm cạnh nhau (toolbar, action row). Scale sẽ đẩy icon sang các vị trí kề, gây flicker.

• Chỉ dùng fill: background pill xuất hiện xung quanh icon
• Màu icon đổi sang accent để reinforce focus

Link trong văn bản

Link inline không nên kéo mắt khỏi dòng text đang đọc.

• Underline animate từ transparent → visible là đủ
• Không scale, không lift — sẽ làm line-height bị ảnh hưởng

Timing — hai con số cần nhớ

Hover enter: 120–150ms. Phải cảm giác tức thì. Nếu chậm hơn, người dùng không biết cursor đã vào vùng interactive hay chưa.

Hover exit: 180–250ms. Chậm hơn enter một chút. Element “lắng xuống” thay vì biến mất đột ngột — cảm giác có trọng lượng, không bị giật.

Luôn dùng ease-out cho cả hai chiều: nhanh vào, chậm settle. Đây là easing tự nhiên nhất cho vật thể phản hồi lực tác động.

Cường độ — ít hơn là đủ

Thuộc tính	Khoảng tinh tế	Khoảng quá lố
Scale up	1.02 – 1.04	> 1.08
Translate Y	2 – 4px	> 6px
Shadow blur	+8 – 16px	> 32px
Opacity change	8 – 15%	> 25%

Quy tắc: nếu nhìn vào animation và thấy nó rõ ràng là animation — có thể đang quá lố. Hover tốt là khi người dùng cảm thấy interface phản hồi mà không nhận ra animation đang chạy.

Không dùng hover để giấu thông tin

Tooltip optional là ok. Nhưng nếu thông tin cần thiết để người dùng hành động — label của button, description của option — đừng giấu sau hover. Người dùng mobile sẽ không bao giờ nhìn thấy nó.

Nguyên tắc: hover chỉ enhance thông tin đã visible. Không thay thế thông tin.

Hover không tồn tại trên mobile

Desktop hover và mobile tap là hai interaction hoàn toàn khác nhau. Khi thiết kế hover state trên Figma, luôn kiểm tra: nếu bỏ hết hover animation đi, component vẫn đủ rõ affordance không?

Nếu không — vấn đề nằm ở default state, không phải hover state.

Tham khảo: Ease vs Spring, Gesture Feedback Motion.