Motion

Movimento sem ansiedade.

Transições discretas que reforçam hierarquia. Nada ornamental. Cada animação clarifica relação ou destaca algo que importa.

01 · PRINCÍPIOS

Três regras. Nenhuma exceção.

Discreto.

Nada chama mais atenção que o conteúdo.

Deliberado.

Cada animação serve à hierarquia, não à decoração.

Denso.

Transições curtas em UI. Reveals generosos no editorial.

02 · EASING & DURAÇÃO

--ease: cubic-bezier(0.16, 1, 0.3, 1);

--duration-xs: 150ms; /* hover micro */

--duration-sm: 200ms; /* UI state */

--duration-md: 300ms; /* dropdown, modal */

--duration-lg: 500ms; /* page transition */

--duration-xl: 900ms; /* scroll reveal editorial */

03 · SCROLL REVEAL

Elementos editoriais entram com translate-y de 24px e opacidade 0 → 1 em 900ms. Delays escalonados (100-500ms) criam cascata natural.

04 · MICRO-INTERAÇÕES

Hover em cards

translate-y-[-6px] + shadow-brand-lg em 300ms

Hover em CTAs

underline fino cresce 24px → 48px em 200ms

Dropdowns

opacity 0 → 1 + translate-y-[-6px] → 0 em 200ms

Marquee

50s linear infinite, translateX 0 → -50%