Motion Path

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).

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.

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).

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 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.