animação-vocabulário

Vocabulário de Animação

Transforme uma descrição vaga de um movimento ou efeito no termo preciso, para que o usuário saiba o que pedir.

Início Rápido

O usuário descreve um efeito de forma genérica. Você retorna o(s) termo(s) correspondente(s) no seguinte formato:

**Escalonamento** — Animar vários itens um após o outro com um pequeno atraso entre cada um, criando uma cascata.

Se vários termos puderem se encaixar, liste a melhor correspondência primeiro, depois 1–2 alternativas com uma nota de uma linha sobre como elas diferem.

Instruções

1. Leia pela intenção, não por palavras-chave. Os usuários descrevem o que veem ou sentem ("elástico", "desliza para fora", "se desenha sozinho"), não o nome técnico. Mapeie a sensação para o glossário abaixo.
2. Cite o glossário literalmente. Suas descrições são autoritárias — use-as como estão, não parafraseie.
3. Desambigue termos próximos. Quando dois competirem (Clip-path vs Máscara, Aparecer com efeito vs Quicar, Transição de elemento compartilhado vs Animação de layout), contraste-os para que o usuário possa escolher.
4. Quando nada corresponder exatamente, nomeie o termo mais próximo e diga claramente que é uma aproximação, ou descreva o efeito no vocabulário do glossário (ex.: "isso é um escalonamento de entradas com escala ").
5. Mantenha-se dentro deste glossário. Se um termo realmente não estiver aqui, diga isso em vez de inventar um — embora você possa explicar o conceito usando estas palavras.
6. Seja conciso. Uma pergunta de nomeação quer um nome, não uma dissertação. Comece com o termo; expanda apenas se perguntado.

Exemplos

Exemplo 1 — baseado em sensação Usuário: "Como se chama quando um popover parece crescer a partir do botão que você clicou, em vez do seu meio?" Saída:

**Animação com origem** — Um elemento anima a partir de seu gatilho, como um popover crescendo a partir do botão que o abriu, em vez de seu próprio centro, que é o padrão em CSS.

Exemplo 2 — desambiguação Usuário: "Aquela coisa em que uma imagem se transforma em outra imagem." Saída:

**Metamorfose** — Uma forma se transforma suavemente em outra forma, ex.: Dynamic Island.

Alternativas próximas:
- **Transição gradual** — se elas simplesmente desaparecem sobrepostas no mesmo lugar.
- **Transição de elemento compartilhado** — se um elemento viaja e se transforma de uma posição para outra.

Exemplo 3 — sensação física Usuário: "Aquele scroll do iOS que resiste e volta quando você puxa demais." Saída:

**Efeito elástico** — Resistência e retorno quando você arrasta além de um limite (a sensação de overscroll do iOS).

Glossário

Uma instantânea curada espelhando a página /vocabulary do projeto; mantenha ambas sincronizadas quando uma mudar.

Entradas e Saídas — como os elementos aparecem e desaparecem

• Aparecer / Desaparecer gradualmente — Elemento aparece ou desaparece alterando a opacidade.
• Deslizar para entrar — Elemento entra deslizando de fora da tela (esquerda, direita, topo ou fundo).
• Entrada com escala — Elemento cresce de menor para o tamanho total ao aparecer, geralmente combinado com um fade.
• Aparecer com efeito — Elemento aparece com um leve overshoot, como se quicasse no lugar.
• Revelar — O conteúdo é descoberto gradualmente, muitas vezes animando um clip-path ou máscara.
• Entrar / Sair — A animação que um elemento executa quando é adicionado ou removido da tela.

Sequenciamento e Tempo — coordenando vários elementos ou momentos

• Keyframes — Pontos definidos em uma animação (0%, 50%, 100%) que o navegador preenche os intervalos entre eles.
• Interpolação / Tween — Gerar todos os quadros intermediários entre um valor inicial e final, para que o movimento seja contínuo.
• Escalonamento — Animar vários itens um após o outro com um pequeno atraso entre cada um, criando uma cascata.
• Orquestração — Temporizar deliberadamente múltiplas animações para que pareçam um movimento coordenado.
• Atraso — Tempo antes de uma animação começar.
• Duração — Quanto tempo uma animação leva.
• Modo de preenchimento — Se um elemento mantém os estilos de seu primeiro ou último quadro antes do início ou após o término da animação (ex.: forwards).
• Animação em etapas — Uma animação dividida em passos discretos, como um cronômetro regressivo.

Movimento e Transformações — alterando a posição, tamanho ou ângulo de um elemento

