Toast là pattern thông báo phổ biến nhất trong UI — xuất hiện, truyền thông tin, rồi tự biến mất. Nhưng cách nó xuất hiện và biến mất quyết định người dùng có cảm thấy bị làm phiền hay được thông báo.

Entry: spring từ dưới

Toast slide lên từ dưới với spring — scale từ 0.92 lên 1.0 đồng thời với translateY. Hai transform kết hợp tạo cảm giác “bật ra” thay vì “trượt vào”:

@keyframes tsd-in {
  0%   { opacity: 0; transform: translateY(16px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    }
}

Dùng cubic-bezier(0.34, 1.56, 0.64, 1) — spring — vì toast là vật thể bật ra, không phải overlay fade in.

Exit: ease-in ra đi

Exit dùng ease-in (accelerate out) thay vì spring — vật thể đang rời đi không cần bounce. Đây là nguyên tắc: spring vào, ease ra.

Progress bar là affordance, không phải decoration

Bar chạy từ 100% → 0% trong 3 giây. Người dùng có thể nhìn và biết còn bao lâu trước khi toast tự đóng. Nếu không kịp đọc, họ biết cần đọc nhanh hơn.

Màu bar khác nhau theo loại toast: white mờ cho default, green cho success, red cho error — reinforcing semantic.

Auto-dismiss timing: 3 giây

• < 2s: quá nhanh, người dùng có thể bỏ lỡ với thông báo dài
• 3s: đủ để đọc một câu ngắn và nhận thức được thông báo

• 5s: quá lâu, gây phân tâm, đặc biệt với error toast

Với toast có action button (undo, view), tắt auto-dismiss hoặc kéo dài lên 8s.

Scoped position: absolute, không phải fixed

Toast được position: absolute trong demo container thay vì position: fixed trên viewport. Pattern này áp dụng được cho bất kỳ component nào cần toast cục bộ — trong modal, trong sidebar, trong card — không phải chỉ toàn trang.