Motion

Movimento que explica o que mudou.

Precisão em movimento.

As ações frequentes respondem imediatamente. Entradas pontuais explicam a composição; modais e gavetas preservam a relação entre contexto e detalhe.

Uso	Token	Intenção
Pressão	`--xq-motion-press`	100 ms para confirmar o acionamento.
Estados de controle	`--xq-motion-control`	160 ms para mudanças de cor e limite.
Dialog e toast	`--xq-motion-panel`	240 ms para orientar a entrada e a saída.
Entrada editorial	`--xq-revelar`	600 ms para estabelecer a composição do ensaio.
Sequência	`--xq-motion-stagger`	32 ms entre etapas.
Pulso da superfície	`--xq-motion-editorial`	400 ms em uma execução, sem repetição contínua.
Entrada e saída	`--xq-ease-out`	Começa responsivo, chega suave.
Janela gráfica	`--xq-ease-inout`	Continuidade no recorte.
Gaveta	`--xq-ease-drawer`	O detalhe vem da borda da tela.

Revelar a entrada

Opacidade e deslocamento curto. Reservar para a primeira leitura de uma mensagem editorial.

Estratégia antes do post.

A atuação conecta planejamento, repertório e execução.

opacity + transform · ease-out

Abrir uma janela

O recorte revela a superfície da esquerda para a direita. O enquadramento participa da assinatura da marca.

Do conceito à publicação.

E de volta aos dados.

clip-path + opacity · ease-in-out

Organizar a sequência

Intervalos de 32 ms distinguem as etapas sem bloquear a leitura nem a interação.

PlanejarEstratégia

CriarConteúdo

AprenderDados

3 entradas · intervalo de 32 ms

Dar presença à superfície

Um pulso sutil confirma o encontro com a superfície. Ativo no hover apenas com ponteiro preciso; disponível por botão para toque e teclado.

Organização e processo.

O caminho para o sucesso.

opacity · 400 ms · sem loop

Repetição previsível.

Repetir deve funcionar no primeiro clique e nos seguintes. O reset neutraliza animações anteriores, confirma o estado inicial e retoma após dois quadros. Cada nova solicitação cancela os quadros pendentes da anterior.

alvo.classList.add('is-resetting');
alvo.classList.remove('is-visivel');
void alvo.offsetWidth;
requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    alvo.classList.remove('is-resetting');
    alvo.classList.add('is-visivel');
  });
});

.is-resetting,
.is-resetting *,
.is-resetting::before,
.is-resetting::after,
.is-resetting *::before,
.is-resetting *::after,
.is-resetting::backdrop {
  transition: none !important;
  animation: none !important;
}

Cliques rápidos cancelam os frames pendentes. O alvo final permanece visível. Sem JavaScript, a mensagem nasce legível.

Respeitar o ambiente.

Movimento reduzido

Com prefers-reduced-motion: reduce, deslocamentos e recortes são removidos; os estados mudam imediatamente. O pulso gráfico deixa de acontecer.

Cores forçadas

Com forced-colors: active, foco e seleção continuam distinguíveis por contorno. O pulso decorativo é removido.

Teclado e toque

Os exemplos de movimento têm botão explícito. O conteúdo não depende de hover. Modais e gavetas preservam foco, Escape e retorno ao acionador.

<article id="entrada" class="xq-motion-entrada" data-xq-motion>…</article>
<button type="button" data-xq-repeat="entrada">Repetir entrada</button>

