Motion na web

Carregue motion-principles antes. Ela decide se e quanto; esta decide como.

Escolha da ferramenta

Suba um degrau só quando o anterior não resolver:

Necessidade	Ferramenta
Hover, foco, toggle, mudança de estado simples	`transition` CSS
Loop, keyframes, entrada sem JS	`@keyframes`
Entrada e saída de elemento com estado (React)	Motion `AnimatePresence`
Elemento que muda de posição no layout	Motion `layout`
Arrastar, gesto, movimento contínuo ligado a input	Motion values
Ligado ao progresso do scroll, efeito simples	CSS scroll-driven
Transição entre páginas ou vistas	View Transitions API
Sequência complexa, pin de scroll, orquestração fina	GSAP (`gsap-*`)