Background & Ambient

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

A intensidade do desfoque aumenta aos poucos em direção a uma borda, para o conteúdo sumir suavemente.

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.

Uma grade em perspectiva inclinada avança em direção a quem vê, como um piso synthwave.

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

Círculos concêntricos se expandem a partir de um ponto central e desaparecem.

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

Pequenos pontos brilhantes piscam e somem ao redor de um texto ou seção.

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

Um cone ou foco de luz suave desliza até o lugar e ilumina parte do fundo.

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.

Estrelas minúsculas cintilam ou flutuam sobre um fundo escuro como o espaço.

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

Partículas giram em espiral ao redor de um centro, como um redemoinho.

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

Linhas ou formas onduladas em camadas ondulam na horizontal.

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