[XQ // D4 — 64Hz] PRANCHA TÉCNICA / 06 CONTRATOS

Tempo também é um contrato.

Motion explica uma mudança que já tem significado. Pressão confirma o gesto; uma entrada editorial apresenta a composição; uma janela revela o plano. Nenhuma animação pode bloquear o conteúdo, disputar o foco ou reiniciar por acidente.

01 / 06

Anatomia temporal de um replay

Repetir depende de uma sequência verificável: neutralizar transições, remover o estado ativo, consolidar a geometria e só então reativar. A linha do tempo abaixo separa o reset sem movimento da apresentação de 600 ms.

Seis chamadas de anatomia: Anatomia temporal de um replay. Leia os contratos correspondentes abaixo.

Neutralizar o movimento

Adicionar .is-resetting antes de mudar o estado. A regra cobre descendentes, pseudo elementos e backdrop para impedir transições herdadas durante o reset.
Retirar o estado ativo

Remover .is-visivel enquanto o reset neutraliza efeitos. O conteúdo só deve ficar oculto nesse trecho controlado; o HTML inicial permanece legível.
Consolidar o layout

Ler a dimensão do alvo força o reflow necessário. A mesma instância retém o controle do ciclo; não clonar conteúdo para fabricar uma entrada.
Respeitar dois quadros

Os dois requestAnimationFrame separam o estado inicial do estado final. O segundo retira .is-resetting e reaplica .is-visivel.
Chegar sem excesso

O ease-out reduz a velocidade na chegada. Usar a duração e a distância do papel da animação, sem mola ou overshoot adicionados por hábito.
Reduzir e interromper

prefers-reduced-motion mantém o conteúdo no estado final. Um novo replay cancela o quadro anterior e não acumula ciclos ou anúncios.

02 / 06

Contratos de tokens CSS

Valor ou alias no tema claro, propriedade consumidora e limite de uso. Cores são apresentadas em RGB equivalente; a fonte continua no CSS de tokens. O inspetor mostra a resolução no tema escolhido.

Contrato de Tempo também é um contrato
Token / expressão	Aplicação CSS	Regra
`--xq-revelar` 600ms	`.xq-motion-entrada.is-ready` transition-duration	600 ms para entrada editorial. Não aplicar esse tempo a cada resposta frequente de controle.
`--xq-motion-press` 100ms	`.xq-btn` transition-duration	100 ms no transform de pressão. Resposta curta, sem atrasar o acionamento.
`--xq-motion-control` 160ms	`.xq-btn` transition-duration	160 ms nas mudanças de cor e borda. Não animar layout do controle.
`--xq-motion-panel` 240ms	`.xq-gaveta` transition-duration	240 ms para a relação espacial entre a borda da tela e o detalhe.
`--xq-motion-stagger` 32ms	`.xq-motion-grupo.is-visivel .xq-motion-passo:nth-child(2 of .xq-motion-passo)` transition-delay	32 ms por posição; cinco passos usam múltiplos de 0 a 4. Não crescer indefinidamente.
`--xq-motion-editorial` 400ms	`.xq-pisca-no-hover.is-visivel::after` animation-duration	400 ms em uma execução. O pulso não roda continuamente no fundo.
`--xq-motion-travel-lg` 24px	`.xq-motion-entrada.is-ready` transform	24 px no eixo vertical da entrada; a chegada retorna a translateY(0).
`--xq-motion-travel-md` 12px	`.xq-motion-grupo.is-ready .xq-motion-passo` transform	12 px negativos no eixo horizontal; sequência mantém ordem e espaço final.
`--xq-ease-out` cubic-bezier(0.23, 1, 0.32, 1)	`.xq-motion-entrada.is-ready` transition-timing-function	Curva de chegada compartilhada; preservar a resposta imediata no início.
`--xq-ease-inout` cubic-bezier(0.77, 0, 0.175, 1)	`.xq-motion-janela.is-ready` transition-timing-function	Curva do clip-path. Recorte termina em inset(0), sem deixar texto parcialmente cortado.
`--xq-ease-drawer` cubic-bezier(0.32, 0.72, 0, 1)	`.xq-gaveta` transition-timing-function	A gaveta entra pelo mesmo eixo em que sai; o foco continua controlado pelo dialog.
`--xq-display-leading` 0.96	`.xq-motion-alvo h3` line-height	0,96 no título do alvo. Reservar altura final para evitar saltos na revelação.

03 / 06

Uso correto × uso incorreto

Compare a mesma intenção em duas composições. Os exemplos são amostras de leitura; os controles operáveis ficam no playground.

Uso Correto (Xeque)

[XQ // D4] ENTRADA600 ms

Estratégia antes do post.

Uma entrada curta, acionada por intenção, com conteúdo disponível no HTML inicial.

O efeito explica a chegada de uma composição editorial, com destino estável.
Duração, deslocamento e curva têm tokens distintos e motivo documentado.
Repetição é intencional; a preferência por menos movimento preserva a leitura.

Uso Incorreto (Genérico)

Animação em tudo

Espere a mágica…

Texto escondido até a sequência terminar.

Aguarde 3 segundos

Loop infinito · bounce · delays aleatórios

A espera bloqueia uma ação que poderia responder imediatamente.
Mola e atraso aleatório não apresentam relação entre origem e destino.
Ocultar conteúdo antes de JavaScript quebra a leitura na ausência do módulo.

04 / 06

Ensaiar o replay sem duplicar o ciclo

O laboratório muda a mensagem de cada estado dentro do mesmo plano. “Repetir animação” ensaia a revelação da bancada, operada por XequeGuia; os exemplos acima ensaiam XequeCore. Ambos usam .is-resetting, reflow e dois quadros, cancelando a repetição anterior. Nenhum ensaio inicia um loop.

Estado Tema da amostra Respiro 24 px Texto extenso

[XQ // D4] PRONTO

[XQ // D4] TRANSIÇÃO LOCALSEM LOOP

Precisão em movimento.

Entrada pronta para um novo ensaio.

600 ms

Pronto. Altere um controle para inspecionar o contrato.

Ensaio local e determinístico. A ação percorre carregamento → sucesso; movimento reduzido entrega o estado final imediatamente. Repetir preserva os controles.

Inspecionar tokens resolvidos

--xq-revelar: 600ms
--xq-motion-press: 100ms
--xq-motion-control: 160ms
--xq-motion-panel: 240ms
--xq-motion-stagger: 32ms
--xq-motion-editorial: 400ms
--xq-motion-travel-lg: 24px
--xq-motion-travel-md: 12px
--xq-ease-out: cubic-bezier(0.23, 1, 0.32, 1)
--xq-ease-inout: cubic-bezier(0.77, 0, 0.175, 1)
--xq-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1)
--xq-display-leading: 0.96

05 / 06

Aplicar o contrato

Um único caminho de repetição

Nos componentes com data-xq-motion montados pelo módulo, XequeCore.replay executa o reset compartilhado. A função devolve um cancelador e conserva .is-visivel como estado final. A bancada desta prancha pertence ao XequeGuia e usa .is-visible; não misturar as duas classes.

const alvo = document.querySelector("[data-xq-motion]");
const cancelar = XequeCore.replay(alvo);
// Se precisar interromper antes da conclusão:
// cancelar();
// alvo.classList.add("is-visivel");
// Antes de remover o componente:
// XequeCore.destroy(alvo);

O HTML inicial continua legível

A classe is-ready é aprimoramento do módulo. Sem ela, a entrada e a janela já exibem o conteúdo; o JavaScript prepara apenas os alvos que consegue operar.

<article class="xq-motion-alvo xq-motion-entrada" data-xq-motion>
  <h3>Estratégia antes do post.</h3>
  <p>A atuação conecta planejamento e execução.</p>
</article>

Conservar a leitura com movimento reduzido

A fundação zera as distâncias e os tempos dos papéis de movimento; o CSS de entrada também garante opacidade final e neutraliza o recorte. Uma integração própria precisa preservar essas três condições. O trecho mostra o contrato já aplicado aos exemplos, sem atrasar interação ou foco.

@media (prefers-reduced-motion: reduce) {
  .xq-motion-entrada.is-ready {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .xq-motion-janela.is-ready {
    opacity: 1;
    clip-path: inset(0);
    transition: none;
  }
}

06 / 06

Critérios de aceite

Repetir durante a transição: um único ciclo continua ativo.
Ativar prefers-reduced-motion: conteúdo final legível sem deslocamento.
Desabilitar JavaScript: nenhuma entrada editorial permanece escondida.
Conferir foco e rolagem durante o replay: o botão acionado mantém o foco.
Confrontar os dois replays: XequeCore usa .is-visivel; XequeGuia usa .is-visible, sem transferir foco nem duplicar anúncios.

Precisão em movimento.

Revelar a entrada

Estratégia antes do post.

Abrir uma janela

Do conceito à publicação.

Organizar a sequência

Dar presença à superfície

Organização e processo.

Repetição previsível.

Respeitar o ambiente.

Neutralizar o movimento

Retirar o estado ativo

Consolidar o layout

Respeitar dois quadros

Chegar sem excesso

Reduzir e interromper

Estratégia antes do post.

Espere a mágica…

Precisão em movimento.

Um único caminho de repetição

O HTML inicial continua legível

Conservar a leitura com movimento reduzido