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).
Também chamada Gradient animation, Moving gradient, Background gradient animation
As cores de um fundo em degradê mudam, deslizam ou giram lentamente.
Onde usar
Fundos de hero, botões
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).
Também chamada Flickering grid, Grid background
Uma grade de linhas ou quadrados cujas células aparecem, esmaecem ou piscam.
Onde usar
Heros de tecnologia e SaaS
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).
Também chamada Northern lights gradient
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).
Também chamada Light beams, Beam collision, Animated Path Lines, Background Lines, Wave Path Lines
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).
Também chamada Tile hover background
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.
Também chamada Shine border, Animated border, Glowing effect, Moving Border
Um brilho intenso percorre a borda de um card.
Onde usar
Cards em destaque, CTAs
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).
Também chamada Dotted glow background, Dot grid
Uma grade de pontos pulsa ou brilha em ondas.
Onde usar
Fundos de seção sutis
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.
Onde usar
Títulos de hero escuros
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.
Também chamada God rays, Light shafts
Feixes de luz suaves balançam pelo fundo.
Onde usar
Cabeçalhos com atmosfera
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).
Também chamada Animated mesh gradient
Vários pontos de cor se misturam e flutuam suavemente, formando um fundo orgânico de muitos tons.
Onde usar
Fundos de landing page
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).
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).
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).
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).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.
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).
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).
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).
Também chamada Spotlight sweep, Light cone
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.
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).
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).
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).