Sustituye [dónde] por la parte de tu página y pega el prompt en tu agente de IA. Cada prompt incluye el nombre de la animación, así la próxima vez puedes pedirla solo por su nombre.
Añade un efecto "Liquid Fill Text" (también llamado water fill text) en [dónde].
Las letras con contorno deben llenarse de un líquido cuya superficie ondulada avanza de lado mientras el nivel sube y baja despacio, en un bucle suave y continuo.
Mantén la palabra como texto real para los lectores de pantalla y deja el líquido en un nivel fijo si el usuario prefiere movimiento reducido (prefers-reduced-motion).
Unas letras grandes funcionan como una ventana que muestra un vídeo en reproducción dentro de ellas.
Se usa en
Títulos hero
Añade un efecto "Video Text" (también llamado text video mask) en [dónde].
Unas letras grandes y gruesas deben funcionar como una ventana a un vídeo en reproducción, de modo que la imagen en movimiento solo se vea dentro de la forma de las letras.
Mantén el vídeo silenciado y en bucle sin controles, ofrece las palabras como texto real para los lectores de pantalla y muestra un fotograma fijo si el usuario prefiere movimiento reducido (prefers-reduced-motion).
También llamadoGradient Outline Text Hover, Text Fill on Hover
Una palabra con contorno se rellena o se ilumina con un degradado que sigue al puntero o la recorre de lado a lado.
Se usa en
Palabras grandes de exhibición, pies de página
Añade un "Text Hover Effect" (también llamado text fill on hover o gradient outline text hover) en [dónde].
La palabra debe empezar solo con contorno y, mientras el puntero esté encima, un relleno sólido debe entrar suavemente de izquierda a derecha y retirarse cuando el puntero salga.
Mantén legible la palabra con contorno antes del relleno y muestra el mismo efecto con el foco del teclado.
Los contornos de las letras se dibujan como un trazo antes de que aparezca el relleno.
Se usa en
Logotipos y palabras del hero
Añade un efecto "Stroke Text Draw" (también llamado draw in text o animated stroke text) en [dónde].
Los contornos de las letras deben dibujarse solos con suavidad y, una vez completos, el relleno debe aparecer con un fundido.
Reprodúcelo una sola vez al cargar, mantén la palabra accesible como texto real y muestra el texto ya relleno si el usuario prefiere movimiento reducido (prefers-reduced-motion).
También llamadoLine Mask Reveal, Split Text Overflow Hidden Reveal, Text Masking
El texto sube desde detrás de una línea de recorte, como si surgiera de la nada.
Se usa en
Titulares editoriales
Añade una entrada de texto "Mask Reveal" (también llamada line mask reveal o text masking) en [dónde].
Cada línea debe subir desde detrás de un borde invisible, como si surgiera de la nada, una tras otra, rápida y suave, sin rebote.
Reprodúcela una sola vez cuando el texto entre en pantalla al hacer scroll y muestra el texto directamente, sin movimiento, si el usuario prefiere movimiento reducido (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 caen en columnas, como la lluvia de código de Matrix.
Se usa en
Temáticas hacker
Añade un efecto "Matrix Text" (también llamado digital rain text) en [dónde].
Columnas de caracteres deben caer de forma constante a velocidades ligeramente distintas, cada una con un carácter brillante al frente y una estela que se desvanece detrás.
Trátalo como decoración oculta para los lectores de pantalla, mantenlo ligero y detenlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).
Las letras gotean y se estiran hacia abajo como si se derritieran.
Se usa en
Títulos de terror o curiosos
Añade un efecto "Melting Text" en [dónde].
Las letras deben hundirse lentamente mientras unas gotas se estiran por debajo, como si se derritieran, y quedarse quietas con un aspecto derretido.
Reprodúcelo una sola vez cuando el texto entre en pantalla, mantén la palabra legible al final y omite el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).