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
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 "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).Animaciones parecidas
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).Animated Gradient (degradado animado)
También llamado Gradient animation, Moving gradient, Background gradient animation
Los colores de un fondo degradado se desplazan, se mueven o giran lentamente.
Se usa en
Fondos de hero, botones
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).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
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).Wave Background
También llamado Wavy background, Animated waves
Líneas o formas onduladas en capas ondean en horizontal.
Se usa en
Separadores de sección, pies de hero
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).Más en Background & Ambient
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).Pasa el ratón por encima
Background Boxes
También llamado Tile hover background
Una cuadrícula inclinada de baldosas se ilumina de color al pasar el puntero por encima.
Se usa en
Fondos de hero
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.A
Border Beam
También llamado Shine border, Animated border, Glowing effect, Moving Border
Un destello brillante recorre el borde de una tarjeta.
Se usa en
Tarjetas destacadas, CTA
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).