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
Variações
- twinkling
- warp / fly-through
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 "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).Animações parecidas
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).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
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).Meteors
Também chamada Meteor shower, Shooting Stars
Riscos diagonais com caudas brilhantes caem por um card ou seção.
Onde usar
Detalhes em cards e hero
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).Noise / Grain Texture
Também chamada Film grain, Noise background
Uma textura fina e salpicada cobre a página e às vezes tremula como granulação de filme.
Onde usar
Dar profundidade tátil a degradês
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).Mais em Background & Ambient
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).Wave Background
Também chamada Wavy background, Animated waves
Linhas ou formas onduladas em camadas ondulam na horizontal.
Onde usar
Divisores de seção, rodapés de hero
Adicione um "Wave Background" (também chamado wavy background ou animated waves) em [onde].
Algumas formas de onda em camadas devem rolar para o lado em velocidades um pouco diferentes, sobrepondo-se e mudando como água: lento e suave.
Faça cada onda repetir sem emendas nem saltos visíveis e pare as ondas se o usuário preferir movimento reduzido (prefers-reduced-motion).A
B
Animated Beam
Também chamada Connecting beam
Um pulso luminoso percorre uma linha que liga dois elementos.
Onde usar
Diagramas de integração ou de fluxo de dados
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).