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 "Liquid Fill Text" (também chamado de water fill text) em [onde].
As letras contornadas devem se encher de um líquido cuja superfície ondulada rola para o lado enquanto o nível sobe e desce devagar, em um loop suave e contínuo.
Mantenha a palavra disponível como texto real para leitores de tela e deixe o líquido em um nível parado se o usuário preferir movimento reduzido (prefers-reduced-motion).
Letras grandes funcionam como uma janela que mostra um vídeo em reprodução dentro delas.
Onde usar
Títulos hero
Adicione um efeito "Video Text" (também chamado de text video mask) em [onde].
Letras grandes e grossas devem funcionar como uma janela para um vídeo em reprodução, de modo que as imagens em movimento apareçam só dentro das formas das letras.
Mantenha o vídeo mudo e em loop, sem controles, ofereça as palavras como texto real para leitores de tela e mostre um quadro estático se o usuário preferir movimento reduzido (prefers-reduced-motion).
Também chamadaGradient Outline Text Hover, Text Fill on Hover
Uma palavra em contorno é preenchida ou iluminada por um degradê que segue o ponteiro ou passa por ela.
Onde usar
Palavras grandes de destaque, rodapés
Adicione um "Text Hover Effect" (também chamado de text fill on hover ou gradient outline text hover) em [onde].
A palavra deve começar só com o contorno e, enquanto o ponteiro estiver sobre ela, um preenchimento sólido deve entrar suavemente da esquerda para a direita e recuar quando o ponteiro sair.
Mantenha a palavra em contorno legível antes do preenchimento e mostre o mesmo efeito no foco do teclado.
Os contornos das letras são desenhados como um traço antes de o preenchimento aparecer.
Onde usar
Logos e palavras do hero
Adicione um efeito "Stroke Text Draw" (também chamado draw in text ou animated stroke text) em [onde].
Os contornos das letras devem se desenhar sozinhos com suavidade e, quando estiverem completos, o preenchimento deve aparecer com um fade.
Reproduza só uma vez ao carregar, mantenha a palavra acessível como texto real e mostre o texto já preenchido se o usuário preferir movimento reduzido (prefers-reduced-motion).
Também chamadaLine Mask Reveal, Split Text Overflow Hidden Reveal, Text Masking
O texto sobe de trás de uma linha de recorte, como se surgisse do nada.
Onde usar
Manchetes editoriais
Adicione uma entrada de texto "Mask Reveal" (também chamada line mask reveal ou text masking) em [onde].
Cada linha deve subir de trás de uma borda invisível, como se surgisse do nada, uma após a outra, rápida e suave, sem quique.
Reproduza só uma vez quando o texto entrar na tela ao rolar e mostre o texto direto, sem movimento, se o usuário preferir movimento reduzido (prefers-reduced-motion).
Q
R
U
P
D
H
LY
O
S
G
K
X
BA
F
J
Z
V
M
EH
L
C
N
W
T
IX
B
Q
R
U
P
DM
E
Y
O
S
G
KT
I
A
F
J
Z
VP
D
H
L
C
N
W
Caracteres verdes caem em colunas, como a chuva de código de Matrix.
Onde usar
Temas hacker
Adicione um efeito "Matrix Text" (também chamado digital rain text) em [onde].
Colunas de caracteres devem cair de forma constante em velocidades um pouco diferentes, cada uma com um caractere brilhante na frente e um rastro que se apaga atrás.
Trate como decoração oculta para leitores de tela, mantenha leve e pare a animação se o usuário preferir movimento reduzido (prefers-reduced-motion).
As letras escorrem e se esticam para baixo, como se estivessem derretendo.
Onde usar
Títulos de terror ou divertidos
Adicione um efeito "Melting Text" em [onde].
As letras devem afundar devagar enquanto gotas se esticam por baixo, como se estivessem derretendo, e parar em um visual derretido e imóvel.
Reproduza só uma vez quando o texto entrar na tela, mantenha a palavra legível no final e não anime se o usuário preferir movimento reduzido (prefers-reduced-motion).