Animações web ao vivo. Prompts prontos para colar.

O elemento começa reduzido e deslocado, depois desliza para dentro e cresce até o tamanho total.

Adicione uma animação de entrada "Back In" (também chamada back in up ou back in down) em [onde].
O elemento deve chegar de fora de uma borda, reduzido e levemente transparente, e crescer até o tamanho total ao alcançar seu lugar: um movimento deliberado em duas etapas, não um surgimento rápido.
Reproduza só uma vez e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento encolhe e desliza em direção a uma borda enquanto desaparece.

Adicione uma animação de saída "Back Out" em [onde].
O elemento deve primeiro encolher um pouco no lugar e depois deslizar em direção a uma borda enquanto desaparece: uma saída deliberada em duas etapas, não um único fade rápido.
Remova o elemento só depois que a animação terminar, para o layout não pular no meio do movimento, e remova na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento começa bem desfocado e vai ganhando nitidez, muitas vezes enquanto desliza ou aparece.

Adicione uma animação de entrada "Blur In" (também chamada text focus in, focus in ou blur text reveal) em [onde].
O conteúdo deve começar bem desfocado e transparente e depois ganhar nitidez no lugar: suave e um tanto lento, sem deslocamento.
Reproduza só uma vez e mostre o texto nítido imediatamente se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento fica cada vez mais desfocado enquanto desaparece ou desliza para fora.

Adicione uma animação de saída "Blur Out" (também chamada text blur out ou smoky text dissipate) em [onde].
O conteúdo deve ficar cada vez mais desfocado enquanto desaparece no lugar: suave e um tanto lento, como se estivesse se dissolvendo.
Oculte ou remova o elemento só depois que o desfoque terminar, e oculte na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento entra com um quique que passa do ponto e se acomoda, crescendo ou caindo a partir de uma borda.

Adicione uma animação de entrada "Bounce In" (também chamada bounce in down ou bounce in up) em [onde].
O elemento deve crescer a partir de pequeno, passar do tamanho total e balançar algumas vezes antes de se acomodar: rápido e elástico.
Reproduza só uma vez para não ficar chamando atenção, e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento quica de leve e depois encolhe ou sai voando por uma borda.

Adicione uma animação de saída "Bounce Out" em [onde].
O elemento deve afundar um pouco, inchar um pouco além do seu tamanho e depois encolher enquanto desaparece: curto e elástico.
Tire-o do layout só depois que a animação terminar, e oculte na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um clip-path ou máscara cresce a partir de uma borda ou ponto e vai revelando a imagem ou o texto.

Adicione um efeito de entrada "Clip Reveal" (também chamado mask reveal, wipe reveal ou image reveal) em [onde].
Uma borda de recorte deve varrer da esquerda para a direita, revelando o conteúdo aos poucos enquanto ele fica parado: fluido, com início e fim suaves.
Reserve o espaço do elemento desde o início para nada se deslocar, e mostre tudo revelado se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento passa de totalmente transparente a totalmente opaco no lugar, ou o contrário ao sair.

Adicione uma animação "Fade In / Fade Out" (também chamada fade) em [onde].
O elemento deve passar de totalmente transparente a totalmente visível no lugar ao aparecer, e sumir da mesma forma ao sair: suave, sem deslocamento nem mudança de escala.
Depois que ele sumir, garanta que não possa mais ser clicado nem alcançado pelo teclado, e troque na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento aparece enquanto se desloca um pouco a partir de um lado até a posição final.

Adicione uma animação de entrada "Fade In Directional" (também chamada fade in left, fade in right ou fade in down) em [onde].
O elemento deve aparecer enquanto se desloca um pouco a partir de um lado até a posição final: rápido e fluido, desacelerando ao chegar, sem quique.
Reproduza só uma vez e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento desaparece enquanto se desloca em uma direção.

Adicione uma animação de saída "Fade Out Directional" (também chamada fade out up ou fade out down) em [onde].
O elemento deve desaparecer enquanto se desloca um pouco em uma direção: rápido, acelerando ao sair.
Tire-o do layout só depois que o fade terminar, para o conteúdo vizinho não pular antes da hora, e oculte na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento sobe um pouco enquanto aparece, como se estivesse se encaixando no lugar.

Adicione uma animação de entrada "Fade Up" (também chamada fade-in-up ou reveal on scroll) em [onde].
Os elementos devem subir levemente enquanto aparecem, na primeira vez que entram na tela ao rolar: sutil e rápido, sem efeito de quique.
Reproduza só uma vez e não anime se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento acende com piscadas rápidas de opacidade, como um letreiro de neon com defeito, antes de ficar visível.

Adicione uma animação de entrada "Flicker In" em [onde].
O elemento deve acender e apagar algumas vezes em intervalos irregulares, como um letreiro de neon com defeito, antes de ficar aceso: piscadas secas, sem deslocamento.
Reproduza só uma vez, com poucas piscadas e lentas o bastante para serem seguras para pessoas sensíveis a luz piscante, e mostre aceso de forma fixa se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento dá uma volta completa no eixo Y enquanto se aproxima um pouco de quem vê e volta.

Adicione uma animação "Flip" em [onde].
O elemento deve dar uma volta completa no seu eixo vertical enquanto se aproxima um pouco de quem vê, e depois voltar com uma leve diminuição de tamanho: animado, mas breve.
Dê perspectiva para o giro parecer ter profundidade, reproduza só uma vez em vez de em loop, e pule o giro se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento gira em 3D no eixo horizontal ou vertical, de lado até ficar de frente para quem vê.

Adicione uma animação de entrada "Flip In" (também chamada flip in X ou flip in Y) em [onde].
O elemento deve começar de lado e girar no eixo horizontal até ficar de frente, passando um pouco do ponto e voltando antes de se acomodar: rápido, com uma pequena oscilação.
Dê perspectiva para o giro parecer ter profundidade, e mostre de frente sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento gira em 3D até ficar de lado e invisível.

Adicione uma animação de saída "Flip Out" (também chamada flip out X ou flip out Y) em [onde].
O elemento deve se inclinar um pouco para trás e depois girar no eixo vertical até ficar de lado e sumir: rápido e preciso.
Dê perspectiva para o giro parecer ter profundidade, remova o elemento só depois que o giro terminar, e oculte na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento gira em uma dobradiça no canto superior esquerdo, balança e depois cai para fora da tela.

Adicione uma animação de saída "Hinge" em [onde].
O elemento deve despencar a partir do canto superior esquerdo como se um parafuso tivesse se soltado, balançar para lá e para cá e depois cair para fora da tela enquanto desaparece: lento, cômico e deliberado.
Deixe-o cair por cima do resto do conteúdo sem empurrar o layout nem criar barras de rolagem, remova depois que ele cair, e oculte na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento salta de um estado pequeno e inclinado, passa do ponto e se acomoda como um boneco de mola saindo da caixa.

Adicione uma animação de entrada "Jack In The Box" em [onde].
O elemento deve saltar de um estado minúsculo e inclinado, ancorado na borda inferior, balançar de um lado para o outro passando da vertical e se acomodar: elástico e divertido.
Reproduza só uma vez e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento entra disparado pela lateral, inclinado, e se endireita ao chegar.

Adicione uma animação de entrada "Light Speed In" (também chamada lightspeed in) em [onde].
O elemento deve entrar rápido pela lateral, inclinado como se estivesse em alta velocidade, corrigir demais a inclinação uma vez e se endireitar ao chegar: rápido e marcante, desacelerando no fim.
Evite que ele gere uma barra de rolagem horizontal enquanto ainda está fora da tela e mostre-o no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento se inclina e sai em disparada para o lado enquanto desaparece.

Adicione uma animação de saída "Light Speed Out" (também chamada lightspeed out) em [onde].
O elemento deve se inclinar e sair em disparada para o lado enquanto desaparece: rápido, acelerando ao sair.
Evite que ele gere uma barra de rolagem horizontal ao passar pela borda e esconda-o na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento encolhe de um estado grande, desfocado e transparente até ficar nítido, como uma baforada de fumaça, ou o contrário ao sair.

Adicione uma animação "Puff In / Puff Out" (também chamada puff) em [onde].
Ao aparecer, o elemento deve encolher de um estado grande, desfocado e transparente até ficar nítido, como uma baforada de fumaça que se assenta; ao sair, deve inchar de novo em um desfoque e sumir: suave e bem rápido.
Evite que o estado ampliado empurre o layout ou gere barras de rolagem e troque na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento entra rolando pela esquerda como uma roda enquanto aparece.

Adicione uma animação de entrada "Roll In" em [onde].
O elemento deve entrar rolando pela esquerda como uma roda, girando enquanto se move, e aparecer ao mesmo tempo: suave, desacelerando ao chegar.
Reproduza só uma vez e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento sai rolando para a direita enquanto desaparece.

Adicione uma animação de saída "Roll Out" em [onde].
O elemento deve sair rolando para a direita como uma roda, girando enquanto se move, e desaparecer ao mesmo tempo: suave, acelerando ao sair.
Tire-o do layout só depois que ele terminar de rolar e esconda-o na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento entra girando em torno de um canto ou do próprio centro enquanto aparece.

Adicione uma animação de entrada "Rotate In" (também chamada rotate in down left) em [onde].
O elemento deve girar até o lugar em torno do canto inferior esquerdo, partindo de um ângulo inclinado, enquanto aparece: suave e sem pressa, desacelerando ao se assentar.
Reproduza só uma vez e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento gira em torno de um ponto de apoio enquanto desaparece.

Adicione uma animação de saída "Rotate Out" em [onde].
O elemento deve girar em torno do centro, um pouco mais de meia volta, enquanto desaparece: suave, acelerando ao sair.
Remova-o só depois que o giro terminar e esconda-o na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento desliza de fora da borda do contêiner até a posição de repouso, sem esmaecer.

Adicione uma animação de entrada "Slide In" (também chamada slide in left, slide in right, slide in up ou slide in down) em [onde].
O elemento deve deslizar de fora da borda do contêiner até o lugar, totalmente opaco o tempo todo: rápido, desacelerando suavemente e sem quique.
Corte-o na borda do contêiner para que não sobreponha os vizinhos nem gere barras de rolagem enquanto está fora e mostre-o no lugar se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento desliza para além da borda de um contêiner e desaparece.

Adicione uma animação de saída "Slide Out" (também chamada slide out up ou slide out down) em [onde].
O elemento deve deslizar para além da borda do contêiner e desaparecer, continuando totalmente opaco: rápido, acelerando ao sair.
Corte-o na borda do contêiner, esconda-o do teclado e dos leitores de tela quando sair de vista e esconda-o na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

Os itens de um grupo se animam um após o outro com um pequeno atraso, formando uma onda em vez de aparecerem todos de uma vez.

Adicione uma animação "Stagger" (também chamada staggered animation ou cascata) em [onde].
Os itens devem aparecer subindo um após o outro com um atraso curto e uniforme, para que o grupo pareça uma onda rápida e não tudo de uma vez.
Mantenha a sequência curta mesmo em listas longas, reproduza só uma vez ao entrar na tela e não anime se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento gira e cresce a partir de um ponto enquanto aparece.

Adicione uma animação de entrada "Swirl In" (também chamada swirl in forward) em [onde].
O elemento deve girar bem mais de uma volta completa enquanto cresce de um único ponto até o tamanho total e aparece: rápido no início, desacelerando ao se assentar.
Reproduza só uma vez em um único elemento, não em um grupo inteiro, e mostre-o no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

As letras começam bem espaçadas e apagadas e se aproximam até o espaçamento normal enquanto aparecem.

Adicione uma animação de texto "Tracking In" (também chamada text tracking in ou letter-spacing in) em [onde].
As letras devem começar bem espaçadas e apagadas e se aproximar até o espaçamento normal enquanto ficam totalmente visíveis: suave, desacelerando no fim.
Mantenha o texto centralizado e em uma única linha enquanto o espaçamento muda, para o layout ao redor não se mexer, e mostre-o com espaçamento normal se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento cresce de um estado pequeno e transparente até o tamanho total enquanto aparece.

Adicione uma animação de entrada "Zoom In" (também chamada scale in) em [onde].
O elemento deve crescer de pequeno e transparente até o tamanho total enquanto aparece: rápido e suave, sem passar do tamanho final.
Escale-o a partir do centro sem afetar o layout ao redor e mostre-o no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento encolhe e esmaece até sumir.

Adicione uma animação de saída "Zoom Out" (também chamada scale out) em [onde].
O elemento deve encolher em direção ao centro enquanto esmaece até sumir: rápido, acelerando ao sair.
Tire-o do layout e do foco do teclado só depois que ele sumir e esconda-o na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento pula para cima e para baixo em quiques que vão perdendo força.

Adicione um efeito de atenção "Bounce" em [onde].
O elemento deve pular e cair de volta em alguns quiques rápidos, cada vez menores, com um leve achatamento ao aterrissar.
Reproduza só uma vez quando acionado, em vez de em loop, e não aplique para usuários que preferem movimento reduzido.

O elemento pisca alternando rapidamente a opacidade.

Adicione um efeito de atenção "Flash" (também chamado blink) em [onde].
O elemento deve piscar sumindo e reaparecendo rapidamente duas vezes e depois ficar totalmente visível.
Reproduza só uma vez, em vez de piscar sem parar, e não aplique para usuários que preferem movimento reduzido, pois piscadas rápidas podem incomodar.

A opacidade do elemento oscila de forma irregular, como uma luz falhando.

Adicione um efeito "Flicker" (também chamado flickering) em [onde].
O elemento deve ficar estável na maior parte do tempo e escurecer em falhas curtas e irregulares, como um neon com defeito.
Mantenha o ritmo irregular em vez de uniforme, evite piscadas rápidas em intensidade máxima e pare o efeito para usuários que preferem movimento reduzido.

