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
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 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).Animações parecidas
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).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).Animated Map Arcs
Também chamada World Map Animated Lines, Globe Arcs
Linhas e pontos se animam entre locais em um mapa ou globo.
Onde usar
Visuais de alcance global
Adicione "Animated Map Arcs" (também chamado globe arcs) em [onde].
Linhas curvas devem se desenhar uma após a outra entre locais em um mapa pontilhado e depois se recolher em direção ao destino enquanto um anel suave pulsa ali: calmo e constante.
Escalone os arcos para nunca se moverem ao mesmo tempo, mantenha o loop contínuo e pause-o se o usuário preferir movimento reduzido (prefers-reduced-motion).Motion Path
Também chamada Animate Along Path, Offset Path Animation
Um elemento percorre um caminho curvo personalizado e pode girar para acompanhá-lo.
Onde usar
Avião ou ponto em uma rota e elementos decorativos em movimento
Adicione uma animação "Motion Path" (também chamada animate along path) em [onde].
Um elemento pequeno deve percorrer uma rota curva personalizada em ritmo lento e constante, girando para ficar de frente para a direção em que se move.
Use uma rota fechada para o loop se repetir sem saltos, e faça a rota se ajustar ao contêiner em vez de ficar com tamanho fixo.Mais em Background & Ambient
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).Animated Grid Pattern
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).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).