Particles (partículas)
Também chamada Floating particles, Particle field
Muitos pontos pequenos flutuam, se conectam ou reagem ao ponteiro pelo fundo.
Onde usar
Fundos de hero e de seção
Variações
- floating
- connected lines
- pointer-repel
- 3D floating
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 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).Animações parecidas
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).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).Vortex
Também chamada Swirling particles
Partículas giram em espiral ao redor de um centro, como um redemoinho.
Onde usar
Fundos de hero impactantes
Adicione um fundo "Vortex" (também chamado swirling particles) em [onde].
Partículas pequenas devem girar em espiral para dentro ao redor de um ponto central como um redemoinho, surgindo na borda e sumindo ao chegar ao meio, num giro fluido e contínuo.
Use uma quantidade moderada de partículas, pause quando estiver fora da tela e pare o giro se o usuário preferir movimento reduzido (prefers-reduced-motion).A
Clique
Confetti (confete)
Também chamada Confetti burst, Celebration
Pedaços de papel coloridos explodem e caem para comemorar um sucesso.
Onde usar
Compra concluída, meta atingida
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).Mais em Background & Ambient
ABCDEFGHIJKL
Role aqui dentro
Progressive Blur
Também chamada Gradient blur edge
A intensidade do desfoque aumenta aos poucos em direção a uma borda, para o conteúdo sumir suavemente.
Onde usar
Bordas de contêineres com rolagem, cabeçalhos
Adicione uma borda "Progressive Blur" (também chamada gradient blur edge) em [onde].
O conteúdo que rola em direção à borda deve ficar cada vez mais desfocado e suave, aumentando aos poucos em vez de ser cortado por uma linha dura.
Mostre o desfoque só na borda que ainda tem mais conteúdo além dela e não deixe a área desfocada bloquear cliques nem a rolagem.Retro Grid
Também chamada Perspective grid, Synthwave grid
Uma grade em perspectiva inclinada avança em direção a quem vê, como um piso synthwave.
Onde usar
Heroes retrô e futuristas
Adicione um fundo "Retro Grid" (também chamado perspective grid ou synthwave grid) em [onde].
Um piso de grade inclinado em perspectiva deve avançar de forma constante em direção a quem vê e sumir no horizonte: fluido e sem fim.
Faça o loop contínuo para que as linhas nunca pulem e pare o movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).A
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
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).