O elemento balança de um lado para o outro com uma leve rotação, como uma cabeça dizendo não.

Adicione um efeito de atenção "Head Shake" (também chamado headshake ou no shake) em [onde].
O elemento deve virar rápido de um lado para o outro com uma leve torção, como uma cabeça dizendo não, cada virada menor que a anterior até parar.
Reproduza uma vez a cada acionamento, por exemplo em uma ação recusada, e não deixe o layout ao redor se mover.

O elemento muda de escala em um ritmo de batida dupla, como um coração batendo.

Adicione um efeito "Heartbeat" (também chamado heart beat) em [onde].
O elemento deve inchar e relaxar em uma batida dupla rápida e depois descansar um instante antes da próxima, como um coração batendo.
Repita em loop contínuo mantendo a pausa entre as batidas, e pare se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento se inclina de um lado para o outro com amplitude cada vez menor, como uma gelatina balançando.

Adicione um efeito de atenção "Jello" (também chamado jelly) em [onde].
O elemento deve se inclinar de um lado para o outro como uma gelatina balançando: forte no início e parando rapidamente.
Reproduza uma vez ao ser acionado e mantenha o espaço ocupado pelo elemento para que o conteúdo próximo não se desloque.

Uma cópia do elemento cresce e desaparece repetidamente, como uma onda de radar.

Adicione um efeito "Ping" (também chamado radar ping ou pulse ring) em [onde].
Uma cópia do elemento deve crescer para fora e desaparecer, de novo e de novo em ritmo constante, enquanto o próprio elemento fica parado.
Desenhe o anel em uma camada separada para que ele nunca altere o layout, e pare o loop se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento aumenta ou esmaece suavemente, de forma repetida.

Adicione um efeito "Pulse" (também chamado pulsing) em [onde].
O elemento deve crescer suavemente e voltar em um ritmo lento e constante: sutil, sem efeito de quique.
Repita em loop contínuo sem deslocar o layout ao redor, e pare se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento se estica na horizontal e se achata na vertical em etapas elásticas antes de voltar ao normal.

Adicione um efeito de atenção "Rubber Band" (também chamado rubberband) em [onde].
O elemento deve se esticar na largura e se achatar na altura, depois voltar em alguns passos elásticos menores até parar no tamanho normal.
Reproduza uma vez ao ser acionado e não deixe o layout ao redor se deslocar enquanto ele estica.

O elemento treme rapidamente para frente e para trás em um único eixo.

Adicione um efeito "Shake" (também chamado error shake ou invalid input shake) em [onde].
O elemento deve tremer rápido para a esquerda e para a direita algumas vezes e parar exatamente onde começou: rápido e firme.
Reproduza uma vez sempre que o erro acontecer, em vez de repetir em loop, e combine com uma mensagem de erro visível para que o significado não dependa só do movimento.

O elemento gira continuamente em velocidade constante.

Adicione um efeito "Spin" (também chamado spinner ou rotate loop) em [onde].
O elemento deve girar continuamente em uma velocidade constante e uniforme, sem easing entre as voltas.
Deixe o loop contínuo, dê ao spinner um rótulo de carregamento acessível, e desacelere ou pare se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento balança de um lado para o outro a partir da borda superior, como um pêndulo com amplitude cada vez menor.

Adicione um efeito de atenção "Swing" em [onde].
O elemento deve balançar de um lado para o outro como uma placa pendurada, começando com um balanço amplo que diminui rápido.
Faça o elemento girar a partir da borda superior, e não do centro, e reproduza uma vez ao ser acionado.

O elemento cresce, balança com rotação e volta ao tamanho original, como uma pequena comemoração.

Adicione um efeito de atenção "Tada" em [onde].
O elemento deve diminuir um pouco, depois crescer e balançar de um lado para o outro com uma inclinação rápida antes de voltar ao tamanho normal, como uma pequena comemoração.
Reproduza uma vez, por exemplo logo após um sucesso, e não anime se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento treme rapidamente em pequenos solavancos em várias direções, como um celular vibrando.

Adicione um efeito de atenção "Vibrate" (também chamado buzz ou vibration) em [onde].
O elemento deve tremer em solavancos minúsculos e rápidos em várias direções por um breve momento, como um celular vibrando, e depois parar.
Mantenha o movimento bem pequeno para que o conteúdo continue legível, e reproduza uma vez por alerta em vez de repetir em loop.

O elemento balança de um lado para o outro inclinando-se, como um objeto instável.

Adicione um efeito de atenção "Wobble" em [onde].
O elemento deve balançar de um lado para o outro inclinando-se, começando com um balanço grande que diminui a cada ida e volta até parar.
Reproduza uma vez ao ser acionado e não deixe o conteúdo vizinho se deslocar.

Um cabeçalho se esconde ao rolar para baixo e reaparece ao rolar para cima.

Adicione um "Hide on Scroll Header" (também chamado headroom ou auto-hide navbar) em [onde].
O cabeçalho deve deslizar para cima e sair de vista quando o leitor rolar para baixo, e voltar a qualquer rolagem para cima: rápido e suave, reagindo à direção e não à distância.
Mostre sempre no topo da página, ignore pequenas oscilações de rolagem, e mantenha visível enquanto algo dentro dele tiver o foco do teclado.

A rolagem vertical move para o lado uma fileira de painéis fixada na tela.

Adicione uma seção de rolagem horizontal (Horizontal Scroll Section) em [onde], também chamada horizontal scrolling ou scroll-jacked horizontal gallery.
Quando a seção chegar ao topo, ela deve ficar fixa enquanto a rolagem para baixo move sua fileira de painéis para o lado, e se soltar quando o último painel estiver visível.
Vincule o movimento lateral diretamente à posição de rolagem para que rolar de volta o inverta, e use uma fileira normal deslizável em telas pequenas ou se o usuário preferir movimento reduzido (prefers-reduced-motion).

Camadas se movem em velocidades diferentes conforme a rolagem, criando sensação de profundidade.

Adicione um efeito de rolagem "Parallax" (também chamado parallax scrolling ou parallax layers) em [onde].
As camadas de fundo devem se mover mais devagar que o conteúdo ao rolar a página, com a camada mais distante se movendo menos, para uma sensação sutil de profundidade.
Mantenha o efeito ligado à posição de rolagem sem atraso, deixe o texto na camada de velocidade normal, e desative o efeito se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um elemento fica travado no lugar durante um trecho da rolagem enquanto o restante do conteúdo ou a animação avança.

Adicione um efeito de rolagem "Pinning" (também chamado pinned section ou sticky section) em [onde].
Um painel deve ficar travado no lugar enquanto o conteúdo ao lado passa com a rolagem, mudando de acordo com a etapa que está sendo lida, e deve se soltar quando a seção terminar.
Prefira o posicionamento sticky nativo em vez de sequestrar a rolagem, e garanta que cada etapa continue legível sem o painel fixo em telas pequenas.

Uma barra ou um anel se preenche conforme o usuário rola a página ou o artigo.

Adicione um "Scroll Progress Indicator" (também chamado de reading progress bar) em [onde].
Uma barra fina no topo deve se preencher da esquerda para a direita conforme o leitor rola, chegando à largura total no final.
Ligue-a diretamente à posição de rolagem, sem atraso de suavização, e não deixe que ela cubra o conteúdo.

A rolagem se encaixa em pontos definidos, como slides ou seções.

Adicione "Scroll Snap" (também chamado de scroll snapping ou snap scrolling) em [onde].
Quando a rolagem parar, a tela deve se encaixar certinho na seção mais próxima, para que cada uma fique alinhada à borda em vez de parar no meio.
Use o encaixe nativo do navegador para que a rolagem por roda do mouse, toque e teclado continue funcionando, e garanta que conteúdos mais altos que a tela possam ser lidos por inteiro.

O progresso da animação fica ligado diretamente à posição de rolagem, então rolar para a frente ou para trás a reproduz ou a rebobina.

Adicione uma "Scroll-Linked Animation" (também chamada de scroll-driven animation ou scroll scrub) em [onde].
A animação deve acompanhar exatamente a posição de rolagem: rolar para baixo a faz avançar e rolar para cima a rebobina na hora, sem easing próprio baseado em tempo.
Mapeie a animação inteira para um trecho de rolagem bem definido e mostre um estado estático adequado se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma animação é reproduzida uma vez quando um elemento entra ou sai da viewport.

Adicione uma "Scroll-Triggered Animation" (também chamada de reveal on scroll ou animate on scroll) em [onde].
Cada item deve aparecer com fade e subir até o lugar uma única vez ao entrar na tela, no próprio ritmo rápido e suave, em vez de acompanhar a posição de rolagem.
Mantenha o conteúdo visível se os scripts não carregarem e mostre os itens na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

A rolagem e os saltos para âncoras deslizam com suavização em vez de se moverem de forma brusca.

Adicione uma rolagem suave (Smooth Scroll, também chamada de smooth scrolling ou inertia scroll) em [onde].
A rolagem e os saltos para âncoras devem deslizar e desacelerar suavemente em vez de andar aos trancos, com sensação leve e responsiva, sem atraso pesado.
Mantenha o comportamento nativo, como rolagem pelo teclado, barra de rolagem e busca na página, e desligue a suavização se o usuário preferir movimento reduzido (prefers-reduced-motion).

Os cards ficam fixos no topo durante a rolagem e se empilham uns sobre os outros, muitas vezes encolhendo os anteriores.

Adicione "Stacking Cards" (também chamados de sticky stacking cards ou card stack scroll) em [onde].
Conforme o leitor rola, cada card deve ficar fixo perto do topo e o próximo deve subir por cima dele, enquanto os de baixo encolhem um pouco, formando uma pilha organizada.
Deixe aparecer uma borda fina de cada card anterior e dê ao último espaço suficiente para chegar à sua posição antes do fim da seção.

Um cabeçalho fixo diminui de altura ou tamanho depois que o usuário rola para baixo.

Adicione um "Sticky Header Shrink" (também chamado de shrinking header ou shrink on scroll) em [onde].
O cabeçalho deve ficar no topo e, assim que o leitor rolar um pouco, encolher suavemente para uma barra mais fina com um logo menor, voltando a crescer quando ele retornar ao topo.
Não deixe o conteúdo abaixo pular enquanto o cabeçalho muda de tamanho.

Grandes linhas de texto deslizam na horizontal enquanto a página rola na vertical.

Adicione um "Text Marquee on Scroll" (também chamado de scroll text marquee ou scroll velocity text) em [onde].
Grandes linhas de texto devem deslizar para o lado conforme a página rola para baixo, com linhas alternadas em direções opostas, e voltar ao rolar para cima.
Ligue o movimento à posição de rolagem, não deixe as linhas longas criarem uma barra de rolagem horizontal e mantenha-as paradas se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um elemento ou uma cena aumenta ou diminui conforme o usuário rola a página.

Adicione um efeito "Zoom on Scroll" (também chamado de scroll zoom ou scale on scroll) em [onde].
Enquanto a seção fica presa na tela, o elemento deve crescer suavemente de um card pequeno até ocupar a tela inteira, no ritmo da rolagem, e encolher de novo ao rolar para cima.
Faça a escala sem empurrar o layout ao redor e mostre-o no tamanho final, sem zoom, se o usuário preferir movimento reduzido (prefers-reduced-motion).

Texto preenchido com um degradê cujas cores mudam ou fluem sem parar.

Adicione um efeito "Animated Gradient Text" (também chamado de aurora text ou rainbow text sweep) em [onde].
As letras devem ser preenchidas com um degradê cujas cores fluem devagar e suavemente pelo texto, em um loop infinito e contínuo.
Mantenha o texto legível sobre o fundo o tempo todo e deixe as cores paradas se o usuário preferir movimento reduzido (prefers-reduced-motion).

O texto treme com fatias deslocadas e separações de cor vermelha e ciano, como um sinal com defeito.

Adicione um efeito de hover "Glitch Text" (também chamado de text glitch ou RGB split glitch) em [onde].
Enquanto o ponteiro estiver sobre o texto, ele deve tremer em rajadas rápidas e secas: fatias horizontais finas pulam para o lado e duas cópias coloridas se separam como um sinal com defeito, voltando ao normal quando o ponteiro sai.
Mantenha o texto real só uma vez no documento para que leitores de tela não leiam as cópias, e mostre o mesmo efeito no foco do teclado.

O texto exibe reflexos iridescentes de papel holográfico que se movem com o ponteiro ou com o tempo.

Adicione um efeito de hover "Holographic Text" (também chamado de holographic foil text) em [onde].
Enquanto o ponteiro estiver sobre o texto, uma faixa de cores com cara de papel holográfico deve deslizar devagar e suavemente de um lado para o outro sobre as letras, e o texto deve voltar ao visual normal quando o ponteiro sair.
Mantenha as letras legíveis em todo momento do brilho e mostre o mesmo efeito no foco do teclado.

O texto muda de escala, se move ou gira como um elemento gráfico em movimento, em vez de ficar estático.

Adicione "Kinetic Typography" (também chamada de kinetic text) em [onde].
Linhas de texto grande e repetido devem deslizar para os lados em direções alternadas, em ritmo lento e constante, transformando as palavras em um gráfico em movimento.
Faça cada linha repetir sem saltos visíveis, garanta que leitores de tela leiam o texto só uma vez e pare o movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

As letras se espalham no hover e voltam, ou explodem para fora na entrada.

Adicione um efeito de hover "Letter Scatter" (também chamado de scatter gather letters ou explosive letter burst) em [onde].
Quando o ponteiro passar sobre o texto, cada letra deve voar um pouco na própria direção com um leve giro e depois se reagrupar suavemente na palavra quando o ponteiro sair.
Mantenha fixo o espaço da palavra no layout enquanto as letras se movem, faça os leitores de tela lerem como uma só palavra e mostre o mesmo efeito no foco do teclado.