• Translatar — Mover um elemento ao longo do eixo X ou Y.
• Escalar — Tornar um elemento maior ou menor.
• Rotacionar — Girar um elemento em torno de um ponto.
• Distorcer — Inclinar um elemento ao longo do eixo X ou Y, cisalhando-o de sua forma retangular.
• Inclinar 3D / Virar — Rotacionar no espaço 3D (rotateX / rotateY) para adicionar profundidade.
• Perspectiva — O quão forte o efeito 3D parece — um valor menor exagera a profundidade, como se o espectador estivesse mais próximo.
• Origem da transformação — O ponto de ancoragem a partir do qual uma escala ou rotação cresce ou gira.
• Animação com origem — Um elemento anima a partir de seu gatilho, como um popover crescendo a partir do botão que o abriu, em vez de seu próprio centro, que é o padrão em CSS.

Transições Entre Estados — conectando um estado, visão ou elemento a outro

• Transição gradual — Um elemento desaparece enquanto outro aparece, no mesmo lugar.
• Transição de continuidade — Uma mudança que mantém o usuário orientado ao conectar visualmente o antes e o depois. Por exemplo, tornar o mesmo retângulo maior e menor.
• Metamorfose — Uma forma se transforma suavemente em outra forma, ex.: Dynamic Island.
• Transição de elemento compartilhado — Um elemento viaja e se transforma de uma posição para outra, como uma miniatura se expandindo em um cartão.
• Animação de layout — Quando o tamanho ou posição de um elemento muda, ele anima para o novo local em vez de pular.
• Acordeão / Recolher — Uma seção expande e recolhe suavemente sua altura para mostrar ou ocultar conteúdo.
• Transição com direção — O conteúdo desliza em uma direção ao avançar e na oposta ao voltar, de modo que a navegação tenha um senso de direção.

Rolagem — movimento ligado à rolagem ou navegação entre visualizações

• Revelar com rolagem — Elementos aparecem ou deslizam para o lugar ao entrarem na viewport.
• Animação orientada por rolagem — Uma animação cujo progresso está diretamente ligado à posição de rolagem.
• Paralaxe — Plano de fundo e primeiro plano se movem em velocidades diferentes durante a rolagem, criando profundidade.
• Transição de página — Uma animação que ocorre ao navegar de uma página ou rota para outra.
• Transição de visualização — O navegador faz uma metamorfose entre dois estados ou páginas, conectando elementos compartilhados.

Feedback e Interação — respondendo às ações do usuário

• Efeito de hover — Mudança visual quando o cursor passa sobre um elemento.
• Feedback de clique / toque — Uma leve redução de escala quando um elemento é clicado, para que pareça físico.
• Segurar para confirmar — Um efeito de progresso que preenche enquanto o usuário segura um botão.
• Arrastar — Mover um elemento segurando-o, geralmente com momentum ao soltar.
• Arrastar para reordenar — Arrastar itens em uma lista para reorganizá-los, enquanto os outros se deslocam para abrir espaço.
• Deslizar para dispensar — Arrastar um elemento para fora da tela para fechá-lo, como uma gaveta ou toast.
• Efeito elástico — Resistência e retorno quando você arrasta além de um limite (a sensação de overscroll do iOS).
• Agitar / Balançar — Uma vibração rápida lateral sinalizando um erro ou entrada rejeitada.
• Ondulação — Um círculo se expandindo a partir do ponto de um toque, confirmando o pressionamento.

Suavização — como a velocidade muda durante uma animação

• Suavização — A taxa na qual uma animação acelera ou desacelera.
• Suavização de saída — Começa rápido, termina devagar. O padrão para a maioria das interfaces e qualquer coisa que responda ao usuário.
• Suavização de entrada — Começa devagar, termina rápido. Geralmente evitado; pode parecer lerdo.
• Suavização de entrada e saída — Devagar, rápido, devagar. Bom para elementos já na tela que se movem de A para B.
• Linear — Velocidade constante. Evite para interfaces; reserve para spinners ou marquises.
• Curva cúbica de Bézier — Uma curva de suavização personalizada que você define para controle preciso.
• Suavização assimétrica — Uma curva que acelera e desacelera em taxas diferentes. Parece mais viva que uma simétrica.

Animações com Mola — movimento baseado em física como alternativa à suavização de duração fixa

