Design, Tecnologia, Código e IA
Motion
No Figma a gente monta a animação com Smart Animate e ajusta no olho. Na hora de pedir pro dev ou pra IA, sai “deixa mais suave”, e volta um fade genérico. Aqui estão os nomes que os dois entendem, cada um com a demo rodando e uma frase pronta pra copiar.
48 termos · demos ao vivo · aberto e sem cadastro
Antes dos verbetes
Adjetivo vira fade genérico. O que funciona é descrever o movimento em partes. Não precisa preencher todas, mas cada uma que fica de fora é uma decisão que você está entregando pra outra pessoa, ou pra IA, tomar.
Gatilho
O que dispara: clicar, passar o mouse, a tela abrir, o dado chegar, salvar.
Elemento
Quem se mexe: o menu, a linha da lista, o ícone de salvar, o painel lateral.
O que muda
De onde pra onde: opacidade, posição (sobe 8px), tamanho, cor, raio.
Duração
Quanto tempo leva. 100ms, 200ms, 300ms ou 450ms resolvem quase tudo.
Curva
Ease-out pra entrar, ease-in pra sair, mola só em momento de marca.
Origem e ordem
De onde cresce (do botão, do canto) e em que sequência, se for mais de um elemento.
Vago
“Coloca uma animação bonita quando o menu abrir, bem suave.”
Específico
“Ao clicar em Ações, o menu entra com scale in de 0,94 pra 1 e fade, crescendo a partir do canto do botão (transform-origin top left), em 200ms com ease-out. Ao fechar, sai com fade em 100ms e ease-in.”
Números de partida
Se o seu time ainda não tem tempos e curvas definidos, começa por estes. São os mesmos que as demos lá embaixo usam, e saem de um design system de produto que está no ar. Depois cada time ajusta o seu.
Duração
Curva
cubic-bezier(0.2, 0.85, 0.2, 1)cubic-bezier(0.4, 0, 1, 1)cubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0.2, 0.9, 0.2, 1.2)Tradutor
Quando a palavra que vier à cabeça for uma destas, troca pelo termo do meio no pedido. O link leva pro verbete com a demo.
| Você quer dizer | Peça assim | Tempo |
|---|---|---|
| “Suave” | Fade com deslocamento pequeno (sobe 8px), ease-out | 200ms |
| “Rápido”, “seco”, “sem frescura” | Só cor ou opacidade, sem deslocamento | 100ms |
| “Aparecer do nada”, “brotar” | Scale in a partir da origem, com fade | 200ms |
| “Um de cada vez”, “em sequência” | Stagger | 60ms entre itens |
| “Trocar sem piscar” | Crossfade | 200ms |
| “Crescer e virar outra coisa” | Contêiner contínuo ou morph | 450ms, ease-in-out |
| “Com vida”, “divertido”, “com bounce” | Mola com overshoot, só em momento de marca | 450ms, mola |
| “Chamar atenção” | Pulso se está ao vivo; pop se acabou de confirmar. Nunca loop em coisa parada | 2,4s no pulso |
| “Mostrar que deu erro” | Shake uma vez, com a mensagem escrita | 300ms |
| “Está carregando” | Skeleton se a forma é conhecida; spinner se é uma ação curta | spinner só depois de 600ms |
| “Abrir e fechar” | Acordeão (dentro da página) ou gaveta (por cima da página) | 200ms a 300ms |
| “Os outros pularam de lugar” | Animação de layout | 300ms |
| “Vai pro próximo” | Transição com direção | 200ms |
Verbetes
Cada verbete diz o que é, quando faz sentido e traz uma frase pronta pra pedir. A demo roda sozinha quando aparece na tela, e o botão Rodar repete. A etiqueta mostra quando usar.
48 termos
Quanto dura e como acelera. É o que mais muda a sensação de um movimento, e o que mais aparece mal pedido.
duration
Quanto tempo o movimento leva do começo ao fim.
Em interface é curto: 100ms no hover, 200ms no padrão, 300ms em gaveta e modal, 450ms só em momento de marca. Passou de meio segundo, a pessoa começa a esperar a animação.
Como pedir
A gaveta abre em 300ms. O resto da tela fica em 200ms.
No código: transition-duration: 200ms;
No Figma: Duração, no painel da interação
easing
Como a velocidade varia durante o movimento: se arranca, se freia, se é constante.
Mesma duração, sensações diferentes. Na demo, as três bolinhas levam exatamente o mesmo tempo.
Como pedir
Troca a curva pra ease-out, está saindo linear.
No código: transition-timing-function: cubic-bezier(0.2, 0.85, 0.2, 1);
No Figma: Easing, no painel da interação
ease-out
Começa rápido e freia no final. Parece que o elemento chega e assenta.
É a curva padrão de interface: tudo o que entra ou muda de lugar.
Como pedir
Entra com ease-out.
No código: cubic-bezier(0.2, 0.85, 0.2, 1)
No Figma: Ease out
ease-in
Começa devagar e acelera até sair. Parece que o elemento vai embora.
Só no que sai da tela. Em entrada, deixa tudo com cara de lento.
Como pedir
Ao fechar, sai com ease-in em 100ms.
No código: cubic-bezier(0.4, 0, 1, 1)
No Figma: Ease in
ease-in-out
Sai devagar, acelera no meio e freia no fim.
Mudança de forma que não pode arrancar de uma vez, como um botão quadrado que se abre em pílula.
Como pedir
O quadrado vira pílula com ease-in-out, em 300ms.
No código: cubic-bezier(0.4, 0, 0.2, 1)
No Figma: Ease in and out
linear
Velocidade constante do começo ao fim. Parece mecânico.
Só no que representa tempo passando: barra de progresso, spinner, brilho do skeleton.
Como pedir
A barra de progresso enche linear. O resto da tela continua em ease-out.
No código: transition-timing-function: linear;
No Figma: Linear
spring
Movimento que imita uma mola: chega, passa um pouco do ponto e volta. Em bibliotecas como a Motion, se ajusta por rigidez (stiffness), amortecimento (damping) e massa.
Em momento de marca (abertura, onboarding, celebração) e no pulinho de confirmação. Em tela de trabalho, cansa rápido.
Como pedir
O logo entra com mola, em 450ms.
No código: cubic-bezier(0.2, 0.9, 0.2, 1.2)
No Figma: Spring (Gentle, Quick, Bouncy)
overshoot / bounce
O elemento ultrapassa o destino e volta. É o que dá a cara de mola ou de quique.
Mesma regra da mola: momento de marca e confirmação.
Como pedir
Sem overshoot nesta lista, usa ease-out comum.
No código: cubic-bezier(0.2, 0.9, 0.2, 1.2)
No Figma: Ease out back
delay
Tempo de espera antes de o movimento começar.
O tooltip espera uns 300ms pra não piscar quando o mouse só está passando. Atraso também segura um loading que acabaria rápido demais.
Como pedir
O tooltip aparece depois de 300ms com o mouse em cima.
No código: transition-delay: 300ms;
No Figma: After delay
stagger
Vários itens fazem o mesmo movimento, um depois do outro, com um intervalo pequeno entre eles.
Lista ou grade que chega de uma vez. Intervalo curto (30 a 60ms) e no máximo uns 6 itens; o resto entra junto.
Como pedir
As linhas entram em stagger de 60ms: fade e sobem 8px, em 200ms.
No código: animation-delay: calc(var(--i) * 60ms);
Como algo aparece e some da tela. A regra que vale quase sempre: o que sai é mais rápido do que o que entra.
fade in / fade out
A opacidade vai de 0 a 1 (entrar) ou de 1 a 0 (sair). Nada se desloca.
Troca de conteúdo no mesmo lugar, fundo escuro atrás do modal, aviso que aparece.
Como pedir
O conteúdo entra com fade em 200ms.
No código: opacity: 0 → 1
No Figma: Dissolve
slide in
O elemento entra vindo de uma direção. Em interface, desloca pouco (8px) e junto com o fade.
Card, linha nova, toast. Deslocamento grande, vindo da borda da tela, só em gaveta.
Como pedir
Entra com fade e sobe 8px, em 200ms com ease-out.
No código: transform: translateY(8px) → none
No Figma: Move in
scale in
O elemento entra um pouco menor (94% a 96%) e cresce até o tamanho final, com fade.
Menu, popover, dropdown: tudo o que nasce de um botão. Sempre a partir da origem (ver Origem, lá embaixo).
Como pedir
O menu entra com scale in de 0,94 e fade, a partir do canto do botão.
No código: transform: scale(0.94) → scale(1)
pop
O elemento cresce um pouco além do tamanho (130%) e volta, num gesto rápido.
No ícone que confirma uma ação pequena: curtir, salvar nos favoritos. Uma vez, nunca em loop.
Como pedir
Ao salvar, o ícone dá um pop até 1,3 e volta, com mola.
No código: transform: scale(1) → scale(1.3) → scale(1)
reveal / wipe
O elemento aparece sendo descoberto por uma máscara que corre, em vez de esmaecer.
Abertura de marca, número de destaque, título de apresentação. Em tela de trabalho, prefira fade.
Como pedir
O título aparece com reveal da esquerda pra direita, em 300ms.
No código: clip-path: inset(0 100% 0 0) → inset(0)
asymmetric enter / exit
Entrar e sair não são o mesmo movimento ao contrário. Entra devagar e assenta; sai rápido e acelera.
Vale pra tudo que abre e fecha. Quem fecha já decidiu, então a saída não pode atrasar a pessoa.
Como pedir
Entra em 300ms com ease-out; sai em 100ms com ease-in.
No código: entrada 300ms ease-out · saída 100ms ease-in
O mesmo elemento virando outra coisa: trocar texto, crescer, abrir, reordenar.
crossfade
Um conteúdo esmaece enquanto o outro aparece, no mesmo lugar.
Rótulo que muda (Salvar vira Salvo), ícone que troca. Mudança de estado esmaece e volta, não pisca.
Como pedir
O texto do botão troca de Salvar pra Salvo com crossfade em 200ms.
No código: opacity nos dois conteúdos, empilhados no mesmo lugar
No Figma: Dissolve entre variantes
blur swap
Crossfade em que o conteúdo que sai desfoca e o que entra foca. Esconde o salto entre dois textos diferentes.
Status que muda dentro de uma caixa que cresce (ver Contêiner contínuo). Desfoque curto, uns 4px.
Como pedir
O conteúdo troca atrás de um desfoque curto de 4px, em 200ms.
No código: filter: blur(4px) + opacity
morph
A forma muda continuamente: raio, tamanho, cor, rotação. O olho entende que é o mesmo objeto.
Botão quadrado virando pílula, play virando pause. Mais que isso vira enfeite.
Como pedir
O quadrado faz morph pra círculo com ease-in-out, em 300ms.
No código: border-radius, background e transform: rotate() juntos
No Figma: Smart animate
container transform
Um elemento pequeno cresce e vira o elemento grande, sem corte. O conteúdo troca por dentro enquanto a caixa muda tamanho, raio e preenchimento.
A pílula de notificação que abre no painel, o card que abre no detalhe. Também aparece como shared element.
Como pedir
A pílula cresce até virar o card, sem cortar: muda tamanho, raio e fundo em 450ms, e o conteúdo troca atrás de um desfoque curto.
No código: View Transitions API, ou width, height e border-radius animados
No Figma: Smart animate
layout animation / FLIP
Quando um item sai, entra ou muda de lugar, os vizinhos deslizam pra nova posição em vez de pular.
Remover tag, reordenar lista, filtro que tira itens. Sem isso a tela pisca e a pessoa perde o lugar.
Como pedir
Ao remover a tag, as outras deslizam pro lugar com layout animation, em 300ms.
No código: técnica FLIP, ou a prop layout da biblioteca Motion
Endereço, forma de pagamento e prazo de entrega.
accordion / collapse
Uma seção abre e fecha mudando de altura, empurrando o que está embaixo.
Seção recolhível, grupo de filtros, detalhe de uma linha. A seta gira junto.
Como pedir
A seção recolhe com a altura animada em 200ms e a seta gira 90°.
No código: grid-template-rows: 0fr → 1fr
directional transition
O conteúdo novo entra pelo lado pra onde você foi. Avançar vem da direita; voltar, da esquerda.
Passos de um fluxo, abas em sequência, meses do calendário. Dá a sensação de lugar.
Como pedir
Ao avançar o passo, o atual sai pra esquerda e o próximo entra pela direita, 24px, em 200ms.
No código: transform: translateX(24px) → none
No Figma: Push
A resposta pequena a uma ação: passar o mouse, apertar, errar, esperar, confirmar.
hover
Resposta visual quando o ponteiro está sobre algo clicável.
Em tela de trabalho, o hover muda a cor de fundo em 100ms e para por aí. Levantar card e pôr sombra fica pra vitrine.
Como pedir
No hover, a linha muda de fundo em 100ms.
No código: transition: background-color 100ms;
No Figma: While hovering
press / tap feedback
O controle afunda um pouco (96%) enquanto está pressionado.
Botão principal, botão de ícone. Confirma que o clique pegou antes de a ação responder.
Como pedir
Ao pressionar, o botão encolhe pra 0,96 e escurece um tom, em 200ms.
No código: :active { transform: scale(0.96); }
No Figma: While pressing
shake / wiggle
O elemento balança de um lado pro outro, rápido.
Só em erro que bloqueia: senha errada, código inválido. Sempre com a mensagem escrita junto.
Como pedir
Senha errada: o campo treme uma vez (4px, 300ms) e a borda fica vermelha.
No código: @keyframes com translateX indo e voltando 4px
pulse
Um anel cresce e some em loop, calmo.
Só pra dizer que algo está vivo agora: ao vivo, gravando, a IA trabalhando. Nunca pra chamar atenção pra algo parado.
Como pedir
O ponto de ao vivo pulsa em loop a cada 2,4s.
No código: animation: pulso 2.4s infinite;
skeleton / shimmer
Blocos cinza no formato do conteúdo, com um brilho que passa, enquanto o dado carrega.
Quando já se sabe a forma do que vem: lista, card, tabela. Evita a tela pular quando o dado chega.
Como pedir
Enquanto carrega, mostra skeleton no formato das linhas, com shimmer em loop.
No código: background-position animado em loop, linear
spinner / loader
Um anel que gira em velocidade constante.
Ação curta sem forma conhecida, como botão processando. Só aparece se a espera passar de uns 600ms, pra não piscar.
Como pedir
O botão só mostra spinner se a ação passar de 600ms.
No código: animation: girar 600ms linear infinite;
line drawing / stroke draw
Uma linha aparece como se fosse desenhada, do começo ao fim do traço.
Check de sucesso no fim de um fluxo importante: pagamento aprovado, envio concluído.
Como pedir
No sucesso, o check é desenhado (line drawing) em 300ms.
No código: stroke-dashoffset do tamanho do traço até 0
number ticker / count up
O número sobe do valor anterior até o novo, rolando os dígitos.
Número de destaque que muda na frente da pessoa. Use números tabulares, senão o texto treme de largura.
Como pedir
O total sobe com number ticker em 600ms, com números tabulares.
No código: font-variant-numeric: tabular-nums;
toggle / switch
A bolinha desliza de um lado pro outro e o fundo muda de cor.
Liga e desliga com efeito imediato. Mesma duração pra ir e pra voltar.
Como pedir
A bolinha desliza em 200ms e o fundo troca de cor junto.
No código: transform: translateX(20px) com transition
No Figma: Smart animate entre variantes
ripple
Um círculo se espalha a partir do ponto do clique. É a assinatura do Material Design.
Fora de um produto em Material, parece emprestado. O clique responde bem só com Pressionar.
Como pedir
Sem ripple, usa o press.
hold to confirm / slide to confirm
A ação só acontece depois de segurar ou arrastar até o fim, e o preenchimento mostra quanto falta.
Ação que não tem volta ou que não pode sair por engano: excluir conta, apagar um lote.
Como pedir
Excluir a conta pede hold to confirm, e a barra enche linear enquanto a pessoa segura.
No código: transform: scaleX(0) → scaleX(1), linear
Palavras que não são um efeito, mas mudam como o efeito é feito.
transform origin
O ponto de onde o elemento cresce, encolhe ou gira.
O menu cresce do canto do botão que abriu ele, não do centro. É isso que faz parecer que saiu dali.
Como pedir
O menu cresce a partir do canto do botão (transform-origin top left).
No código: transform-origin: top left;
orchestration / choreography
A ordem e o encaixe de vários movimentos que acontecem juntos.
Modal: o fundo escurece, o painel sobe logo depois e o conteúdo entra por último. Tudo em menos de meio segundo.
Como pedir
Ao abrir, o fundo entra com fade; o painel sobe 8px com 100ms de atraso; o conteúdo entra em stagger.
No código: transition-delay diferente em cada parte
Passe o mouse e saia no meio do caminho
interruptible
O movimento pode mudar de rumo no meio, sem esperar terminar e sem pular.
Hover, gaveta, acordeão: se a pessoa desiste no meio, a animação volta dali. Em CSS, transition faz isso sozinha; keyframes não.
Como pedir
Faz com transition, não com keyframes, pra ser interrompível.
No código: transition (e não @keyframes)
prefers-reduced-motion
Configuração do sistema pra quem passa mal ou se distrai com movimento.
Com ela ligada, a animação vira troca direta. Tempo de leitura e espera continuam, só o movimento sai.
Como pedir
Respeita prefers-reduced-motion: com a opção ligada, as durações vão a zero.
No código: @media (prefers-reduced-motion: reduce)
anticipation
Um recuo pequeno antes do movimento principal, como quem toma impulso. É um dos 12 princípios da animação da Disney.
Atrasa a resposta, e em interface resposta atrasada parece travada. Funciona em vídeo e abertura de marca.
Como pedir
Sem antecipação, o movimento começa direto.
follow-through / overlapping action
Partes do mesmo objeto chegam em tempos diferentes: o corpo para e um detalhe ainda assenta depois.
Com parcimônia: o card chega e o selo de contagem aparece logo depois. Mais que isso, parece desenho animado.
Como pedir
O card entra e o selo aparece logo depois, com pop.
No código: o mesmo movimento, com delay no detalhe
squash & stretch
O objeto se deforma com o movimento: estica na queda, achata no impacto.
Linguagem de desenho animado. Combina com jogo e mascote, não com ferramenta de trabalho.
Como pedir
(não é coisa de pedir pra interface)
jank / dropped frames
A animação trava ou pula quadros. Quase sempre porque anima uma propriedade que obriga o navegador a recalcular o layout (largura, altura, top, left).
Anime transform e opacity sempre que der. São as que o navegador move sem recalcular a página.
Como pedir
Anima só transform e opacity pra não ter jank.
No código: transform e opacity, nada de width, height, top e left
Vocabulário de motion graphics. Vale pra vídeo de produto, abertura e apresentação, e quase nunca pra tela de produto.
harness
Tudo o que vai junto com o pedido: regras, guia de estilo, material da marca, referências, a lista do que não fazer.
Em vídeo, o pedido é uns 10% do resultado, e o harness é o resto. Num projeto com design system, o próprio design system já faz boa parte desse papel.
Como pedir
Antes de começar, lê o guia de estilo e a lista de proibidos desta pasta.
| tempo | o que acontece |
|---|---|
| 0,0s | pílula “3 notificações” |
| 0,5s | cresce até o card |
| 1,0s | linhas entram em stagger |
| 2,0s | check desenhado |
beat grid / shot list
Tabela que diz o que acontece em cada momento do vídeo, antes de escrever código. Pode seguir a batida da trilha (120 BPM, por exemplo).
Aprove a grade antes de renderizar. É o storyboard de quem trabalha em código.
Como pedir
Antes do código, me mostra a lista de estados no beat grid.
cut vs. continuous
Corte troca a cena de uma vez; continuidade transforma o mesmo elemento até ele virar a próxima cena.
Em filme de produto, a regra de que um contêiner nunca corta deixa tudo mais fácil de acompanhar.
Como pedir
Sem cortes: cada estado é o mesmo elemento mudando tamanho, raio e preenchimento.
kinetic typography
Texto que se move como parte da mensagem: as palavras entram no ritmo da fala ou da trilha.
Vídeo de lançamento e abertura. Em tela de produto, texto não dança.
Como pedir
As palavras entram uma a uma no tempo da narração, com a última em destaque.
style reference
Usar um vídeo de referência pra copiar o jeito (ritmo, transições, tipo, paleta), nunca o conteúdo.
Peça pra IA montar um guia de estilo em markdown a partir da referência e use esse guia nos pedidos seguintes.
Como pedir
Extrai da referência a paleta, o tipo, a duração das cenas, os tipos de transição e como o texto entra e sai. Usa a gramática, nunca o conteúdo nem a marca.
critique loop
A IA revê o próprio resultado, aponta o que destoa do guia e refaz, antes de entregar.
Funciona porque o vídeo é código: dá pra corrigir um quadro sem refazer tudo.
Como pedir
Antes de entregar, revê os quadros contra o guia, lista o que destoa e corrige.
Vídeo, apresentação e abertura de marca
Em micro-interação, uma frase bem montada basta. Em vídeo de produto ou abertura, quem trabalha com IA nesse tipo de peça repete a mesma lição: o pedido é 10% do resultado, e o resto é o que você entrega junto. A IA não gera o vídeo, ela escreve o código que desenha cada quadro (Remotion, HyperFrames ou HTML puro gravado no navegador).
1Material real
Logo, cores, fontes e prints de tela de verdade. Sem isso, a IA inventa uma interface e cai no visual genérico: texto centralizado em cima de gradiente.
2Referência com regra
Mande um vídeo de referência e peça um guia de estilo dele: paleta, tipo, duração das cenas, tipos de transição, como o texto entra e sai. Pegue a gramática da referência, nunca o conteúdo, a marca ou os personagens.
3Direção em uma frase
Algo do tipo “filme de produto”: um contêiner nunca corta, e cada estado é o mesmo elemento mudando tamanho, raio e preenchimento enquanto o conteúdo troca atrás de um desfoque curto.
4Plano antes do código
Peça a lista de estados num beat grid (tempo × o que acontece) e aprove a tabela antes de renderizar. Corrigir a tabela é barato; corrigir o vídeo, não.
5Lista do que não fazer
O que a IA não pode usar: gradiente genérico, texto centralizado, efeito em cima de efeito. Fica num arquivo, pra valer em todo pedido.
6Ciclo de crítica
Peça que a IA assista ao próprio resultado quadro a quadro, aponte o que destoa do guia e refaça. Como tudo é código, dá pra corrigir um quadro sem refazer o vídeo.
De onde veio