Uma sombra listrada ou deslocada atrás das letras se anima em uma direção.

Adicione um efeito "Line Shadow Text" (também chamado de text shadow animation ou dancing shadow) em [onde].
Atrás das letras, uma sombra deslocada feita de listras diagonais finas deve deslizar devagar e sem parar, enquanto as próprias letras ficam paradas e nítidas.
Faça o movimento das listras repetir sem emendas e deixe a sombra parada se o usuário preferir movimento reduzido (prefers-reduced-motion).

As letras se enchem de um líquido que sobe e ondula.

Adicione um efeito "Liquid Fill Text" (também chamado de water fill text) em [onde].
As letras contornadas devem se encher de um líquido cuja superfície ondulada rola para o lado enquanto o nível sobe e desce devagar, em um loop suave e contínuo.
Mantenha a palavra disponível como texto real para leitores de tela e deixe o líquido em um nível parado se o usuário preferir movimento reduzido (prefers-reduced-motion).

O texto sobe de trás de uma linha de recorte, como se surgisse do nada.

Adicione uma entrada de texto "Mask Reveal" (também chamada line mask reveal ou text masking) em [onde].
Cada linha deve subir de trás de uma borda invisível, como se surgisse do nada, uma após a outra, rápida e suave, sem quique.
Reproduza só uma vez quando o texto entrar na tela ao rolar e mostre o texto direto, sem movimento, se o usuário preferir movimento reduzido (prefers-reduced-motion).

Caracteres verdes caem em colunas, como a chuva de código de Matrix.

Adicione um efeito "Matrix Text" (também chamado digital rain text) em [onde].
Colunas de caracteres devem cair de forma constante em velocidades um pouco diferentes, cada uma com um caractere brilhante na frente e um rastro que se apaga atrás.
Trate como decoração oculta para leitores de tela, mantenha leve e pare a animação se o usuário preferir movimento reduzido (prefers-reduced-motion).

As letras escorrem e se esticam para baixo, como se estivessem derretendo.

Adicione um efeito "Melting Text" em [onde].
As letras devem afundar devagar enquanto gotas se esticam por baixo, como se estivessem derretendo, e parar em um visual derretido e imóvel.
Reproduza só uma vez quando o texto entrar na tela, mantenha a palavra legível no final e não anime se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma palavra se desfoca e se funde na próxima no mesmo lugar.

Adicione um efeito "Morphing Text" (também chamado text morph) em [onde].
Uma palavra deve se desfocar e derreter na próxima no mesmo lugar, com uma fusão suave e pegajosa, e ficar parada por um instante antes da próxima troca.
Alterne as palavras sem cortes, deixe os leitores de tela lerem as palavras como texto normal e pare a alternância se o usuário preferir movimento reduzido (prefers-reduced-motion).

O texto brilha como um tubo de neon e pisca ou pulsa.

Adicione um efeito "Neon Glow Text" (também chamado neon sign flicker ou glowing text) em [onde].
O texto deve brilhar como um tubo de neon, com uma luz suave e constante, e de vez em quando apagar por um instante como um letreiro de verdade.
Deixe a piscada ocasional em vez de rápida, porque flashes rápidos podem fazer mal a alguns usuários, e mantenha o brilho fixo se o usuário preferir movimento reduzido (prefers-reduced-motion).

As letras de um título se embaralham ou se movem em sequência conforme o usuário rola pelas seções.

Adicione "Scrolling Letters" (também chamado on-scroll letter animations) em [onde].
Conforme o usuário rola pelas seções, as letras do título devem rolar para o próximo caractere uma após a outra, da esquerda para a direita, ligadas diretamente à posição da rolagem.
Ao rolar de volta para cima, elas devem voltar, e os leitores de tela devem receber o título atual como texto normal.

Um brilho percorre as letras repetidamente.

Adicione um efeito "Shimmer Text" (também chamado animated shiny text ou metallic shimmer text) em [onde].
Uma faixa de luz deve passar suavemente pelas letras da esquerda para a direita e se repetir depois de uma pausa curta.
Mantenha o texto legível sob o brilho e deixe-o parado se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um título é cortado em fatias horizontais que se deslocam para os lados umas contra as outras conforme a página rola.

Adicione um efeito "Sliced Text" (também chamado on-scroll sliced text) em [onde].
Um título grande deve ser cortado em fatias horizontais que deslizam para os lados umas contra as outras conforme o usuário rola, alinhadas formando a palavra inteira no início.
Ligue o deslocamento diretamente à posição da rolagem para que ele se inverta ao voltar, e mantenha o título como um único texto legível para leitores de tela.

O texto fica disposto em volta de um círculo que gira sem parar.

Adicione "Spinning Text" (também chamado circular text ou text on circle) em [onde].
As letras devem ficar espaçadas de forma uniforme em volta de um círculo que gira devagar e de forma constante, sem salto quando o loop recomeça.
Entregue o texto aos leitores de tela uma única vez como texto normal e pare a rotação se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um título é dividido em caracteres, palavras ou linhas que se animam um após o outro com um pequeno atraso.

Adicione uma entrada "Split Text Stagger" (também chamada letter stagger ou staggered text reveal) em [onde].
Divida o título em letras que sobem e aparecem uma após a outra com um atraso curto entre elas, rápido e suave, sem quique.
Reproduza só uma vez quando o título entrar na tela, faça os leitores de tela lerem como uma única palavra e mostre sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

Os caracteres viram como em um painel de partidas de aeroporto até parar na letra final.

Adicione um efeito "Split-Flap Text" (também chamado text flipping board ou flip board) em [onde].
Cada casa de caractere deve virar rapidamente pelo alfabeto até parar na letra final, com as casas se fixando uma após a outra da esquerda para a direita.
Execute uma vez sempre que o texto aparecer ou mudar, anuncie só o texto final aos leitores de tela e mostre o texto final sem virar se o usuário preferir movimento reduzido (prefers-reduced-motion).

As bordas das letras tremem como se fossem desenhadas à mão, usando um filtro de deslocamento SVG.

Adicione um efeito "Squiggly Text" (também chamado wobbly text ou turbulence text) em [onde].
As bordas das letras devem tremer levemente, como se fossem desenhadas à mão e redesenhadas várias vezes por segundo: uma fervura sutil e nervosa, não uma onda suave.
Mantenha o texto legível e deixe-o parado se o usuário preferir movimento reduzido (prefers-reduced-motion).

O texto fica fixo enquanto as linhas aparecem e somem conforme o avanço da rolagem.

Adicione um efeito "Sticky Text Fade" (também chamado sticky scroll text opacity fade) em [onde].
Enquanto a seção rola, o bloco de texto deve ficar fixo no lugar e as linhas devem aparecer e sumir uma de cada vez conforme o avanço da rolagem.
Ligue os fades diretamente à posição da rolagem para que se invertam ao voltar, e mantenha todas as linhas disponíveis para leitores de tela, qualquer que seja a opacidade.

Os contornos das letras são desenhados como um traço antes de o preenchimento aparecer.

Adicione um efeito "Stroke Text Draw" (também chamado draw in text ou animated stroke text) em [onde].
Os contornos das letras devem se desenhar sozinhos com suavidade e, quando estiverem completos, o preenchimento deve aparecer com um fade.
Reproduza só uma vez ao carregar, mantenha a palavra acessível como texto real e mostre o texto já preenchido se o usuário preferir movimento reduzido (prefers-reduced-motion).

Letras ou palavras giram em 3D em torno de um eixo para mostrar o próximo texto no verso.

Adicione um efeito de hover "Text 3D Flip" (também chamado 3D flip text reveal) em [onde].
Quando o ponteiro estiver sobre o texto, cada letra deve girar em 3D no eixo horizontal para mostrar uma letra nova no outro lado, uma após a outra em uma varredura rápida e suave, e voltar quando o ponteiro sair.
Mantenha a caixa de texto do mesmo tamanho durante o giro e mostre o mesmo efeito no foco do teclado.

O texto se deforma e ondula de forma orgânica, movido pela rolagem ou pelo movimento do ponteiro.

Adicione um efeito "Text Distortion" (também chamado organic text distortion) em [onde].
Uma linha de texto deve fluir para o lado sem parar e se deformar e ondular de forma orgânica enquanto se move, como vista através de água em movimento, com o fluxo movido pela rolagem do usuário.
Mantenha a distorção leve o bastante para o texto continuar legível, deixe-a fluida em dispositivos mais lentos e desative-a se o usuário preferir movimento reduzido (prefers-reduced-motion).

As palavras aparecem uma após a outra ao carregar a página, muitas vezes com um desfoque que se dissipa, como se estivessem sendo geradas.

Adicione um efeito "Text Generate" em [onde].
As palavras devem aparecer uma após a outra enquanto um desfoque suave se dissipa em cada uma, como se o texto estivesse sendo gerado: constante e calmo.
Reproduza só uma vez ao carregar, deixe os leitores de tela lerem o texto completo desde o início e mostre sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma faixa colorida no estilo marca-texto é desenhada sobre uma frase para destacá-la.

Adicione um efeito marca-texto (Text Highlighter) em [onde], também chamado de highlight marker ou marker underline.
Uma faixa colorida no estilo marca-texto deve passar suavemente por trás da frase-chave, da esquerda para a direita, como se alguém a destacasse com uma caneta.
Reproduza só uma vez quando a frase entrar na tela ao rolar, mantenha o texto legível sobre a faixa e faça a faixa acompanhar a frase corretamente quando ela quebrar em duas linhas.

Uma palavra em contorno é preenchida ou iluminada por um degradê que segue o ponteiro ou passa por ela.

Adicione um "Text Hover Effect" (também chamado de text fill on hover ou gradient outline text hover) em [onde].
A palavra deve começar só com o contorno e, enquanto o ponteiro estiver sobre ela, um preenchimento sólido deve entrar suavemente da esquerda para a direita e recuar quando o ponteiro sair.
Mantenha a palavra em contorno legível antes do preenchimento e mostre o mesmo efeito no foco do teclado.

O texto segue um caminho curvo e percorre esse caminho conforme o usuário rola a página.

Adicione um efeito "Text Path Scroll" (também chamado de text path curve scroll animation) em [onde].
O texto deve ficar sobre uma linha curva e deslizar por ela conforme o usuário rola, avançando ao rolar para baixo e voltando ao rolar para cima.
Vincule o movimento diretamente à posição de rolagem, sem atraso, e mantenha o texto legível como texto comum para leitores de tela.

Uma palavra é duplicada em várias cópias empilhadas que se deslocam com a rolagem.

Adicione um efeito "Text Repetition" (também chamado de repeated text scroll) em [onde].
Uma palavra deve ser copiada em uma pilha de cópias em contorno mais apagadas que se abrem por trás dela conforme o usuário rola, e se fecham de novo ao rolar para cima.
Vincule a abertura diretamente à posição de rolagem e esconda as cópias extras dos leitores de tela para que a palavra seja lida só uma vez.

O texto existente sai com uma animação e é substituído por um novo conteúdo.

Adicione um efeito "Text Replacement" (também chamado de text swap) em [onde].
Quando o texto mudar, os caracteres antigos devem deslizar para cima e sair enquanto os novos entram por baixo, um caractere após o outro, em uma onda rápida e suave.
Evite que a caixa de texto mude de tamanho bruscamente durante a troca e anuncie só o texto novo aos leitores de tela.

As palavras de um parágrafo passam de apagadas para opacidade total conforme o usuário rola.

Adicione um efeito "Text Reveal" (também chamado de scroll text reveal ou word-by-word reveal) em [onde].
O parágrafo deve começar apagado e, conforme o usuário rola, cada palavra deve clarear até a intensidade total, uma após a outra, vinculada à posição de rolagem.
Ao rolar de volta para cima, as palavras devem apagar de novo, e o parágrafo inteiro deve continuar disponível para leitores de tela, qualquer que seja o esmaecimento.

Mover o ponteiro sobre um card revela um texto oculto sob uma borda de máscara ou um holofote.

Adicione um efeito "Text Reveal Card" (também chamado de spotlight text reveal) em [onde].
Conforme o ponteiro se move pelo card, uma borda vertical deve segui-lo de perto e revelar um texto oculto de um dos lados, de forma suave e direta, sem atraso.
Em telas de toque, onde não há ponteiro para seguir, deixe que arrastar ou tocar revele o texto oculto, e torne esse texto disponível para leitores de tela.

O texto é substituído por caracteres aleatórios que se renovam e aos poucos se resolvem na palavra final.

Adicione um efeito de hover "Text Scramble" (também chamado de text decode ou encrypted text) em [onde].
Quando o ponteiro passar sobre o texto, cada letra deve piscar rapidamente entre caracteres aleatórios e parar na letra real, resolvendo uma após a outra da esquerda para a direita.
Evite que a largura do texto salte enquanto ele embaralha, mantenha os leitores de tela no texto real e mostre o mesmo efeito no foco do teclado.

O texto gira em perspectiva 3D acompanhando a posição do mouse.

Adicione um efeito "Text Tilt" (também chamado de perspective text tilt) em [onde].
O texto deve se inclinar levemente em 3D na direção do ponteiro enquanto ele se move, acompanhando com suavidade, e voltar a ficar reto suavemente quando o ponteiro sair.
Mantenha a inclinação sutil para o texto continuar legível, e deixe o texto reto em telas de toque e se o usuário preferir movimento reduzido (prefers-reduced-motion).

Os caracteres aparecem um de cada vez como se estivessem sendo digitados, geralmente seguidos de um cursor piscando.

Adicione um efeito de máquina de escrever (Typewriter) em [onde], também chamado de typing animation ou typing text.
Os caracteres devem aparecer um de cada vez em um ritmo de digitação constante, com um cursor logo após o último caractere digitado que pisca algumas vezes quando a digitação termina.
Reproduza só uma vez em vez de em loop, deixe os leitores de tela lerem o texto completo desde o início e mostre o texto completo se o usuário preferir movimento reduzido (prefers-reduced-motion).

