Light Rays
Também chamada God rays, Light shafts
Feixes de luz suaves balançam pelo fundo.
Onde usar
Cabeçalhos com atmosfera
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 "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).Animações parecidas
Spotlight
Também chamada Spotlight sweep, Light cone
Um cone ou foco de luz suave desliza até o lugar e ilumina parte do fundo.
Onde usar
Títulos de hero
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.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
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).Lamp Effect
Também chamada Lamp glow
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.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).Mais em Background & Ambient
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).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).