Wake Motion System®
Quando tudo se move com propósito, a tecnologia parece viva.
Movimento comunica.
Toda animação da Wake Hub possui um objetivo: guiar, informar, conectar e encantar. Nunca distrair.
Naturalidade
Movimentos orgânicos que respeitam a física real.
Elegância
Transições discretas e refinadas.
Precisão
Cada frame comunica intenção clara.
Performance
60 FPS garantidos em qualquer dispositivo.
Consistência
Mesma linguagem em todo o ecossistema.
Motion Principles
Os cinco princípios que governam todo movimento.
Natural
Nada brusco. Orgânico.
Responsivo
Cada interação possui resposta imediata.
Elegante
Movimentos discretos.
Inteligente
Cada animação possui propósito.
Premium
Pouco movimento. Muito refinamento.
Motion Tokens
Durações e curvas de easing padronizadas.
Duration
Curves
Scroll System
Animações de entrada baseadas em scroll.
Hover System
Efeitos de hover padronizados.
Cursor System
Efeitos de cursor interativos.
Transitions
Transições de UI padronizadas.
Selecione uma transição acima para visualizar
Microinteractions
Feedback animado em cada interação.
Loading System
Padrões de carregamento e skeleton.
Feedback Motion
Animações de feedback para ações do usuário.
Charts Motion
Animações de gráficos e KPIs.
Dashboard Motion
Animações específicas para dashboards.
AI Motion
Movimento específico para Inteligência Artificial.
O Wake Motion System organiza toda linguagem de movimento do ecossistema.|
Performance
Otimização e acessibilidade do motion.
GPU
Animações renderizadas via GPU com transform e opacity.
Lazy Motion
Componentes animados carregados sob demanda.
Intersection Observer
Animações disparam apenas quando visíveis.
60 FPS
Performance garantida em todos os dispositivos.
Reduced Motion
Respeita prefers-reduced-motion do usuário.
Motion Budget
Limite de animações simultâneas por viewport.
Motion Only When Visible
Animações pausam fora do viewport.
Accessibility
Movimento não é a única forma de feedback.
Playground
Laboratório de movimento em tempo real.
Motion Lab
Preview
Aplicação Prática
Como o motion deve ser aplicado em cada cenário.
Landing
Entrada com fade + slide up. Scroll reveal suave. CTA com hover scale.
Elementos aparecem instantaneamente. Sem scroll reveal. Hover brusco.
Movimento guia o olhar do usuário através da narrativa da página.
Aumenta engajamento e tempo na página.
Roadmap
Progresso do WDS — do fundamento à governança.