Ao passar o mouse, um sublinhado cresce a partir de um lado ou do centro sob um link.

Adicione um efeito de hover "Underline Draw" (também chamado de animated underline ou hover underline animation) em [onde].
Quando o ponteiro estiver sobre o link, um sublinhado deve crescer suavemente da esquerda para a direita sob o texto e encolher de novo quando o ponteiro sair: rápido e sutil.
Evite que o sublinhado desloque o layout ao redor e mostre o mesmo efeito no foco do teclado.

As letras ficam suavemente mais grossas ou mais finas (ou mudam de largura ou inclinação) usando os eixos de uma fonte variável.

Adicione um efeito de hover "Variable Font Weight Animation" (também chamado de font weight shift) em [onde].
Enquanto o ponteiro estiver sobre o texto, as letras devem engrossar uma após a outra em uma onda suave da esquerda para a direita e afinar de novo quando o ponteiro sair.
Use uma fonte variável para o peso mudar suavemente em vez de saltar, evite que o título empurre o conteúdo próximo ao alargar e mostre o mesmo efeito no foco do teclado.

Letras grandes funcionam como uma janela que mostra um vídeo em reprodução dentro delas.

Adicione um efeito "Video Text" (também chamado de text video mask) em [onde].
Letras grandes e grossas devem funcionar como uma janela para um vídeo em reprodução, de modo que as imagens em movimento apareçam só dentro das formas das letras.
Mantenha o vídeo mudo e em loop, sem controles, ofereça as palavras como texto real para leitores de tela e mostre um quadro estático se o usuário preferir movimento reduzido (prefers-reduced-motion).

As letras sobem e descem em sequência, criando uma onda que percorre a palavra.

Adicione um efeito "Wavy Text" (também chamado de text wave) em [onde].
As letras devem subir e descer uma após a outra para que uma onda suave e fluida percorra a palavra sem parar.
Faça o loop sem cortes, garanta que os leitores de tela leiam como uma só palavra e pare a onda se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma palavra da frase é trocada pela próxima de uma lista com um deslize, um giro ou um fade.

Adicione um efeito "Word Rotate" (também chamado de rotating words ou flip words) em [onde].
Uma palavra da linha deve deslizar para cima e sair enquanto a próxima palavra de uma lista entra por baixo, pausando em cada palavra antes da próxima troca.
Evite que o resto da linha salte quando as palavras tiverem larguras diferentes, não faça os leitores de tela anunciarem cada troca e pare a rotação se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma bolha orgânica muda seu contorno continuamente.

Adicione uma animação em loop "Blob Morph" (também chamada morphing blob ou animated blob) em [onde].
Uma bolha orgânica deve mudar o contorno devagar e sem parar enquanto gira de leve, fluida e suave, sem cantos marcados.
Faça o loop ser contínuo para a forma nunca pular, e deixe-a parada se o usuário preferir movimento reduzido (prefers-reduced-motion).

Formas próximas se fundem como gotas líquidas por meio de um filtro de desfoque e contraste.

Adicione um "Gooey Effect" (também chamado goo effect ou metaballs) em [onde].
Com o ponteiro por cima, pequenas gotas devem se afastar da forma principal, esticando como líquido antes de se soltar, e voltar fluindo para se fundir suavemente quando o ponteiro sair.
Aplique o filtro de desfoque e contraste só ao pequeno grupo de formas, não à página inteira, e mostre o mesmo efeito no foco do teclado e ao tocar.

Um ícone, como o menu hambúrguer, se transforma em outro (X) com barras que giram e se movem.

Adicione um "Icon Morph" (também chamado hamburger to X ou menu icon morph) em [onde].
A cada toque, as barras de cima e de baixo devem primeiro deslizar juntas até o meio e depois girar formando um X enquanto a barra do meio some; tocar de novo inverte o movimento: rápido e ágil.
Faça dele um botão de alternância de verdade, com rótulo acessível e estado expandido que mudem junto, e mantenha o tamanho do ícone fixo para nada ao redor se deslocar.

Um traço SVG parece ser desenhado ao longo do caminho conforme o deslocamento do tracejado é animado.

Adicione uma animação "Line Drawing" (também chamada path drawing ou self-drawing SVG) em [onde].
Cada traço deve parecer se desenhar sozinho, suavemente, ao longo do caminho do início ao fim, e um segundo traço, como um sinal de visto, deve vir logo depois do primeiro.
Reproduza só uma vez ao entrar na tela, sem repetir, e mostre as linhas já desenhadas se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um elemento percorre um caminho curvo personalizado e pode girar para acompanhá-lo.

Adicione uma animação "Motion Path" (também chamada animate along path) em [onde].
Um elemento pequeno deve percorrer uma rota curva personalizada em ritmo lento e constante, girando para ficar de frente para a direção em que se move.
Use uma rota fechada para o loop se repetir sem saltos, e faça a rota se ajustar ao contêiner em vez de ficar com tamanho fixo.

Pequenos círculos ou ícones giram em torno de um centro em órbitas circulares.

Adicione "Orbiting Circles" (também chamado orbit animation ou orbiting icons) em [onde].
Pequenos círculos devem girar devagar e de forma constante em volta de um elemento central em anéis circulares, com o anel externo girando no sentido contrário e mais devagar.
Mantenha o loop contínuo e os itens em órbita sempre em pé, e pare a rotação se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma forma vetorial se transforma suavemente em outra.

Adicione um "Shape Morph" (também chamado path morphing ou SVG morph) em [onde].
Uma forma deve se transformar suavemente em outra, por exemplo um pentágono que se afina até virar uma estrela, com os pontos deslizando para o lugar em ritmo uniforme e sem pressa.
Dê às duas formas o mesmo número de pontos correspondentes para a transformação ficar limpa e sem cintilação, e reproduza uma vez a cada mudança de estado em vez de em loop.

Um filtro SVG distorce texto ou formas com ruído animado.

Adicione um efeito de hover "SVG Displacement Distortion" (também chamado displacement map effect) em [onde].
Enquanto o ponteiro estiver por cima, o texto ou a forma deve ondular e tremer como se visto através de água em movimento, surgindo suavemente, e voltar a ficar nítido quando o ponteiro sair.
Aplique o filtro de distorção só enquanto o efeito estiver ativo para não custar nada em repouso, e mostre o mesmo efeito no foco do teclado.

Uma forma de máscara varre a área ou segue o ponteiro para revelar o conteúdo por baixo.

Adicione um efeito de hover "SVG Mask Reveal" (também chamado clip-path reveal ou spotlight mask) em [onde].
Enquanto o ponteiro estiver por cima, uma máscara circular deve crescer a partir do centro e revelar o conteúdo por baixo, e fechar de novo quando o ponteiro sair: suave e bem rápido.
Mantenha as duas camadas exatamente do mesmo tamanho para nada se deslocar, e mostre a mesma revelação no foco do teclado e ao tocar.

Linhas e pontos se animam entre locais em um mapa ou globo.

Adicione "Animated Map Arcs" (também chamado globe arcs) em [onde].
Linhas curvas devem se desenhar uma após a outra entre locais em um mapa pontilhado e depois se recolher em direção ao destino enquanto um anel suave pulsa ali: calmo e constante.
Escalone os arcos para nunca se moverem ao mesmo tempo, mantenha o loop contínuo e pause-o se o usuário preferir movimento reduzido (prefers-reduced-motion).

As barras sobem da altura zero até seus valores.

Adicione um gráfico de barras animado (Bar Chart Grow) em [onde], também chamado animated bar chart ou bar chart entrance.
Cada barra deve subir da linha de base até o seu valor, uma após a outra num escalonamento rápido, desacelerando suavemente ao se acomodar.
Reproduza só uma vez quando o gráfico entrar na tela e mostre o gráfico pronto de imediato se o usuário preferir movimento reduzido (prefers-reduced-motion).

Barras horizontais trocam de posição ao longo do tempo conforme os valores mudam.

Adicione um "Bar Chart Race" (também chamado racing bar chart) em [onde].
As barras horizontais devem crescer e encolher conforme os valores mudam ao longo do tempo e deslizar suavemente umas pelas outras sempre que a posição mudar, cada uma mantendo seu rótulo.
Mova as barras com transformações em vez de reordenar o markup, para as trocas deslizarem em vez de pular, e dê aos usuários uma forma de pausar.

Os elementos do gráfico passam suavemente dos valores antigos para os novos quando os dados mudam ou o conjunto de dados é alternado.

Adicione um "Chart Data Transition" (também chamado chart update animation) em [onde].
Quando os dados mudarem, todas as barras devem deslizar ao mesmo tempo do valor antigo para o novo, suaves e sem pressa, em vez de serem redesenhadas a partir do zero.
Comece cada atualização a partir dos valores que estão na tela para uma segunda mudança rápida não pular, e aplique os novos valores na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um anel ou gráfico de pizza se preenche no sentido horário até sua porcentagem.

Adicione um gráfico de rosca animado (Donut Chart Fill) em [onde], também chamado pie chart sweep ou animated donut chart.
Começando pelo topo, cada segmento deve se preencher no sentido horário, um de cada vez, até o anel mostrar sua participação, desacelerando suavemente ao terminar.
Reproduza só uma vez quando o gráfico entrar na tela e deixe os valores reais disponíveis como texto para leitores de tela.

Um número conta de um valor inicial até um valor final quando fica visível.

Adicione um contador animado (Number Ticker) em [onde], também chamado count up ou animated counter.
Quando o número entrar na tela, ele deve contar de zero até o valor final, rápido no começo e desacelerando suavemente ao chegar.
Use dígitos de largura fixa para nada ao redor tremer, conte só uma vez e mostre o valor final de imediato para leitores de tela e se o usuário preferir movimento reduzido (prefers-reduced-motion).

Cada dígito rola na vertical até o novo valor quando um número muda.

Adicione uma animação de números "Odometer" (também chamada rolling numbers ou slot-machine digits) em [onde].
Quando o valor mudar, cada dígito deve rolar na vertical até o novo dígito, sempre para a frente, com um leve escalonamento entre os dígitos e uma pequena acomodação no final.
Mantenha todos os dígitos com a mesma largura para o número não se deslocar, e exponha só o valor final para leitores de tela.

Um fundo colorido entra varrendo a partir de uma borda com um leve exagero elástico.

Adicione um efeito de hover "Background Bounce Sweep" em [onde].
Uma nova cor de fundo deve entrar varrendo a partir de uma borda, passar um pouco da borda oposta com um quique elástico e então se assentar, enquanto a cor do texto muda para continuar legível; ao sair, ela desliza de volta suavemente.
Mantenha o texto acima do preenchimento e mostre o mesmo efeito no foco do teclado.

As cores do fundo e do texto fazem uma transição suave para uma nova cor ao passar o mouse.

Adicione um efeito de hover "Background Fade" (também chamado color fade) em [onde].
As cores do fundo e do texto devem fazer uma transição suave para novas cores enquanto o ponteiro estiver sobre o elemento, e voltar quando ele sair: calmo, sem movimento.
Mantenha contraste suficiente entre texto e fundo nos dois estados e mostre o mesmo efeito no foco do teclado.

Um fundo colorido varre o elemento a partir de uma borda ao passar o mouse.

Adicione um efeito de hover "Background Sweep" (também chamado background fill ou slide fill) em [onde].
Uma nova cor de fundo deve varrer o elemento da borda esquerda para a direita, suave e rápida, sem quique, e recolher do mesmo jeito quando o ponteiro sair, enquanto a cor do texto muda para continuar legível.
Mantenha o preenchimento recortado dentro do formato do elemento e mostre o mesmo efeito no foco do teclado.

O elemento sobe e depois balança para cima e para baixo sem parar enquanto está sob o mouse.

Adicione um efeito de hover "Bob" (também chamado hang) em [onde].
O elemento deve subir um pouco e depois continuar balançando suavemente para cima e para baixo enquanto o ponteiro estiver sobre ele, e descer de volta quando o ponteiro sair: lento e suave.
Repita o balanço só durante o hover e deixe o elemento parado se o usuário preferir movimento reduzido (prefers-reduced-motion).

A cor da borda aparece ou muda com uma transição suave ao passar o mouse.

Adicione um efeito de hover "Border Fade" em [onde].
A borda deve passar suavemente de um tom apagado para a cor de destaque enquanto o ponteiro estiver sobre o elemento: sutil, sem movimento nem mudança de tamanho.
Mantenha a mesma espessura de borda nos dois estados para nada se deslocar e mostre o mesmo efeito no foco do teclado.

Anéis de borda concêntricos se expandem para fora ou se contraem para dentro a partir do elemento ao passar o mouse.

Adicione um efeito de hover "Border Ripple" em [onde].
Quando o ponteiro entrar, alguns anéis de borda devem se espalhar a partir do elemento, um após o outro, e sumir: rápido e leve, como uma ondulação na água.
Reproduza uma vez por hover em vez de repetir em loop e não deixe os anéis deslocarem o layout ao redor.

O elemento muda de escala com um exagero elástico quando o hover começa ou termina.

Adicione um efeito de hover "Bounce Scale" (também chamado bounce in / out) em [onde].
O elemento deve crescer um pouco com um quique elástico visível, passando rapidamente do tamanho final antes de se assentar, e voltar com o mesmo quique quando o ponteiro sair.
Evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.

Um fundo de destaque desliza entre os cards de uma grade para acompanhar o card sob o mouse.

Adicione um "Card Hover Effect" (também chamado sliding highlight card grid) em [onde].
Um fundo de destaque suave deve aparecer atrás do card sob o ponteiro e deslizar com fluidez até o próximo card para onde o ponteiro for, sumindo quando o ponteiro sair da grade.
Faça o foco do teclado mover o destaque do mesmo jeito e evite que os próprios cards se desloquem.