• Mola — Movimento impulsionado por física (tensão, massa, amortecimento) em vez de uma duração definida.
• Rigidez / Tensão — O quão fortemente a mola puxa em direção ao alvo. Mais alto parece mais rápido.
• Amortecimento — O quão rapidamente uma mola se estabiliza. Amortecimento menor significa mais quique e oscilação.
• Massa — O quão pesado o elemento animado parece. Mais massa o torna mais lento e mais lerdo.
• Quique — Uma mola que ultrapassa e se estabiliza, adicionando ludicidade.
• Duração percebida — Quanto tempo uma mola parece ter terminado, mesmo que continue micro-assentando por baixo.
• Momentum — Movimento que carrega velocidade, especialmente após um arrasto ou interrupção.
• Velocidade — O quão rápido e em qual direção um elemento está se movendo. Uma mola a carrega para a próxima animação quando interrompida, de modo que um elemento arremessado mantém sua velocidade.
• Animação interrompível — Uma animação que pode ser redirecionada suavemente no meio do caminho em vez de terminar primeiro.

Loop e Movimento Ambiente — animações que rodam sozinhas

• Marquise — Texto ou conteúdo que rola continuamente em loop.
• Loop — Uma animação que se repete, um número definido de vezes ou infinitamente.
• Alternar (ioiô) — Um loop que vai e volta, invertendo a cada iteração, em vez de pular de volta ao início.
• Órbita — Um elemento circulando ao redor de outro em um caminho contínuo.
• Pulso — Uma repetição suave de escala ou opacidade para chamar atenção.
• Flutuar — Uma deriva contínua e suave para cima e para baixo que faz um elemento estático parecer vivo e sem peso.
• Animação ociosa — Movimento sutil que ocorre enquanto um elemento está parado, esperando para ser interagido.

Polimento e Efeitos — os pequenos toques que separam o bom do excelente

• Desfoque — Um filtro de desfoque usado para suavizar um elemento ou mascarar pequenas imperfeições.
• Clip-path — Recortar um elemento em uma forma, usado para revelações, máscaras e controles deslizantes de antes/depois.
• Máscara — Ocultar ou revelar partes de um elemento usando uma forma ou gradiente — como clip-path, mas com bordas suaves e esmaecíveis.
• Controle deslizante antes/depois — Um divisor arrastável que desliza entre duas imagens sobrepostas para compará-las.
• Desenho de linha — Um caminho SVG que se desenha sozinho, como se uma caneta invisível o estivesse traçando.
• Metamorfose de texto — Texto que anima caractere por caractere quando muda, chamando atenção para o novo valor.
• Esqueleto / Brilho — Um placeholder com um brilho em movimento mostrado enquanto o conteúdo carrega.
• Contador numérico — Dígitos girando ou contando até um valor.
• Números tabulares — Dígitos de largura fixa para que os números não se movam ao mudar. Essencial para contadores, temporizadores e medidores.
• Máquina de escrever — Texto aparecendo um caractere por vez, como se estivesse sendo digitado.

Performance — o que mantém o movimento suave em vez de trêmulo

• Taxa de quadros (FPS) — Quadros desenhados por segundo. 60fps é a linha de base para movimento suave; 120fps em telas mais novas.
• Tremulação — Solavancos visíveis quando o navegador perde quadros porque não consegue acompanhar a animação.
• Quadro perdido — Um quadro que o navegador perdeu o prazo de desenhar, causando uma pequena interrupção no movimento.
• Composição — Deixar a GPU mover ou esmaecer um elemento em sua própria camada sem refazer layout ou pintura.
• will-change — Uma dica CSS de que um elemento está prestes a animar, para que o navegador possa promovê-lo a sua própria camada antecipadamente.
• Thrashing de layout — Animar propriedades como width, height, top ou left que forçam o navegador a recalcular o layout a cada quadro, causando tremulação.

Princípios a Saber — conceitos que guiam quando e como animar

• Animação proposital — O movimento deve servir a uma função — orientar, dar feedback, mostrar relações — não apenas decorar.
• Antecipação — Uma pequena preparação na direção oposta antes de um movimento, sugerindo o que está prestes a acontecer.
• Acompanhamento — Partes de um elemento continuam se movendo e se estabilizam ligeiramente após o movimento principal parar, adicionando peso.
• Comprimir e esticar — Deformar um elemento enquanto se move para transmitir peso, velocidade e flexibilidade.
• Performance percebida — A animação certa faz uma interface parecer mais rápida, mesmo quando não é.
• Frequência de uso — Quanto mais vezes um usuário vê uma animação, mais curta e sutil ela deve ser.
• Consistência espacial — Animar para que um elemento mantenha sua identidade e posição entre estados, para que os usuários nunca percam o rastro de onde as coisas foram.
• Aceleração por hardware — Animar transform e opacity permite que a GPU mantenha o movimento suave.
• Movimento reduzido — Respeitar a configuração prefers-reduced-motion do usuário, reduzindo ou removendo movimento.