Movimento com intenção.

01 · Direção

Editorial, precisa, contida.

A página deve parecer composta, não animada para chamar atenção. Usar movimento para orientar a entrada, marcar hierarquia e confirmar uma interação.

02 · Tokens

Escala de movimento.

Os tempos diferenciam feedback de interface de revelação editorial. Os valores são limites de referência, não metas para animar todos os elementos.

03 · Biblioteca visual

Exemplos para experimentar.

Os botões reproduzem as amostras sob comando, sem iniciar animações automaticamente nesta página. Passe o cursor sobre CTA, link e card para ver o feedback de interface.

04 · Implementação

Regras prontas para CSS.

A entrada de conteúdo usa aprimoramento progressivo: sem JavaScript ou sem suporte a IntersectionObserver, tudo permanece visível. Não deixar texto ou CTA crítico invisível enquanto aguarda uma animação.

Tokens e estados de interação

:root {
  --motion-fast: 140ms;
  --motion-control: 160ms;
  --motion-card: 180ms;
  --motion-reveal: 460ms;
  --motion-hero: 520ms;
  --motion-stagger: 70ms;
  --motion-distance: 12px;
  --motion-orbit: 3.5s;
  --ease-micro: ease-out;
  --ease-editorial: cubic-bezier(.22, .61, .36, 1);
}

.button {
  transition: color var(--motion-control) var(--ease-micro),
              background-color var(--motion-control) var(--ease-micro),
              border-color var(--motion-control) var(--ease-micro);
}

.card { transition: border-color var(--motion-card) var(--ease-micro); }

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(var(--motion-distance)); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

Revelação ao rolar com fallback visível

/* Só esconda alvos depois de confirmar suporte e preferência. */
if (
  !window.matchMedia('(prefers-reduced-motion: reduce)').matches &&
  'IntersectionObserver' in window
) {
  const targets = document.querySelectorAll('[data-reveal]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.14, rootMargin: '0px 0px -40px 0px' });

  document.documentElement.classList.add('motion-ready');
  targets.forEach((target) => observer.observe(target));
}

/* O conteúdo começa visível. A classe só entra quando o observer está ativo. */
[data-reveal] { opacity: 1; transform: none; }
.motion-ready [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(var(--motion-distance));
}
.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--motion-reveal) var(--ease-editorial),
              transform var(--motion-reveal) var(--ease-editorial);
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal] { opacity: 1; transform: none; }
}

05 · Aplicação na página

Mapa por faixa.

A cadência mantém o ritmo da narrativa e dá pausas visuais. Várias faixas não precisam de movimento para funcionarem.