Uma luz radial suave acompanha o ponteiro pela superfície do card e revela o fundo por baixo.

Adicione um efeito "Card Spotlight" (também chamado spotlight hover, pointer glow, mouse-following glow ou radial gradient hover) em [onde].
Um brilho radial suave e discreto deve acompanhar o ponteiro pela superfície do card, surgindo quando o ponteiro entra e sumindo quando sai.
Mantenha o brilho atrás do conteúdo do card para o texto continuar legível e, em telas de toque, simplesmente deixe o card sem brilho.

Um canto do elemento se dobra para cima como uma página sendo virada ao passar o mouse.

Adicione um efeito de hover "Curl" (também chamado page curl) em [onde].
Um canto do elemento deve se dobrar suavemente como uma página sendo virada, mostrando o verso da dobra, e voltar a ficar plano quando o ponteiro sair.
Mantenha a dobra pequena para não cobrir conteúdo importante e mostre o mesmo efeito no foco do teclado.

Uma sobreposição desliza a partir do lado por onde o ponteiro entrou e sai pelo lado por onde ele deixa o elemento.

Adicione um efeito "Direction Aware Hover" (também chamado direction-aware overlay) em [onde].
Uma sobreposição deve deslizar a partir do lado por onde o ponteiro entrou e sair pelo lado por onde ele deixa o elemento: rápido e suave.
Calcule o lado pela posição do ponteiro na entrada e na saída e, no toque ou no foco do teclado, use uma direção padrão.

Os ícones de uma fileira crescem suavemente conforme o ponteiro se aproxima, como no Dock do macOS.

Adicione um efeito "Dock Magnification" (também chamado dock) em [onde].
Os ícones da fileira devem crescer suavemente conforme o ponteiro se aproxima, com o mais próximo maior e os vizinhos um pouco ampliados, e todos voltarem ao tamanho normal quando o ponteiro sair.
Faça os ícones crescerem para cima a partir de uma linha de base fixa e mantenha cada ícone utilizável no tamanho normal no toque e no teclado.

O elemento sobe alguns pixels ao passar o mouse, como se estivesse flutuando.

Adicione um efeito de hover "Float" (também chamado lift ou raise) em [onde].
O elemento deve subir um pouco e ficar elevado enquanto o ponteiro estiver sobre ele, e voltar ao lugar quando sair: suave e delicado, sem quique.
Mova-o só visualmente, sem deslocar o layout ao redor, e mostre o mesmo efeito no foco do teclado.

Os cards vizinhos ficam desfocados e escurecidos enquanto o card sob o mouse continua nítido.

Adicione um efeito "Focus Cards" (também chamado blur siblings on hover, hover focus blur ou card hover effect) em [onde].
Enquanto o ponteiro estiver sobre um card, os outros devem desfocar, escurecer e encolher um pouco enquanto o card sob o ponteiro continua nítido, tudo com uma transição suave que se desfaz quando o ponteiro sai.
Aplique o mesmo destaque no foco do teclado e mantenha todos os cards nítidos e legíveis quando nenhum estiver sob o ponteiro.

Um halo de luz colorida aparece ao redor do elemento ao passar o mouse.

Adicione um efeito de hover "Glow" (também chamado neon glow) em [onde].
Um halo colorido suave deve surgir ao redor do elemento enquanto o ponteiro estiver sobre ele e sumir quando sair: delicado, sem movimento.
Não deixe o halo afetar o layout e mostre o mesmo efeito no foco do teclado.

O elemento aumenta um pouco, de forma suave, quando o ponteiro está sobre ele.

Adicione um efeito de hover "Grow" (também chamado scale up) em [onde].
O elemento deve aumentar um pouco, de forma suave, enquanto o ponteiro estiver sobre ele, e voltar ao tamanho quando sair: rápido e sutil.
Evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.

Ao passar o mouse, o fundo preenchido se esvazia e deixa só o botão com contorno.

Adicione um efeito de hover "Hollow" (também chamado ghost fill) em [onde].
O fundo preenchido deve sumir aos poucos, deixando só o contorno, e a cor do texto deve mudar para continuar legível sobre o fundo vazio: suave e rápido.
Mantenha a borda com a mesma espessura nos dois estados para o elemento não mudar de tamanho, e mostre o mesmo efeito no foco do teclado.

Uma borda em degradê se anima ao redor do elemento e se expande quando o ponteiro passa por cima.

Adicione um efeito "Hover Border Gradient" em [onde].
Um brilho curto em degradê deve ficar parado em uma parte da borda; enquanto o ponteiro estiver sobre o elemento, ele deve percorrer a borda em ritmo constante enquanto a borda inteira se ilumina com um brilho suave.
Anime a borda só durante o hover e deixe-a parada se o usuário preferir movimento reduzido (prefers-reduced-motion).

Ao passar o mouse, uma sombra suave aparece ou se aprofunda sob o elemento, sugerindo elevação.

Adicione um efeito "Hover Shadow" (também chamado drop shadow on hover ou elevation on hover) em [onde].
Uma sombra suave sob o elemento deve se aprofundar e se espalhar enquanto o ponteiro estiver sobre ele, para parecer elevado, e voltar ao normal quando o ponteiro sair, sem o elemento sair do lugar.
Mantenha a sombra sutil o bastante para funcionar nos temas claro e escuro, e mostre o mesmo efeito no foco do teclado.

Uma camada translúcida tinge o elemento para mostrar que o ponteiro está sobre ele.

Adicione um "Hover State Layer" (também chamado hover state, state layer ou hover overlay) em [onde].
Uma camada translúcida e fraca na cor do conteúdo deve aparecer rapidamente sobre o elemento enquanto o ponteiro estiver sobre ele, e sumir quando ele sair.
Mantenha-a fraca para preservar o contraste, e use a mesma abordagem de camada para os estados de foco e pressionado.

Ao passar o mouse, um ícone cai para fora da vista e volta por cima.

Adicione um efeito de hover "Icon Drop" em [onde].
O ícone dentro do elemento deve cair para baixo até sumir e depois voltar ao lugar vindo de cima: rápido, com uma aterrissagem suave.
Reproduza uma vez a cada entrada do ponteiro, sem loop, e mantenha o texto e o tamanho do botão inalterados.

Um ícone flutua para fora do botão e some enquanto um novo entra flutuando.

Adicione um efeito de hover "Icon Float Away" em [onde].
O ícone atual deve subir flutuando e sumir enquanto um ícone novo sobe de baixo para ocupar o lugar dele, com suavidade, e a troca deve se inverter quando o ponteiro sair.
Mantenha o tamanho do botão fixo durante a troca e mostre o mesmo efeito no foco do teclado.

Um ícone dentro de um botão gira quando o mouse passa sobre o botão.

Adicione um efeito de hover "Icon Spin" em [onde].
O ícone dentro do elemento deve dar uma volta completa com suavidade quando o ponteiro entrar, e girar de volta quando sair.
Gire só o ícone, não o botão inteiro, e mostre o mesmo efeito no foco do teclado.

Ao passar o mouse, o texto do botão desliza para fora e uma seta e um preenchimento se expandem.

Adicione um efeito "Interactive Hover Button" em [onde].
O pequeno ponto ao lado do texto deve se expandir até preencher o botão enquanto o texto desliza para o lado e some, e o texto com uma seta entra deslizando sobre o novo preenchimento: suave e rápido.
Mantenha o tamanho do botão fixo e o texto legível o tempo todo, e mostre o mesmo efeito no foco do teclado.

Ao passar o mouse, uma seta ou o próprio elemento desliza alguns pixels para a frente ou para trás.

Adicione um efeito de hover "Nudge Forward / Backward" (também chamado arrow nudge) em [onde].
A seta deve deslizar um pouco na direção para a qual aponta enquanto o ponteiro estiver sobre o elemento, e voltar quando ele sair: rápido e curto.
Mova só a seta, sem deslocar o texto nem o layout, e mostre o mesmo efeito no foco do teclado.

Ao passar o mouse, um contorno cresce para fora do elemento ou encolhe em direção a ele.

Adicione um efeito de hover "Outline Expand" em [onde].
Um contorno deve começar rente à borda do elemento e se afastar até deixar um pequeno espaço ao redor, ficar assim durante o hover e voltar a se fechar quando o ponteiro sair: suave e rápido.
Desenhe o contorno de forma que ele não mude o tamanho do elemento nem empurre o conteúdo ao redor, e mostre o mesmo efeito no foco do teclado.

Ao passar o mouse, uma linha cresce acima do texto a partir da esquerda, do centro ou da direita.

Adicione um efeito de hover "Overline Grow" em [onde].
Uma linha acima do texto deve crescer do centro para os dois lados enquanto o ponteiro estiver sobre ele, e encolher de volta ao centro quando sair: rápido e suave.
Reserve espaço para a linha para o texto não se mexer, e mostre o mesmo efeito no foco do teclado.

O elemento aumenta rapidamente e volta ao tamanho com um salto elástico.

Adicione um efeito de hover "Pop" em [onde].
Toda vez que o ponteiro entrar, o elemento deve inchar uma vez rapidamente e voltar ao tamanho normal, como um pequeno salto elástico.
Reproduza uma vez por hover em vez de manter o tamanho maior ou repetir em loop, e evite que o layout ao redor se desloque.

O elemento afunda para dentro e volta, como se fosse um botão físico sendo apertado.

Adicione um efeito de hover "Push" em [onde].
Toda vez que o ponteiro entrar, o elemento deve encolher uma vez rapidamente e voltar ao tamanho normal com um leve salto, como se fosse um botão físico sendo apertado.
Reproduza uma vez por hover em vez de repetir em loop, e evite que o layout ao redor se desloque.

Ao passar o mouse, um círculo colorido cresce a partir do centro ou encolhe em direção a ele para preencher o elemento.

Adicione um efeito de hover "Radial Fill" (também chamado circle expand) em [onde].
Um círculo da nova cor deve crescer suavemente a partir do centro até preencher o elemento, e encolher de volta ao centro quando o ponteiro sair, enquanto a cor do texto muda para continuar legível.
Mantenha o círculo recortado dentro da forma do elemento e o texto acima dele, e mostre o mesmo efeito no foco do teclado.

Ao passar o mouse, um retângulo se expande ou se contrai dentro do elemento para mudar o fundo.

Adicione um efeito de hover "Rectangle Fill" em [onde].
A nova cor de fundo deve se fechar a partir das quatro bordas conforme um retângulo interno encolhe em direção ao centro, e voltar a se abrir quando o ponteiro sair, enquanto a cor do texto muda para continuar legível: suave e rápido.
Mantenha o texto acima do preenchimento e mostre o mesmo efeito no foco do teclado.

O elemento gira alguns graus ao passar o mouse.

Adicione um efeito de hover "Rotate" em [onde].
O elemento deve girar levemente no sentido horário enquanto o ponteiro estiver sobre ele e voltar quando sair: suave e sutil.
Evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.

Os cantos do elemento se arredondam suavemente ao passar o ponteiro.

Adicione um efeito de hover "Round Corners" em [onde].
Os cantos retos do elemento devem se arredondar suavemente enquanto o ponteiro estiver sobre ele e voltar a ficar retos quando sair: suave e rápido.
Mantenha o tamanho do elemento inalterado e mostre o mesmo efeito no foco do teclado.

Ao passar o ponteiro, uma faixa diagonal de luz atravessa o elemento de um lado ao outro.

Adicione um efeito de hover "Shine Sweep" (também chamado sheen, shiny button, shine on hover, glint, shimmer ou shimmer button) em [onde].
Uma faixa diagonal de luz suave deve atravessar o elemento da esquerda para a direita, repetindo com uma pausa curta enquanto o ponteiro estiver sobre ele.
Mantenha a faixa recortada dentro do elemento, pare-a quando o ponteiro sair e não a reproduza se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento diminui um pouco, de forma suave, quando o ponteiro está sobre ele.

Adicione um efeito de hover "Shrink" (também chamado scale down) em [onde].
O elemento deve diminuir um pouco, de forma suave, enquanto o ponteiro estiver sobre ele, e voltar ao tamanho quando sair: rápido e sutil.
Evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.

Ao passar o ponteiro, o fundo se abre ou se fecha como persianas, a partir do centro ou das bordas.

Adicione um efeito de hover "Shutter Fill" (também chamado shutter) em [onde].
A nova cor de fundo deve se abrir a partir de uma linha vertical no centro para os dois lados, como persianas, e se fechar de volta ao centro quando o ponteiro sair, enquanto a cor do texto muda para continuar legível: suave e rápido.
Mantenha o preenchimento recortado dentro do elemento e o texto por cima, e mostre o mesmo efeito no foco do teclado.

Ao passar o ponteiro, o elemento desce alguns pixels, como se fosse pressionado para dentro da página.

Adicione um efeito de hover "Sink" em [onde].
O elemento deve descer um pouco e ficar lá enquanto o ponteiro estiver sobre ele, como se fosse pressionado para dentro da página, e subir de volta quando sair: suave, sem efeito de quique.
Mova-o só visualmente, sem deslocar o layout ao redor, e mostre o mesmo efeito no foco do teclado.

O elemento se inclina para o lado ao passar o ponteiro.

Adicione um efeito de hover "Skew" em [onde].
O elemento deve se inclinar para o lado até ficar levemente enviesado enquanto o ponteiro estiver sobre ele, e se endireitar quando sair: rápido e suave.
Mantenha o texto legível enquanto estiver inclinado, evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.

Ao passar o ponteiro, um pequeno triângulo de balão de fala aparece em um lado do elemento.

Adicione um efeito de hover de balão de fala (Speech Bubble) em [onde], também chamado bubble.
Uma pequena ponta triangular deve deslizar de trás de um lado do elemento, transformando-o em um balão de fala, e recolher quando o ponteiro sair: rápido e suave.
Mantenha a ponta da mesma cor do elemento para que pareçam uma só forma e mostre o mesmo efeito no foco do teclado.

