Foundations

Motion .

Movimento serve o conteúdo — nunca compete com ele. Uma entrada orquestrada por página, revelações sutis por item no scroll, e hover restrito a mudança de cor. Esta página é intencionalmente estática: a referência não performa o que documenta.

Durações

Token Valor Uso
--duration-fast 140ms Micro-interações: hover, foco, toggle de estado
--duration-base 220ms Transições padrão: modais, menus, accordions
--duration-slow 640ms Entradas orquestradas: hero stagger, page-load
--stagger 90ms Delay entre itens de uma sequência orquestrada (hero stagger, card cascade)

Curvas de easing

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

Transições de estado simétricas — elementos que entram e saem

--ease-out cubic-bezier(0.16, 1, 0.3, 1)

Elementos que chegam — entradas com overshoot suave

As leis do movimento

  1. 01
    Uma entrada orquestrada por página

    Somente o hero tem licença para uma sequência de stagger completa na carga da página. O --stagger de 90 ms espaça cada item do hero; o --duration-slow de 640 ms é a duração dessa entrada. Nada mais na página usa entrada orquestrada — o ponto final verde (.dot) é o último beat da sequência.

  2. 02
    Scroll-reveals sutis e por item

    Revelações em scroll são aplicadas por elemento individual — cards, itens de lista — nunca por seção inteira. Use --duration-base (220 ms) com --ease-out e deslocamento vertical mínimo (≤ 16 px). Não anime blocos grandes; isso cria um efeito de "piscada" que desorenta o leitor.

  3. 03
    Hover = mudança de cor apenas

    Interações de hover produzem exclusivamente mudança de cor (texto, background, border). Nenhum translate, scale, bounce ou rotação em hover. A exceção deliberada é o Card com prop interactive, que usa translateY(-2px) para sinalizar clicabilidade — mas isso é uma exceção explícita, não um padrão a propagar.

  4. 04
    Reduced-motion colapsa tudo

    Qualquer animação ou transição definida no sistema deve estar encapsulada em uma media query @media (prefers-reduced-motion: no-preference) ou neutralizada explicitamente em @media (prefers-reduced-motion: reduce). O sistema não presume que animação é inofensiva — ela é opt-in para o usuário.

Referência rápida

Hero stagger (entrada orquestrada)

duration: var(--duration-slow) /* 640ms */ delay: calc(index * var(--stagger)) /* 90ms cada */ ease: var(--ease-out)

Hover de link / botão

transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard)

Scroll-reveal de item

transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out) /* transform: translateY(12px) → translateY(0) */