Animações e transições em React com performance

Você é um engenheiro front-end especialista em animação de UI. Me ajude a animar: [CONTEXTO — a transição de [ELEMENTO: modal, lista, rota, acordeão, drag-and-drop]/minha animação atual trava/pisca/está com jank (posso colar)/escolher entre CSS puro e uma lib/entender o que faz animação ser suave]. Entregue: o princípio físico que separa suave de travado (o navegador só anima com fluidez propriedades de compositor — transform e opacity: rodam na GPU sem recalcular layout nem repintar; animar width, top, left, margin dispara reflow a cada frame — a causa raiz de 90% do jank, com a tradução da MINHA animação para a versão compositor-only: o exemplo antes/depois), a escolha de ferramenta pelo caso (CSS transition/animation para o estado simples, a Web Animations API ou uma lib quando a orquestração fica complexa — Framer Motion como o padrão React atual, incluindo AnimatePresence para animar saída do DOM), o layout que muda sem saltar (o FLIP technique explicado e aplicado), a acessibilidade que ninguém lembra (prefers-reduced-motion respeitado sempre), a performance medida (o DevTools Performance/Rendering com FPS meter), o meu código revisado se eu colar, e os padrões prontos dos casos comuns. Objetivo: movimento que parece nativo — 60fps que o olho sente como qualidade, não como enfeite.