[03.14] Pilar 03

Motion

Sistema de movimento do Dark Cockpit. Três durações, uma curva de easing, motion intencional.

[01]

Motion Principles

Filosofia de movimento do AIOX.

Intencional

Cada movimento tem propósito. Não animar por animar.

Cohesivo

Mesma curva de easing para todo o sistema. Consistência visual.

Performático

3 durações apenas. 60fps garantido. Zero lag.

[02]

Durations

Três durações canônicas do sistema.

DURATION 01MICRO

150ms

Micro-interactions

Hover, focus, feedback imediato

DURATION 02CARD

450ms

Card Reveal

Entrada de cards, modais, tooltips

DURATION 03PAGE

800ms

Page Transition

Transições de página, mudanças de rota

[03]

Easing Curves

Curvas de easing para movimento natural.

Cockpit Ease (Principal)

cubic-bezier(0.2, 0, 0, 1)

Início explosivo, desaceleração infinita. Usado para todos os movimentos padrão do sistema.

•Micro-interactions
•Card reveal
•Page transitions

Revelação (Back-out)

cubic-bezier(0.34, 1.56, 0.64, 1)

Efeito de "snap" ou "mola" para elementos que "encaixam" no lugar. Usado para revelações dramáticas.

•Elementos que "encaixam"
•Revelações dramáticas
•Modais e popovers
[04]

Animation Patterns

Padrões de animação comuns do sistema.

Fade In

Elemento fade-in
opacity: 0 → 1
duration: 150ms
easing: cubic-bezier(0.2, 0, 0, 1)

Slide Up

Elemento slide-up
transform: translateY(20px) → 0
opacity: 0 → 1
duration: 450ms

Scale Up

Elemento scale-up
transform: scale(0.9) → 1
opacity: 0 → 1
duration: 450ms

Rotate In

Elemento rotate-in
transform: rotate(-10deg) → 0
opacity: 0 → 1
duration: 450ms