🎯 As 4 Dimensoes de Motion
Motion nao e apenas "animacao bonita". E a forma como designers e desenvolvedores diferenciam experiencias. Existem 4 dimensoes principais.
Entrada (Entrance)
Como elementos aparecem na tela pela primeira vez. Fade, slide, scale, morph.
Scroll (Scroll-driven)
Como o site reage ao scroll do usuario. Parallax, reveal, snap, progress.
Loop / Background
Animacoes continuas no fundo. Gradientes, particulas, blobs, waves.
Interacao (Hover/Click)
Feedback para acoes do usuario. Hover, click, focus, drag.
"Voce nao esta mudando animacoes. Voce esta mudando o comportamento cognitivo da interface."
🚀 Entrada (Entrance Animations)
A entrada define o primeiro impacto cognitivo. E o momento em que o cerebro decide se vai relaxar ou entrar em modo acao.
🌙 Fade + TranslateY (Calmo)
Duracao
0.6–0.8s
Movimento
8–12px vertical
Percepcao
Cerebro relaxa
⚡ Scale + Snap-in (Agressivo)
Duracao
0.2–0.4s
Movimento
Scale 0.95 → 1
Percepcao
Modo acao
🌊 Morph + Fade (Fluido)
Duracao
0.8–1.0s
Movimento
Elementos conectados
Percepcao
Narrativa
🧠 Stagger (Escalonamento)
Delay entre elementos que entram em sequencia. Determina se a atencao e guiada ou dispersa.
Stagger sutil (50-100ms)
Elegante, profissional
Stagger forte (150-300ms)
Dramatico, impactante
📜 Scroll (Scroll-driven)
O scroll controla a narrativa. Pode ser apenas transporte ou um gatilho de eventos que transforma a experiencia.
🚶 Scroll Neutro
- • Leitura continua
- • Apenas lazy appearance
- • Usuario "le" o site
"Estou lendo"
🎮 Scroll-driven
- • Secoes respondem ao avanco
- • Progress bars, reveals
- • Usuario "avanca" no site
"Estou avancando"
Tecnicas de Scroll
Parallax
Camadas em velocidades diferentes
Progress
Barras de progresso
Snap
Scroll trava em secoes
Reveal
Elementos aparecem
🎭 Background & Loop
O background motion cria a sensacao de vida. Define se a interface parece estatica ou organica.
🗿 Fundo Estatico
- • Interface solida
- • Profissional e serio
- • Foco no conteudo
"Isso parece estatico"
🌊 Fundo Vivo
- • Interface "respira"
- • Organico e moderno
- • Sensacao premium
"Isso parece vivo"
Tipos de Background Motion
Gradientes animados
Blobs / Waves
Particulas
Grids / Linhas
Luz pulsante
Noise sutil
👆 Interacao (Hover & Click)
O feedback de interacao e a confirmacao de controle. Cada acao do usuario precisa de resposta visual.
Hover Feedback
Simples
Opacity change
Medio
Scale 1.02-1.03
Rico
Glow + Scale
Dramatico
Glow forte + Distortion
Click Feedback
Compress
Scale 0.96-0.97 no click
Sensacao de botao fisico
Bounce
Release com overshoot
Sensacao de energia
⚠️ Por que Feedback Importa
Sem feedback
Inseguranca, duvida
Feedback rico
Confianca, controle
"Isso responde bem" = usuario satisfeito
⚙️ Intensidade e Sistema
A intensidade regula a carga cognitiva total. E um sistema de compensacao, nao de soma.
Como o Sistema Funciona
Quando voce muda intensidade, o sistema automaticamente ajusta:
| Intensidade | Ideal para | Usuario sente |
|---|---|---|
| 🔹 Muito baixa | Estudo, leitura longa | "Consigo ficar aqui" |
| 🔸 Media | Navegacao geral | "Isso e agradavel" |
| 🔶 Alta | Acao, conversao | "Preciso agir" |
| 🔥 Muito alta | Impacto, lancamento | "Isso me empolga" |
"Nenhuma dimensao age sozinha. Tudo se combina para criar uma experiencia cognitiva unica."
📋 Resumo do Modulo
Proximo Modulo:
1.8 - Prompt Parametrico Final