Motion — tokens

Durações e curvas compartilhadas. Nenhum componente inventa o próprio timing. As demonstrações interativas estão em Composições → Motion.

Durações

--motion-fast120msHover, press, troca de cor

--motion-normal200msEntrada/saída, tabs, seleção

--motion-deliberate320msExpansão, drawer, mudanças amplas

Curvas

--ease-standardcubic-bezier(0.2, 0, 0, 1)Padrão do sistema

--ease-emphasizedcubic-bezier(0.05, 0.7, 0.1, 1)Entradas que merecem ênfase

--ease-exitcubic-bezier(0.3, 0, 1, 1)Saídas

Consumo

Em CSS e em Motion for React os valores são os mesmos.

className="transition-colors duration-(--motion-fast) ease-(--ease-standard)"import { transition } from "@/lib/motion"

Com prefers-reduced-motion: reduce os tokens de duração são zerados na origem, em tokens.css. Tudo que os consome passa a respeitar a preferência sem tratamento por componente — e o Motion for React usa useReducedMotion() onde há deslocamento.