Ao passar o ponteiro, uma linha de borda interna aparece dentro da borda do elemento.

Adicione um efeito de hover "Trim" em [onde].
Uma linha fina deve aparecer suavemente logo dentro da borda do elemento enquanto o ponteiro estiver sobre ele, e sumir quando sair: sutil, sem movimento.
Mantenha a linha dentro do elemento para que o tamanho dele não mude e mostre o mesmo efeito no foco do teclado.

Uma linha desliza a partir da borda inferior ou superior até o lugar, sublinhando ou sobrelinhando o elemento.

Adicione um efeito de hover "Underline Reveal" (também chamado overline reveal ou reveal) em [onde].
Uma linha de largura total deve subir deslizando até o lugar a partir de logo abaixo da borda inferior enquanto o ponteiro estiver sobre o elemento, e descer de volta para fora da vista quando sair: rápido e suave.
Recorte a linha na borda para que ela apareça deslizando, e não com fade ou crescendo, e mostre o mesmo efeito no foco do teclado.

O card se desloca e muda levemente de escala conforme o ponteiro se move sobre ele.

Adicione um efeito "Wobble Card" em [onde].
Quando o ponteiro se mover sobre o card, ele deve se deslocar um pouco em direção ao ponteiro enquanto o conteúdo se desloca um pouco no sentido oposto com um leve aumento de escala, acompanhando com suavidade, e tudo volta ao lugar quando o ponteiro sair.
Mantenha o movimento pequeno e desative-o em dispositivos de toque e se o usuário preferir movimento reduzido (prefers-reduced-motion).

A imagem do produto encolhe e voa em arco até o ícone do carrinho.

Adicione uma animação "Add to Cart Fly" (também chamada fly to cart ou add-to-cart animation) em [onde].
Quando o botão de adicionar for pressionado, uma pequena cópia da imagem do produto deve encolher enquanto voa em um arco suave e rápido até o ícone do carrinho, e o carrinho deve dar um pequeno pulo ao atualizar a contagem.
Reproduza uma vez por clique sem mover o card original do produto, e pule o voo se o usuário preferir movimento reduzido (prefers-reduced-motion), mas continue atualizando o carrinho.

Ao marcar a caixa, um sinal de visto é desenhado traço a traço dentro dela.

Adicione uma animação "Checkbox Check Draw" (também chamada animated checkbox ou checkmark draw) em [onde].
Quando a caixa for marcada, ela deve se preencher de cor e o sinal de visto deve se desenhar sozinho em um traço rápido e suave; ao desmarcar, ele se apaga do mesmo jeito.
Mantenha como um checkbox de verdade, com seu estado de marcado, funcionando pelo teclado e com um anel de foco visível.

Pedaços de papel coloridos explodem e caem para comemorar um sucesso.

Adicione uma comemoração de confete (Confetti) em [onde], também chamada confetti burst.
Pequenos pedaços de papel coloridos devem explodir rapidamente do botão e depois girar e cair flutuando enquanto desaparecem, em uma chuva curta e animada.
Dispare uma vez por sucesso em vez de repetir em loop, não deixe bloquear os cliques na página e não mostre se o usuário preferir movimento reduzido (prefers-reduced-motion).

O ícone de copiar se transforma em um sinal de visto e o rótulo mostra Copiado por um instante.

Adicione uma animação "Copy-to-Clipboard Feedback" (também chamada copied state ou copy icon to checkmark) em [onde].
Quando o botão de copiar for pressionado, o ícone de copiar deve encolher rapidamente enquanto um sinal de visto é desenhado e o rótulo muda para "Copiado"; depois de um breve momento, tudo volta suavemente.
Mantenha o botão do mesmo tamanho durante a troca para que nada se desloque e anuncie o estado de copiado para leitores de tela.

Um elemento segue o ponteiro ao ser arrastado e pode ser limitado a uma área ou a um eixo.

Adicione uma interação "Drag" (também chamada draggable ou drag constraints) em [onde].
O elemento deve seguir o ponteiro diretamente enquanto é arrastado, parar nas bordas da área permitida e voltar à posição de repouso com um pequeno quique ao ser solto.
Faça funcionar tanto com toque quanto com mouse, sem a página rolar por baixo, e ofereça uma forma de movê-lo pelo teclado.

O rótulo do placeholder sobe e diminui acima do campo quando ele recebe foco ou é preenchido.

Adicione um label flutuante (Floating Label) em [onde], também chamado float label ou animated placeholder.
Quando o campo receber foco ou tiver um valor, o label que fica dentro dele deve deslizar para cima e diminuir até a borda superior do campo, de forma suave e rápida, e só voltar quando o campo estiver vazio e sem foco.
Mantenha como um label de verdade ligado ao input e garanta que a altura do campo não mude, para que o formulário nunca se desloque.

Um ícone de coração se enche de cor e solta pequenas partículas ou pulsa ao ser clicado.

Adicione uma animação "Like / Heart Burst" (também chamada heart animation ou favorite toggle) em [onde].
Ao curtir, o coração deve se encher de cor e saltar com um quique elástico enquanto um anel e pequenos pontos explodem para fora e somem, tudo rápido e divertido; ao descurtir, o coração só se esvazia discretamente.
Mantenha como um botão de alternância real com estado pressionado e reproduza a explosão só ao ativar.

Segurar um item pressionado por um instante dispara ações extras ou um preenchimento de progresso.

Adicione uma interação de toque longo (Long Press) (também chamada press and hold ou touch and hold) em [onde].
Enquanto o item estiver pressionado, ele deve afundar um pouco enquanto um preenchimento de progresso o percorre em ritmo constante; ao completar, ele volta com um leve quique e abre o menu, e soltar antes cancela e zera o preenchimento.
Dê aos usuários de teclado e leitor de tela outra forma de chegar às mesmas ações, e não deixe o toque selecionar texto nem abrir o menu de contexto do navegador.

Um selo de contagem surge, quica ou pulsa quando chega uma nova notificação.

Adicione uma animação "Notification Badge Bounce" (também chamada badge pop ou ping) em [onde].
Quando chegar uma nova notificação, o selo de contagem deve surgir do nada e se assentar com um ou dois quiques rápidos e elásticos, enquanto um anel suave se expande a partir dele uma vez.
Reproduza uma vez por notificação nova em vez de em loop, e anuncie a nova contagem para leitores de tela.

Um ícone de olho alterna entre aberto e riscado conforme a senha é mostrada ou ocultada.

Adicione um botão de mostrar/ocultar senha (Password Reveal Toggle) (também chamado show/hide password ou eye icon toggle) em [onde].
Ao tocar no olho, o risco deve sumir rapidamente enquanto os pontos ocultos se transformam nos caracteres reais, e tocar de novo redesenha o risco e os esconde: suave e rápido, sem quique.
Mantenha a largura do campo estável para o texto não pular, e faça do botão um botão real cujo rótulo diga se a senha está visível.

Uma seta de ponteiro desenha uma caixa de destaque em volta de uma palavra quando o texto entra na tela.

Adicione um efeito "Pointer Highlight" em [onde].
Quando o texto entrar na tela ao rolar, uma caixa deve se desenhar em volta da palavra-chave da esquerda para a direita enquanto uma pequena seta de ponteiro percorre o canto dela, suave e constante, como se alguém marcasse a palavra à mão.
Desenhe só na primeira vez que aparecer, sem deslocar o texto, e mostre a caixa pronta de imediato se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento encolhe um pouco enquanto é pressionado e volta com um quique ao soltar.

Adicione um efeito "Press (Button Tap Scale)" (também chamado tap feedback ou press state) em [onde].
Enquanto é pressionado, o elemento deve encolher um pouco e escurecer levemente, e ao soltar voltar ao tamanho normal com um pequeno quique: rápido e sutil.
Mostre o mesmo retorno no teclado e no toque, e não deixe o layout ao redor se mexer.

Arrastar uma lista para baixo revela um indicador de carregamento e recarrega o conteúdo ao soltar.

Adicione uma interação de puxar para atualizar (Pull to Refresh) (também chamada swipe to refresh) em [onde].
Ao puxar a lista para baixo a partir do topo, ela deve seguir o dedo com certa resistência e revelar um indicador de carregamento que gira enquanto é puxado; ao soltar, ele continua girando enquanto o conteúdo recarrega, e então a lista sobe suavemente de volta.
Só ative quando a lista já estiver no topo, e ofereça também um botão de atualizar comum para usuários de teclado e leitor de tela.

Uma onda circular se expande e some a partir do ponto exato do clique ou toque.

Adicione um efeito "Ripple" (também chamado material ripple ou ink ripple) em [onde].
A cada clique ou toque, uma onda circular suave deve se espalhar a partir do ponto exato pressionado até cobrir o elemento, sumindo enquanto cresce: rápida e leve.
Recorte a onda no formato do elemento, deixe cada toque rápido iniciar sua própria onda e faça ela começar do centro quando acionada pelo teclado.

Um círculo e um tique se desenham sozinhos para confirmar que a ação deu certo.

Adicione uma animação "Success Checkmark" (também chamada animated success tick) em [onde].
Um círculo deve se desenhar em um único traço suave, depois o tique se desenha dentro dele e o símbolo inteiro dá um pequeno salto suave: calmo e confiante.
Reproduza uma vez quando a ação der certo, acompanhe com uma mensagem de texto que leitores de tela possam anunciar, e mostre o símbolo pronto de imediato se o usuário preferir movimento reduzido (prefers-reduced-motion).

Deslizar uma linha da lista para o lado revela botões de ação como excluir ou arquivar.

Adicione uma interação "Swipe to Delete" (também chamada swipe actions ou swipe to reveal) em [onde].
Ao arrastar uma linha para o lado, ela deve acompanhar o dedo diretamente para revelar por trás botões de ação como arquivar e excluir, parando quando estiverem totalmente visíveis, e ao soltar deslizar suavemente para o lugar, sem quique.
Mantenha a rolagem vertical funcionando durante o deslize horizontal, e deixe as mesmas ações acessíveis por teclado e leitor de tela sem precisar deslizar.

Um botão redondo desliza por um trilho e a cor do trilho muda entre desligado e ligado.

Adicione uma animação "Toggle Switch" (também chamada switch) em [onde].
Ao ligar ou desligar, o botão redondo deve deslizar suavemente até a outra ponta do trilho enquanto a cor do trilho muda: rápido e nítido, sem quique.
Mantenha como um switch acessível real (role="switch" com seu estado checked) que também funcione pelo teclado.

O cursor de texto cresce ou encolhe para acompanhar o tamanho do caractere ao lado dele.

Adicione um efeito "Adaptive Caret" (também chamado adaptive caret size) em [onde].
O cursor de texto deve se posicionar antes do caractere mais próximo do ponteiro e esticar ou encolher rapidamente até a altura desse caractere, com um redimensionamento suave e ágil, sem quique.
Não deixe o texto em si se mexer, e faça o cursor acompanhar o movimento do teclado do mesmo jeito que acompanha o ponteiro.

Um cursor circular inverte as cores abaixo dele usando mix-blend-mode difference.

Adicione um "Blend-Mode Cursor" (também chamado difference cursor ou inverting cursor) em [onde].
Substitua o ponteiro por um círculo sólido que fique logo abaixo dele, sem atraso, e inverta as cores do texto e das formas por onde passa.
Limite a mesclagem a essa área para não misturar com o resto da página, garanta que continue invertendo com clareza no modo escuro, e mantenha o cursor normal em dispositivos de toque.

Uma forma ou rótulo segue o ponteiro com um atraso elástico ou suavizado.

Adicione um "Cursor Follower" (também chamado following pointer ou smooth cursor) em [onde].
Um pequeno marcador redondo deve seguir o ponteiro com um atraso suave e amortecido e deslizar até parar exatamente onde o ponteiro fica parado, sem quicar.
Mantenha o ponteiro real visível, nunca deixe o marcador bloquear cliques, e não o exiba em dispositivos de toque.

Uma imagem de prévia segue o ponteiro ao passar sobre um item de uma lista de texto.

Adicione um efeito "Cursor Image Hover" (também chamado hover image follow ou image preview on hover) em [onde].
Enquanto o ponteiro estiver sobre um item de uma lista de texto, uma pequena imagem de prévia desse item deve flutuar ao lado do ponteiro, seguindo-o com um leve atraso suave e deslizando para a próxima imagem quando o ponteiro passar para outro item.
A prévia nunca deve bloquear cliques na lista, e a lista deve continuar totalmente utilizável sem ela no toque e no teclado.

Um círculo de luz ao redor do ponteiro revela o conteúdo enquanto o resto fica escuro.

Adicione um efeito "Cursor Spotlight" (também chamado flashlight cursor ou spotlight effect) em [onde].
Um círculo de luz suave deve seguir o ponteiro e revelar o conteúdo abaixo dele enquanto o resto da área fica escurecido.
Em dispositivos de toque, onde não há ponteiro para seguir, mostre o conteúdo totalmente iluminado.

Um rastro de formas que desaparecem fica atrás do ponteiro enquanto ele se move.

Adicione um efeito "Cursor Trail" (também chamado mouse trail) em [onde].
Quando o ponteiro se mover, ele deve deixar para trás um rastro curto de pontinhos que encolhem e somem rápido, para que o rastro fique curto e acompanhe o caminho com suavidade.
Desenhe o rastro só enquanto o ponteiro se move, nunca deixe que ele bloqueie cliques, e não use em dispositivos de toque nem se o usuário preferir movimento reduzido (prefers-reduced-motion).

A seta padrão é substituída por um ponto ou anel estilizado que muda sobre os elementos interativos.

Adicione um cursor personalizado ("Custom Cursor", também chamado animated cursor ou cursor replacement) em [onde].
Substitua a seta padrão por um pontinho que acompanha o ponteiro com exatidão e um anel que segue um pouco atrás, e faça o anel crescer suavemente sobre links e botões.
Mantenha o cursor normal em dispositivos de toque e em campos de texto, e nunca deixe o cursor personalizado bloquear cliques.

