Light Rays
También llamado God rays, Light shafts
Haces de luz suaves se balancean sobre el fondo.
Se usa en
Cabeceras con atmósfera
Prompt
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 fondo "Light Rays" (también llamado god rays o light shafts) en [dónde].
Varios haces suaves y semitransparentes deben abrirse en abanico desde arriba y balancearse con suavidad de un lado a otro, aclarándose y atenuándose un poco: lento y atmosférico.
Mantén los haces detrás del contenido y lo bastante tenues para no perjudicar la lectura, y detenlos si el usuario prefiere movimiento reducido (prefers-reduced-motion).Animaciones parecidas
Spotlight
También llamado Spotlight sweep, Light cone
Un cono o foco de luz suave entra deslizándose y se posa iluminando parte del fondo.
Se usa en
Títulos de hero
Añade un efecto "Spotlight" (también llamado spotlight sweep o light cone) en [dónde].
Al cargar la página, un cono de luz suave debe entrar en diagonal desde la esquina y posarse sobre el título, ganando brillo al llegar: lento y fluido.
Reprodúcelo una sola vez y, si el usuario prefiere movimiento reducido (prefers-reduced-motion), muestra la luz ya en su sitio.Aurora Background
También llamado Northern lights gradient
Bandas de color suaves y difuminadas flotan como una aurora detrás del contenido.
Se usa en
Secciones hero
Añade un "Aurora Background" (también llamado northern lights gradient) en [dónde].
Bandas de color suaves y difuminadas deben flotar y mecerse lentamente detrás del contenido, superponiéndose y mezclándose como una aurora boreal: muy lento y onírico.
Mantén legible el texto encima, no vuelvas a difuminar las bandas en cada fotograma para que siga fluido, y detén la deriva si el usuario prefiere movimiento reducido (prefers-reduced-motion).Lamp Effect
También llamado Lamp glow
Una línea de luz se ensancha y proyecta un cono de luz sobre el título que tiene debajo.
Se usa en
Títulos de hero oscuros
Añade un "Lamp Effect" (también llamado lamp glow) en [dónde].
Cuando la sección entre en pantalla, una línea fina y luminosa debe ensancharse desde el centro y proyectar un cono de luz suave sobre el título de abajo, que aparece subiendo a su lugar: lento y fluido.
Reprodúcelo una sola vez y, si el usuario prefiere movimiento reducido (prefers-reduced-motion), muestra el título ya iluminado desde el principio.Background Beams
También llamado Light beams, Beam collision, Animated Path Lines, Background Lines, Wave Path Lines
Líneas finas y luminosas recorren trayectorias y a veces estallan al chocar con una superficie.
Se usa en
Fondos de hero
Añade un efecto "Background Beams" (también llamado light beams o background lines) en [dónde].
Trayectorias curvas y tenues deben quedarse en el fondo mientras destellos cortos y luminosos las recorren uno tras otro, a un ritmo tranquilo y constante.
Escalona los haces para que nunca se muevan a la par, mantenlos detrás del contenido y detenlos si el usuario prefiere movimiento reducido (prefers-reduced-motion).Más en Background & Ambient
Mesh Gradient (degradado de malla)
También llamado Animated mesh gradient
Varios puntos de color se funden y se desplazan con suavidad, formando un fondo orgánico de muchos tonos.
Se usa en
Fondos de landing page
Añade un fondo de degradado de malla ("Mesh Gradient", también llamado animated mesh gradient) en [dónde].
Varias manchas de color suaves deben fundirse entre sí y desplazarse despacio por el área, para que el fondo cambie sin parar de forma orgánica: muy lento y fluido.
Mantén legible el contenido de encima en cada mezcla de colores y detén el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).Meteors
También llamado Meteor shower, Shooting Stars
Trazos diagonales con estelas brillantes caen a través de una tarjeta o sección.
Se usa en
Acentos en tarjetas y hero
Añade un efecto "Meteors" (también llamado meteor shower o shooting stars) en [dónde].
Unos pocos trazos pequeños con estelas que se desvanecen deben cruzar el área en diagonal en momentos aleatorios, cada uno rápido y luego desaparece.
Que sean pocos para que sigan siendo un acento, recórtalos en los bordes del área y detenlos si el usuario prefiere movimiento reducido (prefers-reduced-motion).Noise / Grain Texture
También llamado Film grain, Noise background
Una textura fina y moteada cubre la página y a veces parpadea como el grano de una película.
Se usa en
Dar profundidad táctil a los degradados
Añade una capa "Noise / Grain Texture" (también llamada film grain o noise background) en [dónde].
Una textura moteada, fina y tenue debe cubrir la superficie y parpadear a pequeños saltos como el grano de una película: sutil, nunca tan fuerte que ensucie el contenido.
Deja que los clics atraviesen la capa, genera la textura una sola vez en lugar de en cada fotograma y mantenla quieta si el usuario prefiere movimiento reducido (prefers-reduced-motion).