Chuyển động

Thang dừng ở 320ms: trên đó, một chuyển động chuyển từ "phản hồi" sang "chờ", và thứ cần sửa là chuyển động đó, không phải thêm một bậc.

Dialog: deliberate 240ms so với extended 320ms. Clause 15 của DS-014 rút --nf-motion-dialog-in từ extended (320ms) xuống deliberate (240ms) — bản bên trái đang ship hôm nay. Lập luận là số học về đường cong: easing-enter là cubic-bezier(0.16, 1, 0.3, 1), đạt phần lớn quãng đường trong khoảng một phần ba đầu, nên ở 320ms đoạn cuối gần như không còn chuyển động nhìn thấy được. Nhưng phán quyết cuối là thẩm mỹ, không phải số học, và thuộc chủ sở hữu — đây là thứ phải nhìn mới quyết được, nên hai bản chạy cạnh nhau dưới đây, giống hệt mọi mặt trừ thời lượng vào.

Vào và ra không đối xứng, và đó là cố ý: thứ đang đến chậm dần để mắt bắt được chỗ nó dừng; thứ đang đi nhanh dần để ra khỏi đường nhìn.

DS-018 clause 2 đảo DS-014 clause 16. Câu cũ — "áp cho mọi thứ nhấn được… một luật, không ngoại lệ" — không còn hiệu lực. --nf-foundation-motion-press-scale vẫn là 0.98 và vẫn ở trong corpus token. Nó không được áp cho bất kỳ primitive nào, và chỉ được áp khi chủ sở hữu yêu cầu cho một bề mặt cụ thể. infra/check-control-states.mjs chặn chuỗi press-scale xuất hiện trong packages/ui/src/**.

Vì sao. Ở chiều cao mặc định 36px sau DS-017 clause 3, một phép thu 2% dịch 0,7 pixel — dưới ngưỡng đọc được thành phản hồi, nhưng đủ để trình duyệt lấy mẫu lại chữ trong nhãn và làm nó rung.

Bậc fast 120ms vẫn dùng cho chuyển tiếp màu của trạng thái — dòng fast ở bảng thời lượng phía trên vẫn đúng. Cái biến mất là chuyển động hình học, không phải chuyển tiếp.

Mười hai token --nf-motion-*, sáu cặp vào / ra. Mỗi ô dưới đây chạy đúng chuyển động -in của cặp đó; bấm "Chạy lại" để xem lại.

Khối @media (prefers-reduced-motion: reduce) đặt cả năm duration về 0ms và cả mười hai token presence về none. Khối đó không chạm easing và không chạm pressScale: easing giữ nguyên vì với thời lượng 0 đường cong không còn tác dụng, và pressScale giữ nguyên vì nó không phải chuyển động theo thời gian — nó là một trạng thái tĩnh trong lúc ngón tay còn đè.

Dưới prefers-reduced-motion: reduce, mọi transition-duration và animation-duration về instant. Trạng thái cuối vẫn phải đúng — tắt chuyển động không được làm mất trạng thái. Ngoại lệ duy nhất là chỉ báo loading của Button, và nó dài ra chứ không dừng, vì một vòng quay đứng yên truyền đạt "đã treo".

Kiểm. Bật giảm chuyển động ở cấp hệ điều hành, hoặc emulate trong devtools. Mở dialog: nó xuất hiện ngay, đúng vị trí. Bấm một nút loading: chỉ báo vẫn quay, chậm hơn.

Không nội dung nào nhấp nháy quá ba lần trong một giây. WCAG 2.3.1 là tiêu chí mức A và liên quan tới nguy cơ co giật — đây không phải chuyện thẩm mỹ. Lỗi được báo bằng chữ, màu và biểu tượng, không bằng nhấp nháy.

Kiểm. Không có @keyframes nào trong corpus có chu kỳ dưới 333ms đi kèm thay đổi độ sáng lớn.

Kit đã có hệ chuyển động. Không thêm Framer Motion, GSAP, react-spring, hay CSS animation viết tay cho việc mà token đã làm được — hai hệ chuyển động nghĩa là hai nơi phải nhớ tắt khi reduced-motion bật, và một trong hai sẽ bị quên.

Kiểm. package.json của mọi app không có phụ thuộc animation. Mọi animation trong mã đọc var(--nf-motion-*).