O elemento é puxado em direção ao ponteiro quando ele se aproxima e volta ao lugar quando ele se afasta.

Adicione um efeito "Magnetic Button" (também chamado magnetic target ou magnetic hover) em [onde].
Quando o ponteiro se aproximar, o botão deve ser puxado um pouco em direção a ele, com o texto se movendo um pouco mais, e quando o ponteiro sair ele deve voltar ao lugar com um pequeno quique elástico.
Não deixe o layout ao redor se mexer, e desative a atração em dispositivos de toque e se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um campo de linhas curtas gira para apontar para o ponteiro, como limalha de ferro em volta de um ímã.

Adicione um efeito "Magnetic Filings" em [onde].
Uma grade de linhas curtas deve girar na hora para que cada uma aponte direto para o ponteiro, como limalha de ferro em volta de um ímã, e todas devem apontar para o centro quando não houver ponteiro.
Mantenha como fundo decorativo que nunca bloqueia cliques, e deixe as linhas paradas se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um painel de conteúdo cresce suavemente até a altura total ou encolhe até zero quando o cabeçalho é alternado.

Adicione uma sanfona (Accordion Expand-Collapse, também chamada collapse ou disclosure) em [onde].
Ao tocar em um cabeçalho, o painel dele deve crescer suavemente até a altura total do conteúdo e fechar por completo no toque seguinte, com a seta do cabeçalho girando junto: rápido e suave, sem quique.
Anime até a altura real do conteúdo em vez de um valor fixo chutado, faça do cabeçalho um botão de verdade que informe se está expandido, e garanta que funcione pelo teclado.

Uma camada escura translúcida aparece atrás de uma sobreposição para escurecer a página.

Adicione um "Backdrop Scrim Fade" (também chamado overlay fade ou scrim) em [onde].
Quando a sobreposição abrir, uma camada escura translúcida deve aparecer suavemente sobre a página de trás, um pouco mais devagar que a própria sobreposição, e sumir de novo ao fechar.
Mantenha o scrim escuro tanto no tema claro quanto no escuro, e impeça que a página de trás role ou receba cliques enquanto ele estiver visível.

Um painel sobe a partir da borda inferior, muitas vezes arrastável e com alturas de encaixe.

Adicione um "Bottom Sheet Slide-Up" (também chamado bottom drawer ou sheet) em [onde].
O painel deve subir a partir da borda inferior enquanto a página de trás escurece, desacelerando suavemente até o lugar, sem quique.
Reproduza uma vez sempre que o painel abrir, faça-o descer de novo ao fechar, e mantenha o foco do teclado dentro do painel enquanto estiver aberto.

Os slides ficam no lugar e se dissolvem um no outro em vez de deslizar.

Adicione um carrossel com fade ("Carousel Crossfade", também chamado fade slideshow ou carousel fade) em [onde].
Os slides devem ficar no lugar e se dissolver devagar um no outro, o antigo sumindo enquanto o próximo aparece ao mesmo tempo, e ficar parados alguns segundos antes da próxima troca.
Volte ao primeiro slide sem cortes, pause ao passar o mouse ou ao receber foco, e não avance sozinho se o usuário preferir movimento reduzido (prefers-reduced-motion).

Os slides passam na horizontal por uma área visível, encaixando um item de cada vez.

Adicione um carrossel ("Carousel Slide", também chamado slider ou swipe carousel) em [onde].
Cada passo deve deslizar a fileira para o lado para que o próximo slide se encaixe no centro, suave e desacelerando, com os vizinhos aparecendo nas bordas e os pontos de posição acompanhando.
Avance um slide por vez, aceite deslizar no toque além de botões e setas do teclado, e coloque rótulos nos controles para leitores de tela.

Um card cresce até virar uma tela de detalhes completa, mantendo um único contêiner visível que muda de forma e revela o novo conteúdo.

Adicione uma transição "Container Transform" (também chamada card expand to detail ou expandable card) em [onde].
Ao abrir o card, o mesmo contêiner deve crescer suavemente até a tela de detalhes completa, com o conteúdo antigo sumindo rápido e o novo aparecendo quando o crescimento estiver quase no fim; ao fechar, toca ao contrário.
Mantenha um único contêiner contínuo em vez de um fade entre duas caixas separadas, e mova o foco para a tela de detalhes quando ela abrir.

Ao arrastar um item, os outros deslizam para abrir espaço e se acomodam na nova ordem.

Adicione uma "Drag-to-Reorder List" (também chamada sortable list) em [onde].
O item arrastado deve seguir o ponteiro diretamente e se erguer um pouco, enquanto os outros itens deslizam suavemente para sair do caminho; ao soltar, ele deve se acomodar rápido no espaço mais próximo.
Aceite toque além de mouse, e ofereça um jeito de mover itens pelo teclado, com a nova posição anunciada para leitores de tela.

Um painel lateral desliza a partir da borda esquerda, direita ou superior, empurrando ou cobrindo o conteúdo.

Adicione um menu lateral ("Drawer Slide", também chamado off-canvas ou side sheet) em [onde].
O painel deve deslizar a partir da borda lateral sobre o conteúdo enquanto a página de trás escurece, rápido e desacelerando suavemente, e sair do mesmo jeito ao fechar.
Mantenha o foco do teclado dentro do menu aberto, feche com Escape ou com um clique na área escurecida, e devolva o foco ao botão que o abriu.

Depois que o layout muda, os elementos deslizam suavemente para as novas posições e tamanhos.

Adicione uma "FLIP Layout Animation" (também chamada layout animation ou First-Last-Invert-Play) em [onde].
Quando o layout mudar, cada elemento deve deslizar da posição antiga para a nova em vez de pular, rápido no início e se acomodando suavemente.
Anime só com transforms para que a página não recalcule o layout a cada quadro, e vá direto para o novo layout se o usuário preferir movimento reduzido (prefers-reduced-motion).

Os itens aparecem deslizando quando adicionados e saem animados quando removidos, enquanto os vizinhos fecham o espaço.

Adicione uma animação "List Item Enter/Exit" (também chamada animated list) em [onde].
Um item novo deve primeiro abrir o seu espaço e depois aparecer deslizando; um item removido deve primeiro sumir e depois se recolher, para que os vizinhos fechem o espaço com suavidade.
Mantenha o item removido no lugar até a saída terminar, para que a lista nunca pule quando itens forem adicionados ou removidos.

Uma linha de conteúdo desliza para o lado em um loop infinito e contínuo.

Adicione um letreiro (Marquee) em [onde]: uma faixa que rola na horizontal sem parar, também chamada de ticker.
O conteúdo deve deslizar da direita para a esquerda em velocidade lenta e constante, em um loop contínuo sem saltos visíveis.
Pause ao passar o mouse e pare o movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

Ao aplicar um filtro ou ordenação, os blocos da grade se reorganizam, somem ou deslizam para novas posições.

Adicione um efeito "Masonry / Grid Shuffle" (também chamado filterable grid animation) em [onde].
Ao aplicar um filtro, os blocos que não combinam mais devem encolher e sumir no lugar, enquanto os restantes deslizam suavemente para as novas posições; ao limpar o filtro, toca ao contrário.
Não deixe a página ao redor pular enquanto a altura da grade muda, e faça dos controles de filtro botões de verdade que informem qual filtro está selecionado.

Um diálogo aparece enquanto cresce levemente a partir do centro, sobre uma página escurecida.

Adicione uma animação "Modal Scale-Fade In" (também chamada dialog open animation ou zoom-fade dialog) em [onde].
O diálogo deve aparecer enquanto cresce levemente a partir do centro e a página de trás escurece: rápido e sutil, sem quique.
Reproduza uma vez sempre que o diálogo abrir, mova o foco para ele e mantenha-o lá dentro, e use só um fade simples se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um menu flutuante aparece com fade e cresce a partir do ponto onde fica o seu gatilho.

Adicione uma animação "Popover / Dropdown Open" (também chamada menu pop ou dropdown scale-fade) em [onde].
O menu deve aparecer com fade enquanto cresce levemente a partir do canto ao lado do seu gatilho, rápido e preciso, e sumir um pouco mais rápido ao fechar.
Mantenha-o ancorado ao gatilho, feche com Escape ou com um clique fora e exponha o estado aberto no gatilho para leitores de tela.

Um elemento parece se mover e mudar de tamanho até um elemento correspondente em outro lugar, como se fossem um só.

Adicione uma "Shared Layout Animation" (também chamada shared element dentro da página) em [onde].
Quando a seleção mudar, o elemento deve parecer se mover e mudar de tamanho suavemente da posição antiga para a nova, assentando com delicadeza, para ser percebido como um único objeto e não dois.
Mostre só uma cópia por vez e evite que o layout ao redor salte durante o movimento.

Um sublinhado ou pílula desliza da aba anterior para a aba recém-selecionada.

Adicione um "Tab Indicator Slide" (também chamado sliding underline ou active tab indicator) em [onde].
Quando uma nova aba for selecionada, o sublinhado deve deslizar da aba anterior para a nova, rápido e desacelerando suavemente, esticando até a largura da nova aba se ela for diferente.
Mantenha a semântica correta de abas com navegação pelas setas do teclado e mova o indicador sem deslizar se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma mensagem breve desliza ou aparece com fade na borda da tela, espera e depois sai; os toasts empilhados se deslocam para abrir espaço.

Adicione um "Toast Slide-In" (também chamado snackbar ou toast notification) em [onde].
Cada mensagem deve subir a partir da borda da tela e aparecer com fade, desacelerando suavemente; quando um novo toast chegar, os que já estão na tela devem se deslocar suavemente para abrir espaço.
Anuncie a mensagem para leitores de tela sem roubar o foco, deixe-a visível tempo suficiente para ser lida e pause o fechamento automático ao passar o mouse ou ao focar.

Um pequeno rótulo aparece com fade e se acomoda ao lado de um elemento após um breve atraso ao passar o mouse.

Adicione um "Tooltip Fade" (também chamado tooltip reveal) em [onde].
Após um breve atraso ao passar o mouse, o rótulo deve aparecer com fade se acomodando levemente ao lado do elemento, e sumir rápido e sem atraso quando o ponteiro sair.
Mostre-o também no foco do teclado, deixe o Escape fechá-lo e vincule-o ao elemento para que leitores de tela o leiam.

A nova visualização é revelada dentro de um círculo que se expande a partir do ponto do clique.

Adicione uma transição "Circular Reveal" (também chamada clip-path circle expand ou theme toggle reveal) em [onde].
A nova visualização deve aparecer dentro de um círculo que cresce a partir do controle pressionado até cobrir toda a área: suave e constante, acelerando e desacelerando com suavidade.
Faça o círculo começar exatamente onde o controle foi pressionado e troque na hora, sem círculo, se o usuário preferir movimento reduzido (prefers-reduced-motion).

A página antiga desaparece com fade enquanto a nova aparece com fade na mesma área.

Adicione uma "Crossfade Page Transition" (também chamada cross-dissolve ou fade transition) em [onde].
Ao navegar, a página antiga deve desaparecer com fade enquanto a nova aparece ao mesmo tempo na mesma área: suave e bem rápida.
Mantenha as duas páginas no mesmo lugar para que nada se desloque durante o fade e mova o foco para o título principal da nova página após a troca.

Painéis sólidos varrem a tela para cobrir a página antiga e depois se recolhem para revelar a nova.

Adicione uma transição de página "Curtain / Panel Wipe" (também chamada page wipe ou staggered panels) em [onde].
Painéis sólidos devem varrer a tela um após o outro para cobrir a página antiga, a página deve trocar enquanto está totalmente coberta e os painéis devem seguir até sair de vista para revelar a nova: marcante e fluida.
Nunca mostre a nova página antes de os painéis cobrirem a antiga e use um fade simples se o usuário preferir movimento reduzido (prefers-reduced-motion).

O conteúdo que sai desaparece por completo com fade e depois o que entra aparece com fade e uma leve escala.

Adicione uma transição de página "Fade Through" (também chamada fade-through transition ou out-in route transition) em [onde].
Primeiro, o conteúdo que sai deve desaparecer com fade, rápido e por completo; depois, o que entra deve aparecer com fade enquanto cresce levemente até o seu lugar.
Nunca deixe os dois se sobreporem e evite que o layout do conteúdo que entra se desloque enquanto ele escala.

Uma camada de introdução em tela cheia com um logo ou contador desliza ou desaparece com fade para revelar o site.

Adicione um "Preloader Curtain Lift" (também chamado splash screen ou intro loader) em [onde].
Uma camada de introdução em tela cheia deve ficar parada enquanto uma barra de carregamento se enche e depois subir e sair suavemente para revelar o site, que se acomoda com delicadeza por baixo.
Reproduza só no primeiro carregamento, nunca segure a página mais do que o carregamento realmente leva e pule a animação se o usuário preferir movimento reduzido (prefers-reduced-motion).

O conteúdo que sai e o que entra se movem juntos ao longo do eixo X, Y ou Z com fades para mostrar a relação espacial.

Adicione uma transição de página "Shared Axis" (também chamada shared axis X/Y/Z) em [onde].
Ao avançar, o conteúdo antigo deve deslizar um pouco para um lado e desaparecer rápido com fade enquanto o novo entra pelo outro lado e aparece logo depois; ao voltar, a direção se inverte.
Mantenha o deslocamento curto para que só sugira a direção e ajuste o eixo à navegação: lateral para páginas irmãs, vertical para etapas, profundidade para aprofundar.

Um elemento correspondente, como uma miniatura, se transforma em posição e tamanho de uma página para a seguinte.

