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
Variações
- border beam
- shine border
- glowing effect
- Moving Border
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 "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).Animações parecidas
A
Passe o mouse por cima
Uma borda em degradê se anima ao redor do elemento e se expande quando o ponteiro passa por cima.
Onde usar
Botões, cards
Adicione um efeito "Hover Border Gradient" em [onde].
Um brilho curto em degradê deve ficar parado em uma parte da borda; enquanto o ponteiro estiver sobre o elemento, ele deve percorrer a borda em ritmo constante enquanto a borda inteira se ilumina com um brilho suave.
Anime a borda só durante o hover e deixe-a parada se o usuário preferir movimento reduzido (prefers-reduced-motion).A
B
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
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).A
Passe o mouse por cima
Shine Sweep
Também chamada Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button
Ao passar o ponteiro, uma faixa diagonal de luz atravessa o elemento de um lado ao outro.
Onde usar
Botões, cards, badges
Adicione um efeito de hover "Shine Sweep" (também chamado sheen, shiny button, shine on hover, glint, shimmer ou shimmer button) em [onde].
Uma faixa diagonal de luz suave deve atravessar o elemento da esquerda para a direita, repetindo com uma pausa curta enquanto o ponteiro estiver sobre ele.
Mantenha a faixa recortada dentro do elemento, pare-a quando o ponteiro sair e não a reproduza se o usuário preferir movimento reduzido (prefers-reduced-motion).Mais em Background & Ambient
Dot Pattern Glow
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).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.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).