Motion-Driven
Motion-Driven — Design general com animation-heavy, microinteractions, smooth transitions. Template e prompt pronto para IA.
Uso: Landing pages, SaaS
Contexto Histórico
Estilo Motion-Driven representa uma tendência moderna em design UI/UX web com foco em general.
Quando Usar
Motion-driven design earns its place when movement carries meaning — revealing a product's form factor, guiding attention through a narrative, creating emotional pacing. Agency portfolios, product launches, editorial storytelling. It works when the motion IS the content, not decoration on top of it. Skip it for dashboards, documentation, e-commerce catalogs — anywhere people need to scan and act fast. If your scroll animations make users wait to read the next paragraph, you've failed. Motion should feel like the page is breathing, not performing.
Princípios de Design
- Purpose over spectacle — every animation must answer 'what does this help the user understand?' If you can't answer that, delete it.
- Scroll velocity awareness — animations should respect how fast someone is scrolling. Nobody wants to wait for your timeline to finish playing.
- Progressive enhancement as religion — the site works without motion. Animations layer on top for capable devices and willing users (prefers-reduced-motion is non-negotiable).
- Choreography over chaos — elements enter and exit with coordinated timing. Stagger intentionally. If everything moves at once, nothing moves.
- Performance budget per fold — set a hard limit on animated elements visible simultaneously. Composited transforms only. No layout thrashing, no paint storms.
Especificações Técnicas
Cores
Secundárias
Efeitos
Scroll anim (Intersection Observer), hover (300-400ms), entrance, parallax (3-5 layers), page transitions
Light/Dark
✓ Full / ✓ Full
Relacionados
Última sincronização: 01/04/2026