Starfield
También llamado Stars background, Twinkling stars
Estrellas diminutas titilan o se desplazan sobre un fondo oscuro como el espacio.
Se usa en
Heroes con temática espacial o nocturna
Variantes
- twinkling
- warp / fly-through
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 "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).Animaciones parecidas
ABC
Sparkles
También llamado Glitter, Twinkle particles, Sparkles Text, Text Sparkle Particle Highlight
Pequeños destellos brillantes aparecen y desaparecen alrededor de un texto o una sección.
Se usa en
Titulares, acentos premium
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).Particles (partículas)
También llamado Floating particles, Particle field
Muchos puntos pequeños flotan, se conectan o reaccionan al puntero por el fondo.
Se usa en
Fondos de hero y de sección
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).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).Más en Background & Ambient
Vortex
También llamado Swirling particles
Las partículas giran en espiral alrededor de un centro como un remolino.
Se usa en
Fondos de hero impactantes
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).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).A
B
Animated Beam
También llamado Connecting beam
Un pulso luminoso recorre una línea que conecta dos elementos.
Se usa en
Diagramas de integraciones o de flujo de datos
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).