# Motion Design Principles for Interfaces

- Publicado: 2026-08-09
- Resumo: Prompt referencing Design Motion Principles and requirements for skeleton screens, lazy loading, and smooth animations across all interface elements.
- Página HTML: https://ronanrodrigo.dev/notes/2026/08/09/motion-design-principles-skeletons-lazyloading/

---
## 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.

[Acesse a fonte original](https://github.com/kylezantos/design-motion-principles)

## 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.

[Source](https://www.uiuxatlas.com/lessons/motion/loading-state-animation-and-perceived-performance/)

[Source](https://www.tyrs.studio/wiki/04-interaction-patterns/loading-states-skeletons.html)

## 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.

[Source](https://www.laioutr.com/en/blog/skeleton-loading-states-perceived-performance-storefronts-2026)

## 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.

[Source](https://blog.logrocket.com/ux-design/skeleton-loading-screen-design/)

[Source](https://www.mockplus.com/blog/post/20-motion-design-principles-with-examples)