Background & Ambient

Un pulso luminoso recorre una línea que conecta dos elementos.

Añade un efecto "Animated Beam" (también llamado connecting beam) en [dónde].
Un pulso luminoso corto debe recorrer la línea que conecta dos elementos, avanzando a ritmo constante de un extremo a otro y volviendo a empezar: suave y tranquilo.
Mantén siempre visible la línea de conexión, y deja el pulso quieto si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Los colores de un fondo degradado se desplazan, se mueven o giran lentamente.

Añade un fondo con degradado animado (Animated Gradient, también llamado gradient animation o moving gradient) en [dónde].
Los colores del degradado deben desplazarse lentamente por la zona en una deriva suave y continua, sin saltos visibles cuando el bucle se reinicia.
Mantén legible el texto encima sobre todos los colores, y detén el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una cuadrícula de líneas o cuadrados cuyas celdas aparecen, se desvanecen o parpadean.

Añade un fondo "Animated Grid Pattern" (también llamado flickering grid o grid background) en [dónde].
Una cuadrícula tenue de líneas debe quedarse fija mientras unas pocas celdas dispersas aparecen y se desvanecen lentamente en momentos distintos: discreto y sutil, nunca todas a la vez.
Mantenlo detrás del contenido sin capturar clics, y detén el parpadeo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Bandas de color suaves y difuminadas flotan como una aurora detrás del contenido.

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).

Líneas finas y luminosas recorren trayectorias y a veces estallan al chocar con una superficie.

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).

Una cuadrícula inclinada de baldosas se ilumina de color al pasar el puntero por encima.

Añade un efecto "Background Boxes" (también llamado tile hover background) en [dónde].
Llena el área con una cuadrícula inclinada de baldosas; cada baldosa por la que pase el puntero debe iluminarse al instante y luego apagarse despacio, dejando una estela corta.
Mantén las baldosas detrás del contenido para que no bloqueen los clics sobre él y, en pantallas táctiles, ilumina la baldosa que se toque.

Un destello brillante recorre el borde de una tarjeta.

Añade un efecto "Border Beam" (también llamado shine border o moving border) en [dónde].
Un destello corto y brillante debe recorrer el borde de la tarjeta a un ritmo parejo y tranquilo, en bucle y sin saltos visibles.
El efecto no debe cambiar el contenido ni el tamaño de la tarjeta; detén el destello si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una cuadrícula de puntos late o brilla en ondas.

Añade un fondo "Dot Pattern Glow" (también llamado dotted glow background o dot grid) en [dónde].
Una cuadrícula fina de puntos debe quedarse quieta mientras una banda suave de brillo la recorre despacio e ilumina los puntos por los que pasa: tranquilo y sutil.
Mantén los puntos lo bastante tenues para que el contenido encima siga legible y detén el brillo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una línea de luz se ensancha y proyecta un cono de luz sobre el título que tiene debajo.

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.

Haces de luz suaves se balancean sobre el fondo.

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).

Varios puntos de color se funden y se desplazan con suavidad, formando un fondo orgánico de muchos tonos.

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).

Trazos diagonales con estelas brillantes caen a través de una tarjeta o sección.

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).

Una textura fina y moteada cubre la página y a veces parpadea como el grano de una película.

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).

Muchos puntos pequeños flotan, se conectan o reaccionan al puntero por el fondo.

Añade un fondo de partículas ("Particles", también llamado floating particles o particle field) en [dónde].
Puntos pequeños de distintos tamaños deben flotar y desplazarse despacio por trayectorias suaves y errantes, cada uno a su propio ritmo: tranquilo y ligero.
Usa una cantidad moderada de puntos para que siga siendo liviano en dispositivos lentos, páusalo cuando esté fuera de pantalla y detenlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

La intensidad del desenfoque aumenta poco a poco hacia un borde para que el contenido se desvanezca con suavidad.

Añade un borde "Progressive Blur" (también llamado gradient blur edge) en [dónde].
El contenido que se desplaza hacia el borde debe volverse cada vez más borroso y suave, aumentando de forma gradual en lugar de cortarse en una línea dura.
Muestra el desenfoque solo en un borde que todavía tenga más contenido detrás y evita que la zona desenfocada bloquee los clics o el scroll.

Una cuadrícula en perspectiva inclinada avanza hacia el espectador como un suelo synthwave.

Añade un fondo "Retro Grid" (también llamado perspective grid o synthwave grid) en [dónde].
Un suelo de cuadrícula inclinado en perspectiva debe avanzar de forma constante hacia el espectador y desvanecerse en el horizonte: fluido e infinito.
Haz que el bucle sea continuo para que las líneas nunca salten y detén el desplazamiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Círculos concéntricos se expanden desde un punto central y se desvanecen.

Añade un efecto "Ripple Rings" (también llamado background ripple o concentric ripples) en [dónde].
Los anillos deben expandirse sin parar desde un punto central y desvanecerse a medida que crecen, uno tras otro y con el mismo espacio entre ellos: lento y constante.
Mantén el elemento central quieto en su lugar y detén las ondas si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Pequeños destellos brillantes aparecen y desaparecen alrededor de un texto o una sección.

Añade un efecto "Sparkles" (también llamado glitter o twinkle particles) en [dónde].
Pequeños destellos en forma de estrella deben aparecer, titilar y desvanecerse alrededor del texto en puntos dispersos y momentos aleatorios: ligero y rápido.
Que los destellos sean decorativos y queden ocultos para los lectores de pantalla, que nunca tapen el texto y detenlos si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un cono o foco de luz suave entra deslizándose y se posa iluminando parte del fondo.

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.

Estrellas diminutas titilan o se desplazan sobre un fondo oscuro como el espacio.

Añade un fondo "Starfield" (también llamado stars background o twinkling stars) en [dónde].
Estrellas diminutas de distintos tamaños deben titilar suavemente, cada una a su ritmo, mientras todo el campo se desplaza muy despacio: silencioso y tranquilo.
Usa una cantidad moderada de estrellas para que siga siendo liviano y detén el titileo y el desplazamiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las partículas giran en espiral alrededor de un centro como un remolino.

Añade un fondo "Vortex" (también llamado swirling particles) en [dónde].
Partículas pequeñas deben girar en espiral hacia dentro alrededor de un punto central como un remolino, apareciendo en el borde y desvaneciéndose al llegar al centro, en un giro fluido y continuo.
Usa una cantidad moderada de partículas, páusalo cuando esté fuera de pantalla y detén el giro si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Líneas o formas onduladas en capas ondean en horizontal.

Añade un "Wave Background" (también llamado wavy background o animated waves) en [dónde].
Varias formas de onda en capas deben desplazarse de lado a velocidades ligeramente distintas para que se superpongan y cambien como el agua: lento y suave.
Haz que cada onda se repita sin cortes ni saltos visibles y detén las ondas si el usuario prefiere movimiento reducido (prefers-reduced-motion).