Like button là micro interaction phổ biến nhất trên internet — và là case study tốt nhất về cách animation tạo ra emotional response. Click vào một heart “chết” (outline) và nhận lại một heart “sống” (filled + spring) tạo cảm giác được ghi nhận, không chỉ là state change.

Spring không phải ease

cubic-bezier(0.34, 1.56, 0.64, 1) tạo overshoot: heart scale lên 1.55x trước khi settle về 1.2x. Đây là điểm khác biệt quan trọng — nếu dùng ease-out thông thường, animation chỉ “đổ vào chỗ” thay vì “bật ra”.

Người dùng không để ý consciously, nhưng spring feel = sự kiện quan trọng đã xảy ra. Ease-out = transition bình thường.

Void reflow trick

Để restart CSS animation khi click liên tục:

btn.classList.remove('lb-pop');
void btn.offsetWidth; // force reflow
btn.classList.add('lb-pop');

Không có dòng void, browser batch remove + add thành một frame và animation không restart.

Color semantics

rgb(251, 113, 133) (rose-400) được chọn vì:

• Đủ warm để trigger association “positive / love”
• Không quá đỏ — không gây cảm giác warning hoặc error
• Contrast tốt trên cả dark và light background

Optimistic update

Số đếm thay đổi ngay lập tức — không chờ server response. Pattern chuẩn vì người dùng luôn cảm thấy action của mình được ghi nhận. Rollback chỉ xảy ra khi có lỗi network, rất hiếm và có thể handle riêng.