Aurora Background
Também chamada Northern lights gradient
Faixas de cor suaves e desfocadas flutuam como uma aurora atrás do conteúdo.
Onde usar
Seções hero
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 "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).Animações parecidas
Mesh Gradient
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).Animated Gradient
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).Light Rays
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).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).Mais em Background & Ambient
Background Beams
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.
Onde usar
Fundos de hero
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).Passe o mouse por cima
Background Boxes
Também chamada Tile hover background
Uma grade inclinada de blocos se acende em cores quando o ponteiro passa por cima.
Onde usar
Fundos de hero
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.A
Border Beam
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).