Estratégia antes do post.
A atuação conecta planejamento, repertório e execução.
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. |
Opacidade e deslocamento curto. Reservar para a primeira leitura de uma mensagem editorial.
A atuação conecta planejamento, repertório e execução.
opacity + transform · ease-out
O recorte revela a superfície da esquerda para a direita. O enquadramento participa da assinatura da marca.
E de volta aos dados.
clip-path + opacity · ease-in-out
Intervalos de 32 ms distinguem as etapas sem bloquear a leitura nem a interação.
3 entradas · intervalo de 32 ms
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.
O caminho para o sucesso.
opacity · 400 ms · sem loop
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.
Com prefers-reduced-motion: reduce, deslocamentos e recortes são removidos; os estados mudam imediatamente. O pulso gráfico deixa de acontecer.
Com forced-colors: active, foco e seleção continuam distinguíveis por contorno. O pulso decorativo é removido.
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>