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
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 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).Animaciones parecidas
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).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).Animated Map Arcs
También llamado World Map Animated Lines, Globe Arcs
Líneas y puntos se animan entre ubicaciones de un mapa o un globo terráqueo.
Se usa en
Visuales de alcance global
Añade "Animated Map Arcs" (también llamado globe arcs) en [dónde].
Unas líneas curvas deben dibujarse una tras otra entre ubicaciones de un mapa de puntos y luego recogerse hacia su destino mientras allí late un anillo suave: tranquilo y constante.
Escalona los arcos para que nunca se muevan a la vez, mantén el bucle sin cortes y páusalo si el usuario prefiere movimiento reducido (prefers-reduced-motion).Motion Path
También llamado Animate Along Path, Offset Path Animation
Un elemento recorre una trayectoria curva personalizada y puede girar para seguirla.
Se usa en
Aviones o puntos sobre una ruta y viajeros decorativos
Añade una animación "Motion Path" (también llamada animate along path) en [dónde].
Un elemento pequeño debe recorrer una ruta curva personalizada a un ritmo lento y constante, girando para mirar hacia donde avanza.
Usa una ruta cerrada para que el bucle se repita sin saltos, y haz que la ruta se adapte al tamaño de su contenedor en lugar de quedarse con un tamaño fijo.Más en Background & Ambient
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).Animated Grid Pattern
También llamado Flickering grid, Grid background
Una cuadrícula de líneas o cuadrados cuyas celdas aparecen, se desvanecen o parpadean.
Se usa en
Heros de tecnología y SaaS
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).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).