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 de hover "Holographic Text" (também chamado de holographic foil text) em [onde].
Enquanto o ponteiro estiver sobre o texto, uma faixa de cores com cara de papel holográfico deve deslizar devagar e suavemente de um lado para o outro sobre as letras, e o texto deve voltar ao visual normal quando o ponteiro sair.
Mantenha as letras legíveis em todo momento do brilho e mostre o mesmo efeito no foco do teclado.
Também chamadaAurora Text, Rainbow Text Sweep, Gradient Text Color Wave
Texto preenchido com um degradê cujas cores mudam ou fluem sem parar.
Onde usar
Títulos de marca
Adicione um efeito "Animated Gradient Text" (também chamado de aurora text ou rainbow text sweep) em [onde].
As letras devem ser preenchidas com um degradê cujas cores fluem devagar e suavemente pelo texto, em um loop infinito e contínuo.
Mantenha o texto legível sobre o fundo o tempo todo e deixe as cores paradas se o usuário preferir movimento reduzido (prefers-reduced-motion).
Também chamadaAnimated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
Um brilho percorre as letras repetidamente.
Onde usar
Badges e etiquetas de anúncio
Adicione um efeito "Shimmer Text" (também chamado animated shiny text ou metallic shimmer text) em [onde].
Uma faixa de luz deve passar suavemente pelas letras da esquerda para a direita e se repetir depois de uma pausa curta.
Mantenha o texto legível sob o brilho e deixe-o parado se o usuário preferir movimento reduzido (prefers-reduced-motion).
Também chamadaGlare hover, Glare card, Magic card, Glare
Um brilho intenso segue o ponteiro pela superfície de um card como um reflexo.
Onde usar
Cards premium ou colecionáveis
Adicione um efeito "Glare / Holographic Card" (também chamado glare card ou glare hover) em [onde].
Um brilho suave e intenso deve seguir o ponteiro pela superfície do card como luz refletida nele, enquanto o card se inclina um pouco em direção ao ponteiro; os dois somem quando o ponteiro sai: suave e sutil.
Deixe os cliques passarem pela camada do brilho, mantenha o conteúdo legível por baixo e mostre o card sem brilho em telas touch.
O texto muda de escala, se move ou gira como um elemento gráfico em movimento, em vez de ficar estático.
Onde usar
Seções hero de marca
Adicione "Kinetic Typography" (também chamada de kinetic text) em [onde].
Linhas de texto grande e repetido devem deslizar para os lados em direções alternadas, em ritmo lento e constante, transformando as palavras em um gráfico em movimento.
Faça cada linha repetir sem saltos visíveis, garanta que leitores de tela leiam o texto só uma vez e pare o movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).
Também chamadaExplosive Letter Burst, Scatter Gather Letters
As letras se espalham no hover e voltam, ou explodem para fora na entrada.
Onde usar
Links divertidos
Adicione um efeito de hover "Letter Scatter" (também chamado de scatter gather letters ou explosive letter burst) em [onde].
Quando o ponteiro passar sobre o texto, cada letra deve voar um pouco na própria direção com um leve giro e depois se reagrupar suavemente na palavra quando o ponteiro sair.
Mantenha fixo o espaço da palavra no layout enquanto as letras se movem, faça os leitores de tela lerem como uma só palavra e mostre o mesmo efeito no foco do teclado.
Também chamadaText Shadow Animation, Dancing Shadow
Uma sombra listrada ou deslocada atrás das letras se anima em uma direção.
Onde usar
Títulos de destaque marcantes
Adicione um efeito "Line Shadow Text" (também chamado de text shadow animation ou dancing shadow) em [onde].
Atrás das letras, uma sombra deslocada feita de listras diagonais finas deve deslizar devagar e sem parar, enquanto as próprias letras ficam paradas e nítidas.
Faça o movimento das listras repetir sem emendas e deixe a sombra parada se o usuário preferir movimento reduzido (prefers-reduced-motion).