Ripple Rings
Também chamada Background ripple, Concentric ripples
Círculos concêntricos se expandem a partir de um ponto central e desaparecem.
Onde usar
Peças centrais de hero, visuais de áudio ou de pareamento
Prompt
Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.
Adicione um efeito "Ripple Rings" (também chamado background ripple ou concentric ripples) em [onde].
Os anéis devem se expandir sem parar a partir de um ponto central e sumir conforme crescem, um após o outro e com espaçamento igual: lento e constante.
Mantenha o elemento central parado no lugar e pare as ondas se o usuário preferir movimento reduzido (prefers-reduced-motion).Animações parecidas
A
Ping
Também chamada Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
Uma cópia do elemento cresce e desaparece repetidamente, como uma onda de radar.
Onde usar
Pontos de notificação, status ao vivo
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).Clique
Ripple
Também chamada Material ripple, Touch ripple, Ripple Button, Ink ripple
Uma onda circular se expande e some a partir do ponto exato do clique ou toque.
Onde usar
Botões, itens de lista
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.A
Passe o mouse por cima
Anéis de borda concêntricos se expandem para fora ou se contraem para dentro a partir do elemento ao passar o mouse.
Onde usar
Botões
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.Mais em Background & Ambient
ABC
Sparkles
Também chamada Glitter, Twinkle particles, Sparkles Text, Text Sparkle Particle Highlight
Pequenos pontos brilhantes piscam e somem ao redor de um texto ou seção.
Onde usar
Títulos, detalhes premium
Adicione um efeito "Sparkles" (também chamado glitter ou twinkle particles) em [onde].
Pequenos brilhos em forma de estrela devem surgir, cintilar e sumir ao redor do texto em pontos espalhados e momentos aleatórios: leve e rápido.
Mantenha os brilhos decorativos e ocultos para leitores de tela, nunca cubra o próprio texto e pare-os se o usuário preferir movimento reduzido (prefers-reduced-motion).Spotlight
Também chamada Spotlight sweep, Light cone
Um cone ou foco de luz suave desliza até o lugar e ilumina parte do fundo.
Onde usar
Títulos de hero
Adicione um efeito "Spotlight" (também chamado spotlight sweep ou light cone) em [onde].
Quando a página carregar, um cone de luz suave deve entrar na diagonal a partir do canto e parar sobre o título, ficando mais claro ao chegar: lento e fluido.
Reproduza só uma vez e, se o usuário preferir movimento reduzido (prefers-reduced-motion), mostre a luz já no lugar.Starfield
Também chamada Stars background, Twinkling stars
Estrelas minúsculas cintilam ou flutuam sobre um fundo escuro como o espaço.
Onde usar
Heroes com tema espacial ou noturno
Adicione um fundo "Starfield" (também chamado stars background ou twinkling stars) em [onde].
Estrelas minúsculas de tamanhos diferentes devem cintilar suavemente, cada uma no seu ritmo, enquanto o campo todo se desloca muito devagar: silencioso e calmo.
Use uma quantidade moderada de estrelas para continuar leve e pare a cintilação e o deslocamento se o usuário preferir movimento reduzido (prefers-reduced-motion).