Motion Design Principles for Interfaces
Prompt de referência
Utilize a Skill Motion Principles GitHub.com/kylezantos/design-motion-principles e garanta que toda interface do sistema tem skeleton, lazyloading, smooth animation de entrada, saída, carregamento, progresso em todos os elementos.
Skeleton screens e estados de carregamento
Skeleton screens mostram a estrutura do conteúdo antes do carregamento, reduzindo a percepção de tempo de espera. Use shimmer animation sutil (1,2–1,8s) com transform e opacity para performance.
Lazy loading e progressive enhancement
Aplique lazy loading em imagens e componentes abaixo da dobra. Mostre conteúdo acima da dobra primeiro e use LQIP para imagens.
Animações de entrada, saída e progresso
Use staggered reveal (30–50ms) para listas, crossfade entre skeleton e conteúdo, e progress bars para operações longas. Mantenha layout estável para evitar CLS.