Adicione uma "Shared Element Transition" (também chamada hero transition ou view-transition-name morph) em [onde].
Ao ir para a página seguinte, o elemento correspondente, como uma miniatura, deve se mover e crescer suavemente até o seu lugar na nova página enquanto o resto do conteúdo faz um crossfade, e encolher de volta ao retornar.
Dê aos elementos correspondentes das duas páginas uma mesma identidade compartilhada para que se emparelhem corretamente e use um crossfade simples quando o navegador não conseguir transformá-los.

A nova página entra deslizando por um lado enquanto a antiga sai, e a direção segue a profundidade da navegação.

Adicione uma "Slide Page Transition" (também chamada push / pop ou directional slide) em [onde].
Ao avançar, a nova página deve entrar empurrando pela lateral enquanto a antiga sai pelo outro lado; ao voltar, as duas devem se mover na direção oposta: suave, acelerando e desacelerando com suavidade.
Amarre a direção à profundidade da navegação, incluindo o botão Voltar do navegador, e evite que a página role para o lado durante o deslizamento.

A página antiga aumenta ou diminui e desaparece com fade enquanto a nova escala até o seu lugar.

Adicione uma "Zoom Page Transition" (também chamada scale transition ou zoom in / out) em [onde].
Ao entrar em detalhe, a página antiga deve aumentar um pouco e desaparecer com fade enquanto a nova cresce de um tamanho um pouco menor até o seu lugar; ao voltar, o zoom deve ir no sentido oposto: suave e rápido.
Mantenha a escala sutil para que o conteúdo continue legível o tempo todo e use um fade simples se o usuário preferir movimento reduzido (prefers-reduced-motion).

Barras verticais crescem e encolhem fora de fase, como um equalizador de áudio.

Adicione uma animação de carregamento "Bar Loader (Equalizer)" (também chamada bars loader ou audio bars) em [onde].
Algumas barras verticais devem esticar e encolher fora de sincronia entre si como um equalizador de áudio, em um ritmo animado mas constante.
Mantenha o loop contínuo, dê a ela um rótulo de status para leitores de tela e pare o movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma versão minúscula e desfocada da imagem ocupa o lugar e fica nítida quando a imagem completa carrega.

Adicione um efeito de carregamento de imagem "Blur-Up Placeholder" (também chamado LQIP ou blur placeholder) em [onde].
Uma versão minúscula e bem desfocada da imagem deve ocupar o espaço dela na hora e, quando a imagem completa carregar, ficar nítida no lugar de forma suave e bem rápida.
Reserve o tamanho exato da imagem para que nada se desloque quando ela chegar e corte as bordas desfocadas para que não vazem para fora do quadro.

Uma fileira de pontos quica, esmaece ou muda de tamanho em sequência.

Adicione "Bouncing Dots" (também chamado dots loader ou three-dot loader) em [onde].
Os pontos devem pular e aterrissar um após o outro em um ritmo leve e elástico, com uma pausa curta antes de a sequência se repetir.
Mantenha o loop contínuo, dê a ele um rótulo de status para leitores de tela e pare o movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um botão troca o texto por um pequeno spinner, ou o acrescenta, enquanto uma ação é executada.

Adicione um "Button Loading State" (também chamado spinner button ou loading button) em [onde].
Ao ser pressionado, o botão deve afundar um pouco, esmaecer o texto e mostrar um pequeno spinner no lugar enquanto a ação roda; ao terminar, o texto volta.
Mantenha a largura do botão fixa durante o carregamento, bloqueie cliques repetidos e anuncie o estado ocupado para leitores de tela.

Um anel ou arco gira continuamente para mostrar que algo está carregando.

Adicione um "Circular Spinner" (também chamado spinner ou throbber) em [onde].
Um arco deve girar de forma constante em volta de um anel suave enquanto se alonga e encurta, fluido e contínuo.
Mantenha a rotação contínua, dê a ele um rótulo de carregamento para leitores de tela e desacelere ou pare se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma barra se preenche da esquerda para a direita na proporção do andamento da tarefa.

Adicione uma barra de progresso (Determinate Progress Bar) em [onde], também chamada progress bar fill ou progress indicator.
A barra deve se preencher da esquerda para a direita acompanhando o progresso real, com transições suaves entre as atualizações, e mostrar a porcentagem ao lado.
Use a semântica correta de barra de progresso com valores atual, mínimo e máximo para que leitores de tela consigam lê-la, e nunca deixe o preenchimento voltar.

Um segmento de barra percorre a trilha repetidamente quando a duração é desconhecida.

Adicione uma barra de progresso indeterminada (Indeterminate Linear Progress) em [onde], também chamada indeterminate progress bar.
Um segmento curto deve percorrer a trilha de uma ponta à outra várias vezes, rápido e suave, enquanto a duração da tarefa for desconhecida.
Faça o segmento entrar e sair totalmente da trilha para que o loop não tenha emendas visíveis, e marque-a como barra de progresso ocupada para leitores de tela.

Uma lista de etapas é destacada ou marcada uma a uma conforme uma tarefa longa avança.

Adicione um "Multi-Step Loader" (também chamado step loader ou checklist loader) em [onde].
As etapas devem se acender uma de cada vez, de cima para baixo, e cada uma deve ganhar um pequeno check que surge com um leve pulo ao ser concluída, em um ritmo calmo e fácil de ler.
Avance as etapas conforme o progresso real da tarefa em vez de um temporizador fixo, e anuncie cada etapa concluída para leitores de tela.

Um arco cresce em volta de um anel para mostrar a porcentagem concluída.

Adicione um progresso circular (Progress Ring) em [onde], também chamado circular progress ou radial progress.
Começando no topo, um arco deve crescer no sentido horário ao redor do anel para mostrar a porcentagem concluída, desacelerando suavemente ao parar, enquanto o número no centro sobe junto.
Mantenha o arco e o número sincronizados, e exponha o valor com a semântica correta de barra de progresso para leitores de tela.

Blocos cinza de placeholder aparecem e esmaecem suavemente para indicar carregamento.

Adicione um "Pulse Placeholder" (também chamado skeleton pulse) em [onde].
Blocos cinza no formato do conteúdo que vai chegar devem clarear e voltar devagar, todos juntos, em um ritmo suave e constante.
Faça os placeholders seguirem o layout real para que nada pule quando o conteúdo chegar, e deixe-os parados se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um brilho claro passa por cima de formas cinza de placeholder.

Adicione um "Skeleton Shimmer" (também chamado skeleton wave ou shimmer effect) em [onde].
Uma faixa de luz suave deve atravessar as formas cinza da esquerda para a direita e fazer uma pausa curta antes da próxima passada: fluido e sem pressa.
Faça as formas seguirem o layout real para que nada pule quando o conteúdo carregar, e mostre placeholders estáticos se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma barra fina no topo da página avança aos poucos durante a navegação e se completa ao carregar.

Adicione uma barra de carregamento (Top Loading Bar) em [onde], também chamada page progress bar.
Uma barra fina na borda superior deve avançar rápido no início e depois cada vez mais devagar enquanto a página carrega; quando o carregamento terminar, ela deve correr até o fim e esmaecer.
Nunca deixe que ela chegue ao fim antes de o carregamento realmente terminar, e não deixe que ela cubra ou desloque o conteúdo da página.

Três pontos dentro de um balão pulsam ou sobem em sequência para mostrar que alguém ou uma IA está digitando.

Adicione um "Typing Indicator" (também chamado typing dots) em [onde].
Os pontos dentro de um pequeno balão de chat devem subir e clarear um após o outro em um ritmo suave e delicado enquanto o outro lado digita.
Mantenha o loop contínuo, remova o balão assim que a mensagem chegar e dê aos leitores de tela um texto de status curto no lugar dos pontos.

Um pulso luminoso percorre uma linha que liga dois elementos.

Adicione um efeito "Animated Beam" (também chamado connecting beam) em [onde].
Um pulso luminoso curto deve percorrer a linha que liga dois elementos, avançando de forma constante de uma ponta à outra e recomeçando: suave e calmo.
Mantenha a linha de conexão sempre visível, e deixe o pulso parado se o usuário preferir movimento reduzido (prefers-reduced-motion).

As cores de um fundo em degradê mudam, deslizam ou giram lentamente.

Adicione um fundo "Animated Gradient" (também chamado gradient animation ou moving gradient) em [onde].
As cores do degradê devem deslizar lentamente pela área em um movimento suave e contínuo, sem saltos visíveis quando o loop recomeçar.
Mantenha o texto por cima legível em todas as cores, e pare o movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma grade de linhas ou quadrados cujas células aparecem, esmaecem ou piscam.

Adicione um fundo "Animated Grid Pattern" (também chamado flickering grid ou grid background) em [onde].
Uma grade suave de linhas deve ficar parada enquanto algumas células espalhadas aparecem e esmaecem devagar em momentos diferentes: discreto e sutil, nunca todas ao mesmo tempo.
Mantenha-o atrás do conteúdo sem capturar cliques, e pare a cintilação se o usuário preferir movimento reduzido (prefers-reduced-motion).

Faixas de cor suaves e desfocadas flutuam como uma aurora atrás do conteúdo.

Adicione um "Aurora Background" (também chamado northern lights gradient) em [onde].
Faixas de cor suaves e desfocadas devem flutuar e balançar devagar atrás do conteúdo, sobrepondo-se e misturando-se como uma aurora boreal: bem lento e sonhador.
Mantenha o texto por cima legível, evite refazer o desfoque das faixas a cada quadro para manter a fluidez, e pare o movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

Linhas finas e luminosas percorrem trajetos e às vezes explodem ao atingir uma superfície.

Adicione um efeito "Background Beams" (também chamado light beams ou background lines) em [onde].
Trajetos curvos e suaves devem ficar no fundo enquanto rastros curtos e luminosos os percorrem um após o outro, em um ritmo calmo e constante.
Escalone os feixes para que nunca se movam em sincronia, mantenha-os atrás do conteúdo e pare-os se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma grade inclinada de blocos se acende em cores quando o ponteiro passa por cima.

Adicione um efeito "Background Boxes" (também chamado tile hover background) em [onde].
Preencha a área com uma grade inclinada de blocos; cada bloco por onde o ponteiro passar deve acender na hora e depois apagar devagar, deixando um rastro curto.
Mantenha os blocos atrás do conteúdo para que não bloqueiem os cliques nele e, em telas de toque, acenda o bloco tocado.

Um brilho intenso percorre a borda de um card.

Adicione um efeito "Border Beam" (também chamado shine border ou moving border) em [onde].
Um brilho curto e intenso deve percorrer a borda do card em ritmo uniforme e tranquilo, em loop sem saltos visíveis.
O efeito não deve alterar o conteúdo nem o tamanho do card; pare o brilho se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma grade de pontos pulsa ou brilha em ondas.

Adicione um fundo "Dot Pattern Glow" (também chamado dotted glow background ou dot grid) em [onde].
Uma grade fina de pontos deve ficar parada enquanto uma faixa suave de brilho passa devagar por ela, acendendo os pontos por onde passa: calmo e sutil.
Mantenha os pontos claros o bastante para o conteúdo por cima continuar legível e pare o brilho se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma linha de luz se alarga e projeta um cone de luz sobre o título logo abaixo.

Adicione um "Lamp Effect" (também chamado lamp glow) em [onde].
Quando a seção entrar na tela, uma linha fina e luminosa deve se alargar a partir do centro e projetar um cone de luz suave sobre o título abaixo, que aparece subindo até o lugar: lento e fluido.
Reproduza só uma vez e, se o usuário preferir movimento reduzido (prefers-reduced-motion), mostre o título já iluminado desde o início.

Feixes de luz suaves balançam pelo fundo.

Adicione um fundo "Light Rays" (também chamado god rays ou light shafts) em [onde].
Vários feixes suaves e semitransparentes devem se abrir em leque a partir do topo e balançar de leve de um lado para o outro, clareando e escurecendo um pouco: lento e atmosférico.
Mantenha os feixes atrás do conteúdo e fracos o bastante para não atrapalhar a leitura, e pare-os se o usuário preferir movimento reduzido (prefers-reduced-motion).

Vários pontos de cor se misturam e flutuam suavemente, formando um fundo orgânico de muitos tons.

Adicione um fundo "Mesh Gradient" (também chamado animated mesh gradient) em [onde].
Várias manchas de cor suaves devem se misturar umas às outras e flutuar devagar pela área, para que o fundo mude o tempo todo de forma orgânica: muito lento e fluido.
Mantenha o conteúdo por cima legível em todas as misturas e pare o movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

Riscos diagonais com caudas brilhantes caem por um card ou seção.

Adicione um efeito "Meteors" (também chamado meteor shower ou shooting stars) em [onde].
Alguns riscos pequenos com caudas que somem devem cruzar a área na diagonal em momentos aleatórios, cada um rápido e logo some.
Use poucos para que continue sendo um detalhe, corte-os nas bordas da área e pare-os se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma textura fina e salpicada cobre a página e às vezes tremula como granulação de filme.

Adicione uma camada "Noise / Grain Texture" (também chamada film grain ou noise background) em [onde].
Uma textura salpicada, fina e fraca deve ficar sobre a superfície e tremular em pequenos saltos como granulação de filme: sutil, nunca forte a ponto de sujar o conteúdo.
Deixe os cliques passarem pela camada, gere a textura uma única vez em vez de a cada quadro e mantenha-a parada se o usuário preferir movimento reduzido (prefers-reduced-motion).

Muitos pontos pequenos flutuam, se conectam ou reagem ao ponteiro pelo fundo.

Adicione um fundo de partículas ("Particles", também chamado floating particles ou particle field) em [onde].
Pontos pequenos de tamanhos diferentes devem flutuar e vagar devagar por trajetos suaves e errantes, cada um no seu ritmo: calmo e leve.
Use uma quantidade moderada de pontos para continuar leve em aparelhos mais lentos, pause quando estiver fora da tela e pare se o usuário preferir movimento reduzido (prefers-reduced-motion).