Movimento

Durações, curvas e a política de movimento reduzido.

Movimento serve para orientar, não para enfeitar: curto (100 a 300 ms), só com opacity e transform, e sempre com um caminho sem animação. As amostras abaixo se repetem sozinhas.

Durações

Exemplo	Duração	Uso
	`100 ms`	Itens de menu: realce no hover.
	`150 ms`--default-transition-duration: —	Padrão: cor, fundo e foco de botões e campos.
	`200 ms`	FadeIn da fachada; saída de Toast e Sheet.
	`220 ms`	Collapse e StaggerIn da fachada (motion.dev).
	`250 ms`	Entrada de Sheet e Toast, abas e itens de ListBox.
	`300 ms`	Progresso e medidores.

Curvas

Exemplo	Curva	Uso
	`ease-out`—	Saída suave; a mais usada nos componentes do tema.
	`ease-smooth`—	Troca de cor e de fundo em hover e seleção.
	`ease-out-quart`—	Entradas curtas que desaceleram no fim.
	`EASE da fachada`cubic-bezier(0.22, 1, 0.36, 1)	FadeIn, Collapse e StaggerIn em motion.dev (packages/ui/src/motion-parts.tsx).
	`spring`rigidez 520, amortecimento 42, massa 0,8	Indicador deslizante das abas do ViewTabs.

Com prefers-reduced-motion: reduce, as animações e transições do tema viram instantâneas (0,01 ms) e a fachada troca deslocamentos por um fade curto. A casca desta documentação respeita o mesmo ajuste e tem um seletor próprio no cabeçalho.

Quem Anima o Quê

Origem do movimento de cada componente da fachada, a partir do manifesto (análise estática de imports e CSS, portanto indicativa).

motion.dev 33

Transições de montagem, saída e layout feitas em JavaScript, com useReducedMotion.

AccessButton
AccessCheckbox
AccessFeedback
AccessField
AccessModeSwitch
AccessNotice
AccessPage
AccessSection
AccessSubmit
ActionBar
ActionRow
AuthDashboardPreview
DropZone
EmptyAction
EmptyValue
ExternalLink
FilterBar
FilterField
InfoHint
MetaLine
Navbar
OperationShell
PageHeader
PageStack
PersonAvatar
PlatformShell
RecipientAvatar
RevealItem
StateBlock
StatusBadge
StepTransition
StoreIcon
ViewTabs

CSS 31

Transições e animações no CSS do tema; o reset de movimento reduzido cobre tudo.

Sem movimento 31

Estáticos: nenhuma transição própria além do foco.

Faça

Transições de 150 a 250 ms em opacity e transform, com useReducedMotion na fachada.

Evite

Animar width, height ou top, laços infinitos no conteúdo ou movimento sem alternativa estática.