Animaciones web en vivo. Prompts listos para pegar.

El elemento empieza reducido y desplazado, y luego entra deslizándose mientras crece hasta su tamaño completo.

Añade una animación de entrada "Back In" (también llamada back in up o back in down) en [dónde].
El elemento debe llegar desde fuera de un borde, reducido y algo transparente, y crecer hasta su tamaño completo al alcanzar su sitio: un movimiento deliberado en dos pasos, no una aparición rápida.
Reprodúcela una sola vez y muestra el elemento en su lugar sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se encoge y se desliza hacia un borde mientras desaparece.

Añade una animación de salida "Back Out" en [dónde].
El elemento debe encogerse un poco en su sitio y luego deslizarse hacia un borde mientras desaparece: una salida deliberada en dos pasos, no un simple desvanecimiento rápido.
Quita el elemento solo cuando termine la animación para que el diseño no salte a mitad del movimiento, y quítalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento empieza muy desenfocado y se va enfocando, a menudo mientras se desliza o aparece.

Añade una animación de entrada "Blur In" (también llamada text focus in, focus in o blur text reveal) en [dónde].
El contenido debe empezar muy desenfocado y transparente, y luego enfocarse en su sitio: suave y más bien lento, sin desplazamiento.
Reprodúcela una sola vez y muestra el texto nítido de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se desenfoca progresivamente mientras desaparece o se desliza fuera.

Añade una animación de salida "Blur Out" (también llamada text blur out o smoky text dissipate) en [dónde].
El contenido debe desenfocarse cada vez más mientras desaparece en su sitio: suave y más bien lento, como si se disolviera.
Oculta o quita el elemento solo cuando termine el desenfoque, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento entra con un rebote que se pasa y se asienta, ya sea creciendo o cayendo desde un borde.

Añade una animación de entrada "Bounce In" (también llamada bounce in down o bounce in up) en [dónde].
El elemento debe crecer desde pequeño, pasarse de su tamaño completo y tambalearse unas cuantas veces antes de asentarse: rápido y elástico.
Reprodúcela una sola vez para que no siga llamando la atención, y muestra el elemento en su lugar sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento rebota ligeramente y luego se encoge o sale volando por un borde.

Añade una animación de salida "Bounce Out" en [dónde].
El elemento debe hundirse un poco, crecer algo más allá de su tamaño y luego encogerse mientras desaparece: corto y elástico.
Quítalo del diseño solo cuando termine la animación, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un clip-path o una máscara crece desde un borde o un punto y va descubriendo la imagen o el texto.

Añade un efecto de entrada "Clip Reveal" (también llamado mask reveal, wipe reveal o image reveal) en [dónde].
Un borde de recorte debe barrer de izquierda a derecha para ir descubriendo el contenido mientras este permanece quieto: fluido, con inicio y final suaves.
Reserva el espacio del elemento desde el principio para que nada se mueva, y muéstralo descubierto por completo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento pasa de totalmente transparente a totalmente opaco en su sitio, o al revés al salir.

Añade una animación "Fade In / Fade Out" (también llamada fade) en [dónde].
El elemento debe pasar de totalmente transparente a totalmente visible en su sitio al aparecer, y desvanecerse igual al salir: suave, sin desplazamiento ni cambio de escala.
Cuando haya desaparecido, asegúrate de que ya no se pueda hacer clic en él ni llegar con el teclado, y cambia al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento aparece mientras se desplaza una distancia corta desde un lado hasta su posición final.

Añade una animación de entrada "Fade In Directional" (también llamada fade in left, fade in right o fade in down) en [dónde].
El elemento debe aparecer mientras se desplaza una distancia corta desde un lado hasta su posición final: rápido y fluido, frenando al llegar, sin rebote.
Reprodúcela una sola vez y muestra el elemento en su lugar sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento desaparece mientras se desplaza en una dirección.

Añade una animación de salida "Fade Out Directional" (también llamada fade out up o fade out down) en [dónde].
El elemento debe desaparecer mientras se desplaza una distancia corta en una dirección: rápido, acelerando al salir.
Quítalo del diseño solo cuando termine el desvanecimiento para que el contenido vecino no salte antes de tiempo, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento sube una distancia corta mientras aparece, como si se asentara en su lugar.

Añade una animación de entrada "Fade Up" (también llamada fade-in-up o reveal on scroll) en [dónde].
Los elementos deben subir ligeramente mientras aparecen la primera vez que entran en pantalla al hacer scroll: sutil y rápido, sin rebote.
Reprodúcela una sola vez y omite el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se enciende con destellos rápidos de opacidad, como un letrero de neón averiado, antes de quedarse visible.

Añade una animación de entrada "Flicker In" en [dónde].
El elemento debe encenderse y apagarse unas cuantas veces a intervalos irregulares, como un letrero de neón averiado, antes de quedarse encendido: destellos secos, sin desplazamiento.
Reprodúcela una sola vez, con pocos destellos y lo bastante lentos para no afectar a personas sensibles a las luces intermitentes, y muéstralo encendido de forma fija si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento da una vuelta completa sobre el eje Y mientras se acerca un poco al espectador y vuelve.

Añade una animación "Flip" en [dónde].
El elemento debe dar una vuelta completa sobre su eje vertical mientras se acerca un poco al espectador, y luego volver con una leve reducción de tamaño: vivo pero breve.
Dale perspectiva para que el giro se lea como profundidad, reprodúcela una sola vez en lugar de en bucle, y omite el giro si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento gira en 3D sobre su eje horizontal o vertical, de estar de canto a quedar de frente al espectador.

Añade una animación de entrada "Flip In" (también llamada flip in X o flip in Y) en [dónde].
El elemento debe empezar de canto y girar sobre su eje horizontal hasta quedar de frente, pasándose un poco y volviendo antes de asentarse: rápido, con un pequeño bamboleo.
Dale perspectiva para que el giro se lea como profundidad, y muéstralo de frente sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento gira en 3D hasta quedar de canto e invisible.

Añade una animación de salida "Flip Out" (también llamada flip out X o flip out Y) en [dónde].
El elemento debe inclinarse un poco hacia atrás y luego girar sobre su eje vertical hasta quedar de canto y desaparecer: rápido y nítido.
Dale perspectiva para que el giro se lea como profundidad, quita el elemento solo cuando termine el giro, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento gira sobre una bisagra en la esquina superior izquierda, se balancea y luego cae fuera de la pantalla.

Añade una animación de salida "Hinge" en [dónde].
El elemento debe descolgarse desde su esquina superior izquierda como si se hubiera soltado un tornillo, balancearse de un lado a otro y luego caer fuera de la pantalla mientras desaparece: lento, cómico y deliberado.
Deja que caiga por encima del resto del contenido sin empujar el diseño ni añadir barras de desplazamiento, quítalo cuando haya caído, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento surge desde un estado pequeño y girado, se pasa y se asienta como un muñeco sorpresa de resorte.

Añade una animación de entrada "Jack In The Box" en [dónde].
El elemento debe surgir desde un estado diminuto e inclinado, anclado en su borde inferior, balancearse de lado a lado pasando de la vertical y asentarse: elástico y divertido.
Reprodúcela una sola vez y muestra el elemento en su lugar sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento entra disparado desde un lado con una inclinación que se endereza al llegar.

Añade una animación de entrada "Light Speed In" (también llamada lightspeed in) en [dónde].
El elemento debe entrar muy rápido desde un lado, inclinado como si fuera a toda velocidad, corregir de más la inclinación una vez y enderezarse al llegar: rápido e impactante, frenando al final.
Evita que genere una barra de desplazamiento horizontal mientras sigue fuera de la pantalla, y muéstralo en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se inclina y sale disparado hacia un lado mientras se desvanece.

Añade una animación de salida "Light Speed Out" (también llamada lightspeed out) en [dónde].
El elemento debe inclinarse y salir disparado hacia un lado mientras se desvanece: rápido, acelerando al irse.
Evita que genere una barra de desplazamiento horizontal al cruzar el borde, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se reduce desde un estado grande, borroso y transparente hasta quedar nítido, como una bocanada de humo, o al revés al salir.

Añade una animación "Puff In / Puff Out" (también llamada puff) en [dónde].
Al aparecer, el elemento debe reducirse desde un estado grande, borroso y transparente hasta quedar nítido, como una bocanada de humo que se asienta; al salir, debe volver a hincharse en un desenfoque y desvanecerse: suave y bastante rápido.
Evita que el estado agrandado empuje el diseño o genere barras de desplazamiento, y cambia al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento entra rodando desde la izquierda como una rueda mientras aparece.

Añade una animación de entrada "Roll In" en [dónde].
El elemento debe entrar rodando desde la izquierda como una rueda, girando mientras avanza, a la vez que aparece: suave, frenando al llegar.
Reprodúcela una sola vez y muestra el elemento en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento sale rodando hacia la derecha mientras se desvanece.

Añade una animación de salida "Roll Out" en [dónde].
El elemento debe salir rodando hacia la derecha como una rueda, girando mientras avanza, a la vez que se desvanece: suave, acelerando al irse.
Quítalo del diseño solo cuando haya terminado de rodar y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento entra girando alrededor de una esquina o de su centro mientras aparece.

Añade una animación de entrada "Rotate In" (también llamada rotate in down left) en [dónde].
El elemento debe girar hasta su sitio alrededor de su esquina inferior izquierda, partiendo de un ángulo inclinado, mientras aparece: suave y sin prisa, frenando al asentarse.
Reprodúcela una sola vez y muestra el elemento en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento gira alrededor de un punto de pivote mientras se desvanece.

Añade una animación de salida "Rotate Out" en [dónde].
El elemento debe girar sobre su centro, algo más de media vuelta, mientras se desvanece: suave, acelerando al irse.
Quítalo solo cuando termine el giro y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se desliza desde fuera del borde de su contenedor hasta su posición de reposo, sin desvanecerse.

Añade una animación de entrada "Slide In" (también llamada slide in left, slide in right, slide in up o slide in down) en [dónde].
El elemento debe deslizarse desde más allá del borde de su contenedor hasta su sitio, totalmente opaco todo el tiempo: rápido, frenando con suavidad y sin rebote.
Recórtalo en el borde del contenedor para que no se superponga a los elementos vecinos ni genere barras de desplazamiento mientras está fuera, y muéstralo en su sitio si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se desliza más allá del borde de un contenedor y desaparece.

Añade una animación de salida "Slide Out" (también llamada slide out up o slide out down) en [dónde].
El elemento debe deslizarse más allá del borde de su contenedor y desaparecer, sin perder opacidad: rápido, acelerando al irse.
Recórtalo en el borde del contenedor, ocúltalo al teclado y a los lectores de pantalla cuando ya no esté a la vista, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Los elementos de un grupo se animan uno tras otro con un pequeño retraso, formando una ola en lugar de aparecer todos a la vez.

Añade una animación "Stagger" (también llamada staggered animation o cascada) en [dónde].
Los elementos deben aparecer subiendo uno tras otro con un retraso corto y uniforme, para que el grupo se vea como una ola rápida y no todos a la vez.
Mantén la secuencia breve aunque la lista sea larga, reprodúcela una sola vez al entrar en pantalla y omite el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento gira y crece desde un punto mientras aparece.

Añade una animación de entrada "Swirl In" (también llamada swirl in forward) en [dónde].
El elemento debe girar bastante más de una vuelta completa mientras crece desde un solo punto hasta su tamaño completo y aparece: rápido al principio, frenando al asentarse.
Reprodúcela una sola vez en un único elemento en lugar de en todo un grupo, y muéstralo en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las letras empiezan muy separadas y tenues, y se juntan hasta el espaciado normal mientras aparecen.

Añade una animación de texto "Tracking In" (también llamada text tracking in o letter-spacing in) en [dónde].
Las letras deben empezar muy separadas y tenues, y juntarse hasta el espaciado normal mientras se vuelven totalmente visibles: suave, frenando al final.
Mantén el texto centrado y en una sola línea mientras cambia el espaciado para que el diseño de alrededor no se mueva, y muéstralo con el espaciado normal si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento crece desde un estado pequeño y transparente hasta su tamaño completo mientras aparece.

Añade una animación de entrada "Zoom In" (también llamada scale in) en [dónde].
El elemento debe crecer de pequeño y transparente a su tamaño completo mientras aparece: rápido y suave, sin pasarse de tamaño.
Escálalo desde su centro sin afectar al diseño que lo rodea, y muéstralo en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se encoge y se desvanece hasta desaparecer.

Añade una animación de salida "Zoom Out" (también llamada scale out) en [dónde].
El elemento debe encogerse hacia su centro mientras se desvanece hasta desaparecer: rápido, acelerando al irse.
Quítalo del diseño y del foco del teclado solo cuando haya desaparecido, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento da saltos arriba y abajo que van perdiendo fuerza.

Añade un efecto de atención "Bounce" en [dónde].
El elemento debe saltar hacia arriba y volver a caer en unos cuantos rebotes rápidos, cada vez más pequeños, con un ligero aplastamiento al aterrizar.
Reprodúcelo una sola vez al activarse en lugar de en bucle, y omítelo para los usuarios que prefieren movimiento reducido.

El elemento parpadea alternando rápidamente su opacidad.

Añade un efecto de atención "Flash" (también llamado blink) en [dónde].
El elemento debe parpadear desvaneciéndose y volviendo a aparecer rápidamente dos veces, y luego quedarse totalmente visible.
Reprodúcelo una sola vez en lugar de como un parpadeo sin fin, y omítelo para los usuarios que prefieren movimiento reducido, porque un parpadeo rápido puede resultar molesto.

La opacidad del elemento parpadea de forma irregular, como una luz que falla.

Añade un efecto "Flicker" (también llamado flickering) en [dónde].
El elemento debe mantenerse estable la mayor parte del tiempo y atenuarse en breves tartamudeos irregulares, como un neón que falla.
Mantén un ritmo irregular en lugar de uniforme, evita destellos rápidos a plena intensidad y detenlo para los usuarios que prefieren movimiento reducido.

El elemento oscila de lado a lado con una ligera rotación, como una cabeza que dice que no.

Añade un efecto de atención "Head Shake" (también llamado headshake o no shake) en [dónde].
El elemento debe girar rápido de lado a lado con una ligera torsión, como una cabeza que dice que no, y cada giro debe ser más pequeño que el anterior hasta quedarse quieto.
Reprodúcelo una vez cada vez que se active, por ejemplo ante una acción rechazada, y evita que el diseño de alrededor se mueva.

El elemento cambia de tamaño con un ritmo de doble latido, como un corazón que late.

Añade un efecto "Heartbeat" (también llamado heart beat) en [dónde].
El elemento debe hincharse y relajarse en un doble latido rápido y luego descansar un momento antes del siguiente, como un corazón que late.
Repítelo en bucle sin cortes manteniendo la pausa entre latidos, y detenlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se inclina de un lado a otro con una amplitud cada vez menor, como una gelatina que tiembla.

Añade un efecto de atención "Jello" (también llamado jelly) en [dónde].
El elemento debe inclinarse de un lado a otro como una gelatina que tiembla: fuerte al principio y asentándose rápido hasta quedar quieto.
Reprodúcelo una vez al activarse y conserva el espacio que ocupa el elemento para que el contenido cercano no se desplace.

Una copia del elemento se agranda y se desvanece una y otra vez, como la onda de un radar.

Añade un efecto "Ping" (también llamado radar ping o pulse ring) en [dónde].
Una copia del elemento debe crecer hacia fuera y desvanecerse, una y otra vez a un ritmo constante, mientras el elemento en sí se queda quieto.
Dibuja el anillo en una capa aparte para que nunca cambie el diseño, y detén el bucle si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se agranda o se atenúa suavemente, una y otra vez.

Añade un efecto "Pulse" (también llamado pulsing) en [dónde].
El elemento debe crecer suavemente y volver con un ritmo lento y constante: sutil, sin rebote.
Repítelo en bucle sin cortes y sin mover el diseño de alrededor, y detenlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se estira a lo ancho y se aplasta a lo alto en pasos elásticos antes de volver a la normalidad.

Añade un efecto de atención "Rubber Band" (también llamado rubberband) en [dónde].
El elemento debe estirarse a lo ancho y aplastarse a lo alto, y luego rebotar con unos cuantos pasos elásticos más pequeños hasta quedarse en su tamaño normal.
Reprodúcelo una vez al activarse y evita que el diseño de alrededor se desplace mientras se estira.

El elemento tiembla rápido de un lado a otro sobre un solo eje.

Añade un efecto "Shake" (también llamado error shake o invalid input shake) en [dónde].
El elemento debe temblar rápido a izquierda y derecha unas cuantas veces y detenerse justo donde empezó: rápido y firme.
Reprodúcelo una vez cada vez que ocurra el error en lugar de repetirlo en bucle, y acompáñalo de un mensaje de error visible para que el significado no dependa solo del movimiento.

El elemento gira sin parar a velocidad constante.

Añade un efecto "Spin" (también llamado spinner o rotate loop) en [dónde].
El elemento debe girar sin parar a una velocidad constante y uniforme, sin easing entre vueltas.
Haz que el bucle no tenga cortes, dale al spinner una etiqueta de carga accesible, y ralentízalo o detenlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se balancea de un lado a otro desde su borde superior, como un péndulo cuya amplitud se va reduciendo.

Añade un efecto de atención "Swing" en [dónde].
El elemento debe balancearse de un lado a otro como un cartel colgante, empezando con un vaivén amplio que se apaga rápido.
Haz que pivote desde su borde superior y no desde el centro, y reprodúcelo una vez al activarse.

El elemento se agranda, se sacude girando un poco y vuelve a su tamaño, como una pequeña celebración.

Añade un efecto de atención "Tada" en [dónde].
El elemento debe encogerse un poco, luego crecer y sacudirse de lado a lado con una inclinación rápida antes de volver a su tamaño normal, como una pequeña celebración.
Reprodúcelo una vez, por ejemplo justo después de un éxito, y omítelo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento tiembla muy rápido con pequeñas sacudidas en varias direcciones, como un móvil que vibra.

Añade un efecto de atención "Vibrate" (también llamado buzz o vibration) en [dónde].
El elemento debe temblar con sacudidas diminutas y rápidas en distintas direcciones durante un instante, como un móvil que vibra, y luego quedarse quieto.
Mantén el movimiento muy pequeño para que el contenido siga siendo legible, y reprodúcelo una vez por alerta en lugar de repetirlo en bucle.

El elemento se balancea de lado a lado inclinándose, como un objeto inestable.

Añade un efecto de atención "Wobble" en [dónde].
El elemento debe balancearse de lado a lado con una inclinación, empezando con un vaivén grande que se reduce en cada oscilación hasta quedarse quieto.
Reprodúcelo una vez al activarse y evita que el contenido vecino se desplace.

Un encabezado se oculta al hacer scroll hacia abajo y vuelve a aparecer al hacer scroll hacia arriba.

Añade un "Hide on Scroll Header" (también llamado headroom o auto-hide navbar) en [dónde].
El encabezado debe deslizarse hacia arriba y ocultarse cuando el lector hace scroll hacia abajo, y volver a entrar con cualquier scroll hacia arriba: rápido y suave, reaccionando a la dirección y no a la distancia.
Muéstralo siempre en la parte superior de la página, ignora los pequeños temblores del scroll, y mantenlo visible mientras algo dentro de él tenga el foco del teclado.

El scroll vertical desplaza de lado una fila de paneles fijada en pantalla.

Añade una "Horizontal Scroll Section" (también llamada horizontal scrolling o scroll-jacked horizontal gallery) en [dónde].
Cuando la sección llegue arriba, debe quedarse fijada mientras el scroll hacia abajo desplaza su fila de paneles de lado, y soltarse cuando el último panel esté a la vista.
Vincula el movimiento lateral directamente a la posición del scroll para que al volver atrás se invierta, y usa una fila normal deslizable en pantallas pequeñas o si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las capas se mueven a distintas velocidades respecto al scroll para crear sensación de profundidad.

Añade un efecto de scroll "Parallax" (también llamado parallax scrolling o parallax layers) en [dónde].
Las capas de fondo deben moverse más despacio que el contenido al hacer scroll, y la más lejana, menos que ninguna, para dar una sutil sensación de profundidad.
Mantenlo ligado a la posición del scroll sin retraso, deja el texto en la capa de velocidad normal, y desactiva el efecto si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un elemento se queda fijo en su sitio durante un tramo del scroll mientras el resto del contenido o la animación avanza.

Añade un efecto de scroll "Pinning" (también llamado pinned section o sticky section) en [dónde].
Un panel debe quedarse fijo en su sitio mientras el contenido de al lado pasa con el scroll, cambiando según el paso que se está leyendo, y debe soltarse cuando termine la sección.
Prefiere el posicionamiento sticky nativo en lugar de secuestrar el scroll, y asegúrate de que cada paso se lea bien sin el panel fijo en pantallas pequeñas.

Una barra o un anillo se va llenando a medida que el usuario se desplaza por la página o el artículo.

Añade una barra de progreso de lectura (Scroll Progress Indicator, también llamada reading progress bar) en [dónde].
Una barra fina en la parte superior debe llenarse de izquierda a derecha según lo que el lector haya avanzado, hasta ocupar todo el ancho al final.
Vincúlala directamente a la posición del scroll, sin retraso de suavizado, y evita que tape el contenido.

El desplazamiento se detiene en puntos de ajuste definidos, como diapositivas o secciones.

Añade "Scroll Snap" (también llamado scroll snapping o snap scrolling) en [dónde].
Cuando el scroll se detenga, la vista debe asentarse limpiamente en la sección más cercana para que cada una quede alineada con el borde en lugar de pararse a medias.
Usa el ajuste nativo del navegador para que el scroll con rueda, táctil y teclado siga funcionando, y asegúrate de que el contenido más alto que la pantalla se pueda leer entero.

El progreso de la animación está ligado directamente a la posición del scroll, así que al avanzar o retroceder se reproduce o se rebobina.

Añade una "Scroll-Linked Animation" (también llamada scroll-driven animation o scroll scrub) en [dónde].
La animación debe moverse exactamente con la posición del scroll: al bajar avanza y al subir se rebobina al instante, sin un suavizado temporal propio.
Asigna toda la animación a un tramo de scroll claro y muestra un estado estático razonable si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una animación se reproduce una vez cuando un elemento entra o sale del viewport.

Añade una "Scroll-Triggered Animation" (también llamada reveal on scroll o animate on scroll) en [dónde].
Cada elemento debe aparecer con un fundido y subir a su sitio una sola vez al entrar en pantalla, a su propio ritmo rápido y suave en lugar de seguir la posición del scroll.
Mantén el contenido visible si los scripts no cargan y muestra los elementos de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El scroll y los saltos a anclas se deslizan con suavizado en lugar de moverse de golpe.

Añade un scroll suave (Smooth Scroll, también llamado smooth scrolling o inertia scroll) en [dónde].
El scroll y los saltos a anclas deben deslizarse y frenar suavemente en lugar de moverse a saltos, con una sensación ligera y ágil, no con un retraso pesado.
Mantén el comportamiento nativo, como el scroll con teclado, la barra de desplazamiento y la búsqueda en la página, y desactiva el suavizado si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las tarjetas se quedan fijas arriba al hacer scroll y se apilan unas sobre otras, a menudo encogiendo las anteriores.

Añade "Stacking Cards" (también llamadas sticky stacking cards o card stack scroll) en [dónde].
Al hacer scroll, cada tarjeta debe quedarse fija cerca de la parte superior y la siguiente debe subir por encima, mientras las de debajo se encogen un poco para formar una pila ordenada.
Deja visible un borde fino de cada tarjeta anterior y da a la última espacio suficiente para llegar a su sitio antes de que termine la sección.

Un encabezado fijo reduce su altura o tamaño cuando el usuario baja por la página.

Añade un "Sticky Header Shrink" (también llamado shrinking header o shrink on scroll) en [dónde].
El encabezado debe quedarse arriba y, en cuanto el lector baje un poco, encogerse suavemente hasta una barra más delgada con un logo más pequeño, y volver a crecer al regresar arriba del todo.
Evita que el contenido de abajo salte mientras el encabezado cambia de tamaño.

Grandes líneas de texto se deslizan en horizontal mientras la página se desplaza en vertical.

Añade un "Text Marquee on Scroll" (también llamado scroll text marquee o scroll velocity text) en [dónde].
Grandes líneas de texto deben deslizarse de lado al bajar por la página, con filas alternas moviéndose en direcciones opuestas, y volver atrás al subir.
Vincula el movimiento a la posición del scroll, evita que las líneas largas creen una barra de desplazamiento horizontal y mantenlas quietas si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un elemento o una escena se amplía o se reduce a medida que el usuario hace scroll.

Añade un efecto "Zoom on Scroll" (también llamado scroll zoom o scale on scroll) en [dónde].
Mientras la sección se mantiene en pantalla, el elemento debe crecer suavemente desde una tarjeta pequeña hasta llenar toda la vista, al ritmo del scroll, y encogerse de nuevo al subir.
Escálalo sin desplazar el diseño que lo rodea y muéstralo en su tamaño final sin zoom si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Texto relleno con un degradado cuyos colores cambian o fluyen sin parar.

Añade un efecto de texto con degradado animado (Animated Gradient Text, también llamado aurora text o rainbow text sweep) en [dónde].
Las letras deben rellenarse con un degradado cuyos colores fluyan lenta y suavemente por el texto en un bucle infinito y sin cortes.
Mantén el texto legible sobre su fondo en todo momento y deja los colores quietos si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El texto tiembla con cortes desplazados y separaciones de color rojo y cian, como una señal averiada.

Añade un efecto hover "Glitch Text" (también llamado text glitch o RGB split glitch) en [dónde].
Mientras el puntero esté sobre el texto, debe temblar en ráfagas rápidas y secas: finas franjas horizontales saltan de lado y dos copias de color se separan como una señal averiada, y luego vuelve a su sitio cuando el puntero se va.
Deja el texto real una sola vez en el documento para que los lectores de pantalla no lean las copias, y muestra el mismo efecto con el foco del teclado.

El texto muestra reflejos iridiscentes de lámina holográfica que se mueven con el puntero o con el tiempo.

Añade un efecto hover "Holographic Text" (también llamado holographic foil text) en [dónde].
Mientras el puntero esté sobre el texto, una franja de colores como de lámina holográfica debe deslizarse lenta y suavemente de un lado a otro sobre las letras, y el texto debe volver a su aspecto normal cuando el puntero se vaya.
Mantén las letras legibles en todo momento del brillo y muestra el mismo efecto con el foco del teclado.

El texto se escala, se mueve o gira como un elemento gráfico en movimiento en lugar de ser texto estático.

Añade tipografía cinética (Kinetic Typography, también llamada kinetic text) en [dónde].
Filas de texto grande y repetido deben deslizarse de lado en direcciones alternas a un ritmo lento y constante, convirtiendo las palabras en un gráfico en movimiento.
Haz que cada fila se repita sin saltos visibles, que los lectores de pantalla lean el texto una sola vez y detén el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las letras salen volando al pasar el puntero y regresan, o estallan hacia fuera al entrar.

Añade un efecto hover "Letter Scatter" (también llamado scatter gather letters o explosive letter burst) en [dónde].
Cuando el puntero pase sobre el texto, cada letra debe salir disparada un poco en su propia dirección con un leve giro, y luego volver a reunirse suavemente en la palabra cuando el puntero se vaya.
Mantén fijo el espacio de la palabra en el diseño mientras las letras se mueven, haz que los lectores de pantalla la lean como una sola palabra y muestra el mismo efecto con el foco del teclado.

Una sombra a rayas o desplazada detrás de las letras se anima en una dirección.

Añade un efecto "Line Shadow Text" (también llamado text shadow animation o dancing shadow) en [dónde].
Detrás de las letras, una sombra desplazada hecha de finas rayas diagonales debe deslizarse de forma lenta y continua, mientras las letras se quedan quietas y nítidas.
Haz que el movimiento de las rayas se repita sin cortes y deja la sombra quieta si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las letras se llenan de un líquido que sube y ondula.

Añade un efecto "Liquid Fill Text" (también llamado water fill text) en [dónde].
Las letras con contorno deben llenarse de un líquido cuya superficie ondulada avanza de lado mientras el nivel sube y baja despacio, en un bucle suave y continuo.
Mantén la palabra como texto real para los lectores de pantalla y deja el líquido en un nivel fijo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El texto sube desde detrás de una línea de recorte, como si surgiera de la nada.

Añade una entrada de texto "Mask Reveal" (también llamada line mask reveal o text masking) en [dónde].
Cada línea debe subir desde detrás de un borde invisible, como si surgiera de la nada, una tras otra, rápida y suave, sin rebote.
Reprodúcela una sola vez cuando el texto entre en pantalla al hacer scroll y muestra el texto directamente, sin movimiento, si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Caracteres verdes caen en columnas, como la lluvia de código de Matrix.

Añade un efecto "Matrix Text" (también llamado digital rain text) en [dónde].
Columnas de caracteres deben caer de forma constante a velocidades ligeramente distintas, cada una con un carácter brillante al frente y una estela que se desvanece detrás.
Trátalo como decoración oculta para los lectores de pantalla, mantenlo ligero y detenlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las letras gotean y se estiran hacia abajo como si se derritieran.

Añade un efecto "Melting Text" en [dónde].
Las letras deben hundirse lentamente mientras unas gotas se estiran por debajo, como si se derritieran, y quedarse quietas con un aspecto derretido.
Reprodúcelo una sola vez cuando el texto entre en pantalla, mantén la palabra legible al final y omite el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una palabra se difumina y se funde con la siguiente en el mismo lugar.

Añade un efecto "Morphing Text" (también llamado text morph) en [dónde].
Una palabra debe difuminarse y fundirse con la siguiente en el mismo lugar, con una mezcla suave y viscosa, y quedarse quieta un momento antes del siguiente cambio.
Recorre las palabras sin cortes, deja que los lectores de pantalla lean las palabras como texto normal y detén el ciclo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El texto brilla como un tubo de neón y parpadea o late.

Añade un efecto "Neon Glow Text" (un texto neón, también llamado neon sign flicker o glowing text) en [dónde].
El texto debe brillar como un tubo de neón con una luz suave y constante y, de vez en cuando, apagarse un instante como un letrero real.
Que el parpadeo sea ocasional y no rápido, porque los destellos rápidos pueden hacer daño a algunos usuarios, y mantén el brillo fijo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las letras de un título se barajan o se mueven en secuencia a medida que el usuario recorre las secciones con el scroll.

Añade "Scrolling Letters" (también llamado on-scroll letter animations) en [dónde].
A medida que el usuario recorre las secciones con el scroll, las letras del título deben girar hacia su siguiente carácter una tras otra de izquierda a derecha, ligadas directamente a la posición del scroll.
Al volver hacia arriba deben girar de vuelta, y los lectores de pantalla deben recibir el título actual como texto normal.

Un brillo recorre las letras una y otra vez.

Añade un efecto "Shimmer Text" (también llamado animated shiny text o metallic shimmer text) en [dónde].
Una franja de luz debe recorrer las letras con suavidad de izquierda a derecha y repetirse tras una breve pausa.
Mantén el texto legible bajo el brillo y déjalo quieto si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un título se corta en franjas horizontales que se desplazan de lado unas contra otras al hacer scroll.

Añade un efecto "Sliced Text" (también llamado on-scroll sliced text) en [dónde].
Un título grande debe cortarse en franjas horizontales que se deslizan de lado unas contra otras al hacer scroll, alineadas formando la palabra completa al principio.
Liga el desplazamiento directamente a la posición del scroll para que al volver se invierta, y mantén el título como un solo texto legible para los lectores de pantalla.

El texto se dispone alrededor de un círculo que gira sin parar.

Añade "Spinning Text" (también llamado circular text o text on circle) en [dónde].
Las letras deben repartirse de forma uniforme alrededor de un círculo que gira lento y constante, sin salto cuando el bucle vuelve a empezar.
Da el texto a los lectores de pantalla una sola vez como texto normal y detén la rotación si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un título se divide en caracteres, palabras o líneas que se animan una tras otra con un pequeño retraso.

Añade una entrada "Split Text Stagger" (también llamada letter stagger o staggered text reveal) en [dónde].
Divide el título en letras que suban y aparezcan una tras otra con un breve retraso entre ellas, rápido y suave, sin rebote.
Reprodúcela una sola vez cuando el título entre en pantalla, haz que los lectores de pantalla lo lean como una sola palabra y muéstralo sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Los caracteres giran como en un panel de salidas de aeropuerto hasta quedarse en la letra final.

Añade un efecto "Split-Flap Text" (también llamado text flipping board o flip board) en [dónde].
Cada casilla de carácter debe pasar rápidamente por el alfabeto hasta quedarse en su letra final, y las casillas deben ir asentándose una tras otra de izquierda a derecha.
Ejecútalo una vez cada vez que el texto aparezca o cambie, anuncia solo el texto final a los lectores de pantalla y muestra el texto final sin giros si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Los bordes de las letras ondulan como si estuvieran dibujados a mano, con un filtro de desplazamiento SVG.

Añade un efecto "Squiggly Text" (también llamado wobbly text o turbulence text) en [dónde].
Los bordes de las letras deben temblar ligeramente como si se dibujaran a mano y se redibujaran varias veces por segundo: un hervor sutil y nervioso, no una onda suave.
Mantén el texto legible y déjalo quieto si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El texto queda fijo mientras sus líneas aparecen y desaparecen según el avance del scroll.

Añade un efecto "Sticky Text Fade" (también llamado sticky scroll text opacity fade) en [dónde].
Mientras la sección avanza con el scroll, el bloque de texto debe quedarse fijo en su sitio y sus líneas deben aparecer y desaparecer una a una según el avance del scroll.
Liga los fundidos directamente a la posición del scroll para que al volver se inviertan, y mantén todas las líneas disponibles para los lectores de pantalla, sea cual sea su opacidad.

Los contornos de las letras se dibujan como un trazo antes de que aparezca el relleno.

Añade un efecto "Stroke Text Draw" (también llamado draw in text o animated stroke text) en [dónde].
Los contornos de las letras deben dibujarse solos con suavidad y, una vez completos, el relleno debe aparecer con un fundido.
Reprodúcelo una sola vez al cargar, mantén la palabra accesible como texto real y muestra el texto ya relleno si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las letras o palabras giran en 3D sobre un eje para mostrar el siguiente texto en su cara trasera.

Añade un efecto hover "Text 3D Flip" (también llamado 3D flip text reveal) en [dónde].
Cuando el puntero esté sobre el texto, cada letra debe girar en 3D sobre su eje horizontal para mostrar una letra nueva en su otra cara, una tras otra en un barrido rápido y suave, y volver cuando el puntero salga.
Mantén el mismo tamaño de la caja de texto durante el giro y muestra el mismo efecto con el foco del teclado.

El texto se deforma y ondula de forma orgánica, impulsado por el scroll o el movimiento del puntero.

Añade un efecto "Text Distortion" (también llamado organic text distortion) en [dónde].
Una fila de texto debe fluir de lado sin fin y deformarse y ondular de forma orgánica mientras se mueve, como vista a través de agua en movimiento, con el flujo impulsado por el scroll del usuario.
Mantén la distorsión lo bastante ligera para que el texto siga siendo legible, que vaya fluida en dispositivos más lentos y desactívala si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las palabras aparecen una tras otra al cargar la página, a menudo mientras se disipa un desenfoque, como si se estuvieran generando.

Añade un efecto "Text Generate" en [dónde].
Las palabras deben aparecer una tras otra mientras se disipa un suave desenfoque en cada una, como si el texto se estuviera generando: constante y tranquilo.
Reprodúcelo una sola vez al cargar, deja que los lectores de pantalla lean el texto completo desde el principio y muéstralo sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una franja de color tipo rotulador se dibuja sobre una frase para resaltarla.

Añade un efecto "Text Highlighter" (también llamado highlight marker o marker underline) en [dónde].
Una franja de color tipo rotulador debe pasar suavemente por detrás de la frase clave de izquierda a derecha, como si alguien la resaltara con un marcador.
Reprodúcelo una sola vez cuando la frase entre en pantalla al hacer scroll, mantén el texto legible sobre la franja y haz que la franja siga bien la frase cuando se divida en dos líneas.

Una palabra con contorno se rellena o se ilumina con un degradado que sigue al puntero o la recorre de lado a lado.

Añade un "Text Hover Effect" (también llamado text fill on hover o gradient outline text hover) en [dónde].
La palabra debe empezar solo con contorno y, mientras el puntero esté encima, un relleno sólido debe entrar suavemente de izquierda a derecha y retirarse cuando el puntero salga.
Mantén legible la palabra con contorno antes del relleno y muestra el mismo efecto con el foco del teclado.

El texto sigue una trayectoria curva y avanza por ella a medida que el usuario hace scroll.

Añade un efecto "Text Path Scroll" (también llamado text path curve scroll animation) en [dónde].
El texto debe apoyarse en una línea curva y deslizarse por ella a medida que el usuario hace scroll, avanzando al bajar y retrocediendo al subir.
Vincula el movimiento directamente a la posición del scroll sin retraso y mantén el texto legible como texto normal para los lectores de pantalla.

Una palabra se duplica en muchas copias apiladas que se desplazan con el scroll.

Añade un efecto "Text Repetition" (también llamado repeated text scroll) en [dónde].
Una palabra debe copiarse en una pila de copias de contorno más tenues que se abren desde detrás de ella a medida que el usuario hace scroll, y se vuelven a juntar al subir.
Vincula la apertura directamente a la posición del scroll y oculta las copias extra a los lectores de pantalla para que la palabra se lea una sola vez.

El texto existente sale con una animación y se reemplaza por un contenido nuevo.

Añade un efecto "Text Replacement" (también llamado text swap) en [dónde].
Cuando cambie el texto, los caracteres antiguos deben deslizarse hacia arriba y salir mientras los nuevos entran desde abajo, carácter a carácter, en una onda rápida y suave.
Evita que la caja del texto cambie de tamaño de golpe durante el cambio y anuncia solo el texto nuevo a los lectores de pantalla.

Las palabras de un párrafo pasan de atenuadas a opacidad total a medida que el usuario hace scroll.

Añade un efecto "Text Reveal" (también llamado scroll text reveal o word-by-word reveal) en [dónde].
El párrafo debe empezar atenuado y, a medida que el usuario hace scroll, cada palabra debe iluminarse del todo una tras otra, vinculada a la posición del scroll.
Al volver a subir, las palabras deben atenuarse de nuevo, y el párrafo completo debe seguir disponible para los lectores de pantalla sea cual sea su atenuación.

Al mover el puntero sobre una tarjeta se descubre un texto oculto bajo un borde de máscara o un foco de luz.

Añade un efecto "Text Reveal Card" (también llamado spotlight text reveal) en [dónde].
Al mover el puntero por la tarjeta, un borde vertical debe seguirlo de cerca y descubrir un texto oculto en uno de sus lados, suave y directo, sin retraso.
En pantallas táctiles, donde no hay puntero que seguir, deja que un arrastre o un toque revele el texto oculto, y haz que ese texto esté disponible para los lectores de pantalla.

El texto se sustituye por caracteres aleatorios que cambian y se resuelven poco a poco en la palabra final.

Añade un efecto hover "Text Scramble" (también llamado text decode o encrypted text) en [dónde].
Cuando el puntero pase sobre el texto, cada letra debe parpadear rápido entre caracteres aleatorios y asentarse en su letra real, resolviéndose una tras otra de izquierda a derecha.
Evita que el ancho del texto salte mientras se desordena, mantén a los lectores de pantalla en el texto real y muestra el mismo efecto con el foco del teclado.

El texto gira en perspectiva 3D siguiendo la posición del ratón.

Añade un efecto "Text Tilt" (también llamado perspective text tilt) en [dónde].
El texto debe inclinarse suavemente en 3D hacia el puntero mientras se mueve, siguiéndolo con fluidez, y volver a quedar plano con suavidad cuando el puntero salga.
Mantén la inclinación sutil para que el texto siga legible, y deja el texto plano en pantallas táctiles y si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Los caracteres aparecen de uno en uno como si se tecleasen, normalmente seguidos de un cursor parpadeante.

Añade un efecto de máquina de escribir (Typewriter) en [dónde], también llamado typing animation o typing text.
Los caracteres deben aparecer de uno en uno a un ritmo de tecleo constante, con un cursor justo después del último carácter escrito que parpadee unas cuantas veces al terminar.
Reprodúcelo una sola vez en lugar de en bucle, deja que los lectores de pantalla lean el texto completo desde el principio y muestra el texto completo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Al pasar el ratón, un subrayado crece desde un lado o desde el centro bajo un enlace.

Añade un efecto hover de subrayado animado (Underline Draw) en [dónde], también llamado animated underline o hover underline animation.
Cuando el puntero esté sobre el enlace, un subrayado debe crecer suavemente de izquierda a derecha bajo el texto y encogerse de nuevo cuando el puntero salga: rápido y sutil.
Evita que el subrayado desplace el diseño de alrededor y muestra el mismo efecto con el foco del teclado.

Las letras se vuelven más gruesas o más finas con suavidad (o cambian de ancho o inclinación) mediante los ejes de una fuente variable.

Añade un efecto hover "Variable Font Weight Animation" (también llamado font weight shift) en [dónde].
Mientras el puntero esté sobre el texto, las letras deben engrosarse una tras otra en una onda suave de izquierda a derecha y volver a adelgazar cuando el puntero salga.
Usa una fuente variable para que el grosor cambie con suavidad en lugar de saltar, evita que el título empuje el contenido cercano al ensancharse y muestra el mismo efecto con el foco del teclado.

Unas letras grandes funcionan como una ventana que muestra un vídeo en reproducción dentro de ellas.

Añade un efecto "Video Text" (también llamado text video mask) en [dónde].
Unas letras grandes y gruesas deben funcionar como una ventana a un vídeo en reproducción, de modo que la imagen en movimiento solo se vea dentro de la forma de las letras.
Mantén el vídeo silenciado y en bucle sin controles, ofrece las palabras como texto real para los lectores de pantalla y muestra un fotograma fijo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las letras suben y bajan en secuencia, creando una onda que recorre la palabra.

Añade un efecto "Wavy Text" (también llamado text wave) en [dónde].
Las letras deben subir y bajar una tras otra para que una onda suave y fluida recorra la palabra sin parar.
Haz el bucle sin cortes, que los lectores de pantalla lo lean como una sola palabra y detén la onda si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una palabra de la frase se cambia por la siguiente de una lista con un deslizamiento, un giro o un fundido.

Añade un efecto "Word Rotate" (también llamado rotating words o flip words) en [dónde].
Una palabra de la línea debe deslizarse hacia arriba y salir mientras la siguiente palabra de una lista entra desde abajo, deteniéndose en cada palabra antes del siguiente cambio.
Evita que el resto de la línea salte cuando las palabras tengan anchos distintos, no hagas que los lectores de pantalla anuncien cada cambio y detén la rotación si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una mancha orgánica cambia su contorno de forma continua.

Añade una animación en bucle "Blob Morph" (también llamada morphing blob o animated blob) en [dónde].
Una mancha orgánica debe cambiar su contorno lentamente sin parar mientras gira con suavidad, fluida y blanda, sin esquinas marcadas.
Haz que el bucle no tenga cortes para que la forma nunca salte, y déjala quieta si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las formas cercanas se funden entre sí como gotas líquidas mediante un filtro de desenfoque y contraste.

Añade un "Gooey Effect" (también llamado goo effect o metaballs) en [dónde].
Al pasar el puntero por encima, unas gotas pequeñas deben separarse de la forma principal estirándose como líquido antes de soltarse, y volver fluyendo para fundirse con suavidad cuando el puntero se va.
Aplica el filtro de desenfoque y contraste solo al pequeño grupo de formas, no a toda la página, y muestra el mismo efecto con el foco del teclado y al tocar.

Un icono, como el menú hamburguesa, se transforma en otro (una X) con barras que giran y se desplazan.

Añade un "Icon Morph" (también llamado hamburger to X o menu icon morph) en [dónde].
En cada pulsación, las barras superior e inferior deben deslizarse juntas hasta el centro y luego girar hasta formar una X mientras la barra central se desvanece; al pulsar de nuevo, se invierte: rápido y ágil.
Hazlo un botón de alternancia real cuya etiqueta accesible y estado expandido cambien con él, y mantén fijo el tamaño del icono para que nada a su alrededor se mueva.

Un trazo SVG parece dibujarse a lo largo de su recorrido al animar el desplazamiento del guion.

Añade una animación "Line Drawing" (también llamada path drawing o self-drawing SVG) en [dónde].
Cada trazo debe parecer dibujarse solo con suavidad a lo largo de su recorrido de principio a fin, y un segundo trazo, como una marca de verificación, debe seguir justo después del primero.
Reprodúcela una sola vez al entrar en pantalla en lugar de repetirla, y muestra las líneas ya dibujadas si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un elemento recorre una trayectoria curva personalizada y puede girar para seguirla.

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.

Círculos o iconos pequeños giran alrededor de un centro en órbitas circulares.

Añade "Orbiting Circles" (también llamado orbit animation u orbiting icons) en [dónde].
Unos círculos pequeños deben girar lenta y constantemente alrededor de un elemento central en anillos circulares, con el anillo exterior girando en sentido contrario y más despacio.
Mantén el bucle sin cortes y los elementos en órbita siempre derechos, y detén la rotación si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una forma vectorial se transforma con suavidad en otra.

Añade un "Shape Morph" (también llamado path morphing o SVG morph) en [dónde].
Una forma debe transformarse con suavidad en otra, por ejemplo un pentágono que se estrecha hasta ser una estrella, con sus puntos deslizándose a su sitio a un ritmo uniforme y sin prisa.
Da a ambas formas el mismo número de puntos equivalentes para que la transformación quede limpia y sin parpadeos, y reprodúcela una vez por cada cambio de estado en lugar de en bucle.

Un filtro SVG deforma texto o formas con ruido animado.

Añade un efecto hover "SVG Displacement Distortion" (también llamado displacement map effect) en [dónde].
Mientras el puntero esté encima, el texto o la forma debe ondularse y temblar como si se viera a través de agua en movimiento, apareciendo con suavidad, y volver a verse nítido cuando el puntero se va.
Aplica el filtro de distorsión solo mientras el efecto esté activo para que no cueste nada en reposo, y muestra el mismo efecto con el foco del teclado.

Una forma de máscara barre o sigue al puntero para descubrir el contenido de debajo.

Añade un efecto hover "SVG Mask Reveal" (también llamado clip-path reveal o spotlight mask) en [dónde].
Mientras el puntero esté encima, una máscara circular debe crecer desde el centro y descubrir el contenido de debajo, y volver a cerrarse cuando el puntero se va: suave y bastante rápido.
Mantén las dos capas exactamente del mismo tamaño para que nada se mueva, y muestra el mismo revelado con el foco del teclado y al tocar.

Líneas y puntos se animan entre ubicaciones de un mapa o un globo terráqueo.

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

Las barras suben desde altura cero hasta sus valores.

Añade un gráfico de barras animado (Bar Chart Grow) en [dónde], también llamado animated bar chart o bar chart entrance.
Cada barra debe subir desde la línea base hasta su valor una tras otra con un escalonado rápido, desacelerando con suavidad al asentarse.
Reprodúcelo una sola vez cuando el gráfico entre en pantalla y muestra el gráfico terminado de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las barras horizontales intercambian posiciones con el tiempo a medida que cambian los valores.

Añade un gráfico de carrera de barras (Bar Chart Race) en [dónde], también llamado racing bar chart.
Las barras horizontales deben crecer y encogerse a medida que cambian los valores con el tiempo y deslizarse con suavidad unas junto a otras cada vez que cambie su posición, cada una con su etiqueta.
Mueve las barras con transformaciones en lugar de reordenar el marcado para que los intercambios se deslicen en vez de saltar, y da a los usuarios una forma de pausarlo.

Los elementos del gráfico pasan con suavidad de los valores antiguos a los nuevos cuando cambian los datos o se alterna el conjunto de datos.

Añade un "Chart Data Transition" (también llamado chart update animation) en [dónde].
Cuando cambien los datos, todas las barras deben deslizarse a la vez de su valor anterior al nuevo, de forma suave y sin prisa, en lugar de redibujarse desde cero.
Empieza cada actualización desde los valores que hay en pantalla para que un segundo cambio rápido no salte, y aplica los valores nuevos al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un anillo o un gráfico circular se rellena en sentido horario hasta su porcentaje.

Añade una animación "Donut Chart Fill" (también llamada pie chart sweep o animated donut chart) en [dónde].
Empezando por arriba, cada segmento debe barrer en sentido horario por turnos hasta que el anillo muestre su proporción, desacelerando con suavidad al terminar.
Reprodúcela una sola vez cuando el gráfico entre en pantalla y deja los valores reales disponibles como texto para los lectores de pantalla.

Un número cuenta desde un valor inicial hasta un valor objetivo cuando se vuelve visible.

Añade un contador animado (Number Ticker) en [dónde], también llamado count up o animated counter.
Cuando el número entre en pantalla, debe contar desde cero hasta su objetivo, rápido al principio y frenando con suavidad al llegar.
Usa dígitos de ancho fijo para que nada alrededor tiemble, cuenta una sola vez y da el valor final de inmediato a los lectores de pantalla y si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Cada dígito rueda en vertical hasta el nuevo valor cuando cambia un número.

Añade una animación de números "Odometer" (también llamada rolling numbers o slot-machine digits) en [dónde].
Cuando cambie el valor, cada dígito debe rodar en vertical hasta su nuevo dígito, siempre hacia delante, con un ligero escalonado entre dígitos y un pequeño asentamiento al final.
Mantén todos los dígitos del mismo ancho para que el número no se desplace, y expón solo el valor final a los lectores de pantalla.

Un fondo de color entra barriendo desde un borde con un rebote elástico que se pasa un poco.

Añade un efecto hover "Background Bounce Sweep" en [dónde].
Un nuevo color de fondo debe entrar barriendo desde un borde, pasarse un poco del borde opuesto con un rebote elástico y luego asentarse, mientras el color del texto cambia para seguir siendo legible; al salir, vuelve a deslizarse hacia fuera con suavidad.
Mantén el texto por encima del relleno y muestra el mismo efecto con el foco del teclado.

El color de fondo y el del texto se funden hacia un nuevo color al pasar el cursor.

Añade un efecto hover "Background Fade" (también llamado color fade) en [dónde].
Los colores del fondo y del texto deben fundirse suavemente hacia nuevos colores mientras el cursor está sobre el elemento, y volver al salir: tranquilo, sin movimiento.
Mantén suficiente contraste entre texto y fondo en ambos estados y muestra el mismo efecto con el foco del teclado.

Un fondo de color recorre el elemento desde un borde al pasar el cursor.

Añade un efecto hover "Background Sweep" (también llamado background fill o slide fill) en [dónde].
Un nuevo color de fondo debe recorrer el elemento del borde izquierdo al derecho, suave y rápido, sin rebote, y retirarse igual cuando el cursor sale, mientras el color del texto cambia para seguir siendo legible.
Mantén el relleno recortado dentro de la forma del elemento y muestra el mismo efecto con el foco del teclado.

El elemento sube y luego se balancea arriba y abajo sin parar mientras está bajo el cursor.

Añade un efecto hover "Bob" (también llamado hang) en [dónde].
El elemento debe subir un poco y luego seguir balanceándose suavemente arriba y abajo mientras el cursor siga encima, y bajar de nuevo cuando el cursor salga: lento y suave.
Repite el balanceo solo mientras esté bajo el cursor y déjalo quieto si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El color del borde aparece o cambia con un fundido al pasar el cursor.

Añade un efecto hover "Border Fade" en [dónde].
El borde debe pasar suavemente de un tono apagado al color de acento mientras el cursor está sobre el elemento: sutil, sin movimiento ni cambio de tamaño.
Mantén el mismo grosor de borde en ambos estados para que nada se desplace y muestra el mismo efecto con el foco del teclado.

Anillos de borde concéntricos se expanden hacia fuera o se contraen hacia dentro desde el elemento al pasar el cursor.

Añade un efecto hover "Border Ripple" en [dónde].
Cuando entra el cursor, un par de anillos de borde deben expandirse desde el elemento uno tras otro y desvanecerse: rápido y ligero, como una onda en el agua.
Reprodúcelo una vez por hover en lugar de repetirlo en bucle y no dejes que los anillos desplacen el diseño de alrededor.

El elemento cambia de escala con un rebote elástico que se pasa un poco al empezar o terminar el hover.

Añade un efecto hover "Bounce Scale" (también llamado bounce in / out) en [dónde].
El elemento debe agrandarse un poco con un rebote elástico visible, pasándose brevemente de su tamaño final antes de asentarse, y volver con el mismo rebote cuando el cursor sale.
Evita que el diseño de alrededor se desplace y muestra el mismo efecto con el foco del teclado.

Un fondo resaltado se desliza entre las tarjetas de una cuadrícula para seguir a la que está bajo el cursor.

Añade un "Card Hover Effect" (también llamado sliding highlight card grid) en [dónde].
Un fondo resaltado suave debe aparecer detrás de la tarjeta bajo el cursor y deslizarse con fluidez hasta la siguiente tarjeta a la que se mueva el cursor, desvaneciéndose cuando el cursor sale de la cuadrícula.
Haz que el foco del teclado mueva el resaltado de la misma forma y evita que las propias tarjetas se desplacen.

Una luz radial suave sigue al cursor por la superficie de la tarjeta y revela el fondo que hay debajo.

Añade un efecto "Card Spotlight" (también llamado spotlight hover, pointer glow, mouse-following glow o radial gradient hover) en [dónde].
Un resplandor radial suave y tenue debe seguir al cursor por la superficie de la tarjeta, apareciendo con un fundido cuando el cursor entra y desvaneciéndose cuando sale.
Mantén el resplandor detrás del contenido para que el texto siga legible y, en dispositivos táctiles, deja la tarjeta sin iluminar.

Una esquina del elemento se dobla hacia arriba como una página que se pasa al pasar el cursor.

Añade un efecto hover "Curl" (también llamado page curl) en [dónde].
Una esquina del elemento debe doblarse suavemente como una página al pasarla, mostrando el reverso del pliegue, y volver a quedar plana cuando el cursor sale.
Mantén el pliegue pequeño para que no tape contenido importante y muestra el mismo efecto con el foco del teclado.

Una capa se desliza desde el lado por el que entró el cursor y sale hacia el lado por el que se va.

Añade un efecto "Direction Aware Hover" (también llamado direction-aware overlay) en [dónde].
Una capa superpuesta debe deslizarse desde el lado por el que entró el cursor y salir hacia el lado por el que se va: rápido y suave.
Calcula el lado a partir de la posición del cursor al entrar y al salir y, con toque o foco del teclado, usa una dirección por defecto.

Los iconos de una fila crecen suavemente a medida que se acerca el cursor, como el Dock de macOS.

Añade un efecto "Dock Magnification" (también llamado dock) en [dónde].
Los iconos de la fila deben crecer suavemente a medida que se acerca el cursor, con el más cercano como el más grande y sus vecinos algo agrandados, y volver todos a su tamaño normal cuando el cursor sale.
Haz que los iconos crezcan hacia arriba desde una línea base fija y que todos sigan siendo usables a su tamaño normal con toque y teclado.

El elemento sube unos píxeles al pasar el cursor, como si flotara.

Añade un efecto hover "Float" (también llamado lift o raise) en [dónde].
El elemento debe subir un poco y quedarse elevado mientras el cursor está encima, y volver a su sitio cuando sale: suave y delicado, sin rebote.
Muévelo solo visualmente sin desplazar el diseño de alrededor y muestra el mismo efecto con el foco del teclado.

Las tarjetas vecinas se desenfocan y oscurecen mientras la tarjeta bajo el cursor se mantiene nítida.

Añade un efecto "Focus Cards" (también llamado blur siblings on hover, hover focus blur o card hover effect) en [dónde].
Mientras el cursor esté sobre una tarjeta, las demás deben desenfocarse, oscurecerse y encogerse un poco mientras la tarjeta bajo el cursor sigue nítida, todo con un fundido suave que se invierte cuando el cursor sale.
Aplica el mismo enfoque con el foco del teclado y mantén todas las tarjetas nítidas y legibles cuando no hay ninguna bajo el cursor.

Aparece un halo de luz de color alrededor del elemento al pasar el cursor.

Añade un efecto hover "Glow" (también llamado neon glow) en [dónde].
Un halo de color suave debe aparecer con un fundido alrededor del elemento mientras el cursor está encima y desvanecerse cuando sale: delicado, sin movimiento.
Evita que el halo afecte al diseño y muestra el mismo efecto con el foco del teclado.

El elemento se agranda ligeramente y con suavidad cuando el cursor está encima.

Añade un efecto hover "Grow" (también llamado scale up) en [dónde].
El elemento debe agrandarse ligeramente y con suavidad mientras el cursor está encima, y volver a su tamaño cuando sale: rápido y sutil.
Evita que el diseño de alrededor se desplace y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, el fondo relleno se vacía y deja solo el botón con contorno.

Añade un efecto hover "Hollow" (también llamado ghost fill) en [dónde].
El fondo relleno debe desvanecerse hasta dejar solo el contorno, y el color del texto debe cambiar para seguir siendo legible sobre el fondo vacío: suave y rápido.
Mantén el mismo grosor de borde en ambos estados para que el elemento no cambie de tamaño, y muestra el mismo efecto con el foco del teclado.

Un borde degradado se anima alrededor del elemento y se expande cuando el puntero pasa por encima.

Añade un efecto "Hover Border Gradient" en [dónde].
Un brillo degradado corto debe reposar sobre una parte del borde; mientras el puntero esté sobre el elemento, debe recorrer el borde a ritmo constante mientras todo el borde se ilumina con un resplandor suave.
Anima el borde solo durante el hover y déjalo quieto si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Al pasar el cursor, aparece o se intensifica una sombra suave bajo el elemento que sugiere elevación.

Añade un efecto "Hover Shadow" (también llamado drop shadow on hover o elevation on hover) en [dónde].
Una sombra suave bajo el elemento debe intensificarse y extenderse mientras el puntero esté encima para que parezca elevado, y volver a desvanecerse al salir, sin que el elemento se mueva de su sitio.
Mantén la sombra lo bastante sutil para que funcione en temas claros y oscuros, y muestra el mismo efecto con el foco del teclado.

Una capa translúcida tiñe el elemento para indicar que el puntero está encima.

Añade un "Hover State Layer" (también llamado hover state, state layer o hover overlay) en [dónde].
Una capa translúcida y tenue del color del contenido debe aparecer rápidamente sobre el elemento mientras el puntero esté encima, y desvanecerse al salir.
Mantenla tenue para no perder contraste, y usa el mismo enfoque de capa para los estados de foco y de pulsación.

Al pasar el cursor, un icono cae fuera de la vista y vuelve desde arriba.

Añade un efecto hover "Icon Drop" en [dónde].
El icono dentro del elemento debe caer hacia abajo hasta salir de la vista y luego volver a su lugar desde arriba: rápido, con un aterrizaje suave.
Reprodúcelo una vez cada vez que entre el puntero, sin bucle, y no cambies el texto ni el tamaño del botón.

Un icono se aleja flotando del botón y se desvanece mientras entra otro nuevo.

Añade un efecto hover "Icon Float Away" en [dónde].
El icono actual debe subir flotando y desvanecerse mientras un icono nuevo sube desde abajo hasta ocupar su lugar, con suavidad, y el cambio debe invertirse cuando el puntero salga.
Mantén fijo el tamaño del botón durante el cambio y muestra el mismo efecto con el foco del teclado.

Un icono dentro de un botón gira sobre sí mismo al pasar el cursor por el botón.

Añade un efecto hover "Icon Spin" en [dónde].
El icono dentro del elemento debe dar una vuelta completa con suavidad cuando entre el puntero, y girar de vuelta cuando salga.
Gira solo el icono, no el botón entero, y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, el texto del botón sale deslizándose y entran una flecha y un relleno que se expande.

Añade un efecto "Interactive Hover Button" en [dónde].
El pequeño punto junto al texto debe expandirse hasta llenar el botón mientras el texto se desliza hacia un lado y se desvanece, y el texto con una flecha entra deslizándose sobre el nuevo relleno: suave y rápido.
Mantén fijo el tamaño del botón y el texto legible en todo momento, y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, una flecha o el propio elemento se desliza un poco hacia delante o hacia atrás.

Añade un efecto hover "Nudge Forward / Backward" (también llamado arrow nudge) en [dónde].
La flecha debe deslizarse un poco en la dirección a la que apunta mientras el puntero esté sobre el elemento, y volver al salir: rápido y corto.
Mueve solo la flecha, sin desplazar el texto ni el diseño, y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, un contorno crece hacia fuera desde el elemento o se contrae hacia él.

Añade un efecto hover "Outline Expand" en [dónde].
Un contorno debe empezar pegado al borde del elemento y moverse hacia fuera hasta dejar un pequeño espacio alrededor, quedarse ahí durante el hover y volver a cerrarse cuando salga el puntero: suave y rápido.
Dibuja el contorno de forma que no cambie el tamaño del elemento ni empuje el contenido cercano, y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, una línea crece sobre el texto desde la izquierda, el centro o la derecha.

Añade un efecto hover "Overline Grow" en [dónde].
Una línea sobre el texto debe crecer desde el centro hacia ambos lados mientras el puntero esté encima, y encogerse de vuelta hacia el centro al salir: rápido y suave.
Reserva espacio para la línea para que el texto no se mueva, y muestra el mismo efecto con el foco del teclado.

El elemento se agranda rápidamente y vuelve a su tamaño con un rebote elástico.

Añade un efecto hover "Pop" en [dónde].
Cada vez que entre el puntero, el elemento debe hincharse una vez rápidamente y volver a su tamaño normal, como un pequeño rebote elástico.
Reprodúcelo una vez por hover en lugar de mantener el tamaño mayor o repetirlo en bucle, y evita que el diseño de alrededor se desplace.

El elemento se hunde hacia dentro y vuelve, como si se pulsara un botón físico.

Añade un efecto hover "Push" en [dónde].
Cada vez que entre el puntero, el elemento debe encogerse una vez rápidamente y recuperar su tamaño normal con un rebote, como si se pulsara un botón físico.
Reprodúcelo una vez por hover en lugar de repetirlo en bucle, y evita que el diseño de alrededor se desplace.

Al pasar el cursor, un círculo de color crece desde el centro o se contrae hacia él para rellenar el elemento.

Añade un efecto hover "Radial Fill" (también llamado circle expand) en [dónde].
Un círculo del nuevo color debe crecer suavemente desde el centro hasta llenar el elemento, y encogerse de vuelta hacia el centro cuando salga el puntero, mientras el color del texto cambia para seguir siendo legible.
Mantén el círculo recortado dentro de la forma del elemento y el texto por encima, y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, un rectángulo se expande o se contrae dentro del elemento para cambiar su fondo.

Añade un efecto hover "Rectangle Fill" en [dónde].
El nuevo color de fondo debe cerrarse desde los cuatro bordes a medida que un rectángulo interior se encoge hacia el centro, y volver a abrirse cuando salga el puntero, mientras el color del texto cambia para seguir siendo legible: suave y rápido.
Mantén el texto por encima del relleno y muestra el mismo efecto con el foco del teclado.

El elemento gira unos pocos grados al pasar el cursor.

Añade un efecto hover "Rotate" en [dónde].
El elemento debe girar ligeramente en el sentido de las agujas del reloj mientras el puntero esté encima y volver al salir: suave y sutil.
Evita que el diseño de alrededor se desplace y muestra el mismo efecto con el foco del teclado.

Las esquinas del elemento se redondean con suavidad al pasar el cursor.

Añade un efecto hover "Round Corners" en [dónde].
Las esquinas rectas del elemento deben redondearse con suavidad mientras el cursor está encima y volver a ser rectas cuando sale: suave y rápido.
Mantén el tamaño del elemento sin cambios y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, una franja diagonal de luz recorre el elemento de un lado a otro.

Añade un efecto hover "Shine Sweep" (también llamado sheen, shiny button, shine on hover, glint, shimmer o shimmer button) en [dónde].
Una franja diagonal de luz suave debe recorrer el elemento de izquierda a derecha y repetirse con una breve pausa mientras el cursor sigue encima.
Mantén la franja recortada dentro del elemento, detenla cuando el cursor salga y no la reproduzcas si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se reduce ligeramente y con suavidad cuando el cursor está encima.

Añade un efecto hover "Shrink" (también llamado scale down) en [dónde].
El elemento debe reducirse ligeramente y con suavidad mientras el cursor está encima, y volver a su tamaño cuando sale: rápido y sutil.
Evita que el diseño de alrededor se desplace y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, el fondo se abre o se cierra como unas persianas desde el centro o desde los bordes.

Añade un efecto hover "Shutter Fill" (también llamado shutter) en [dónde].
El nuevo color de fondo debe abrirse desde una línea vertical en el centro hacia ambos lados, como unas persianas, y cerrarse de nuevo hacia el centro cuando el cursor sale, mientras el color del texto cambia para seguir siendo legible: suave y rápido.
Mantén el relleno recortado dentro del elemento y el texto por encima, y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, el elemento baja unos píxeles, como si se hundiera en la página.

Añade un efecto hover "Sink" en [dónde].
El elemento debe bajar un poco y quedarse ahí mientras el cursor está encima, como si se hundiera en la página, y volver a subir cuando sale: suave, sin rebote.
Muévelo solo visualmente sin desplazar el diseño de alrededor y muestra el mismo efecto con el foco del teclado.

El elemento se inclina de lado al pasar el cursor.

Añade un efecto hover "Skew" en [dónde].
El elemento debe inclinarse de lado hasta quedar ligeramente sesgado mientras el cursor está encima, y enderezarse cuando sale: rápido y suave.
Mantén el texto legible mientras está inclinado, evita que el diseño de alrededor se desplace y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, aparece un pequeño triángulo de bocadillo en un lado del elemento.

Añade un efecto hover "Speech Bubble" (también llamado bubble) en [dónde].
Una pequeña cola triangular debe deslizarse desde detrás de un lado del elemento, convirtiéndolo en un bocadillo, y volver a ocultarse cuando el cursor sale: rápido y suave.
Mantén la cola del mismo color que el elemento para que se lean como una sola forma y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, aparece una línea de borde interior dentro del contorno del elemento.

Añade un efecto hover "Trim" en [dónde].
Una línea fina debe aparecer con un fundido justo dentro del borde del elemento mientras el cursor está encima, y desvanecerse cuando sale: sutil, sin movimiento.
Mantén la línea dentro del elemento para que su tamaño no cambie y muestra el mismo efecto con el foco del teclado.

Una línea entra deslizándose desde el borde inferior o superior hasta su lugar para subrayar o sobrerrayar el elemento.

Añade un efecto hover "Underline Reveal" (también llamado overline reveal o reveal) en [dónde].
Una línea de ancho completo debe subir deslizándose hasta su lugar desde justo debajo del borde inferior mientras el cursor está sobre el elemento, y bajar de nuevo fuera de la vista cuando sale: rápido y suave.
Recorta la línea en el borde para que aparezca deslizándose y no con un fundido ni creciendo, y muestra el mismo efecto con el foco del teclado.

La tarjeta se desplaza y se escala ligeramente en respuesta al movimiento del cursor sobre ella.

Añade un efecto "Wobble Card" en [dónde].
Al mover el cursor sobre la tarjeta, esta debe desplazarse un poco hacia él mientras su contenido se desplaza un poco en sentido contrario con un ligero aumento de escala, siguiéndolo con suavidad, y todo vuelve a su sitio cuando el cursor sale.
Mantén el movimiento pequeño y desactívalo en dispositivos táctiles y si el usuario prefiere movimiento reducido (prefers-reduced-motion).

La imagen del producto se encoge y vuela en arco hasta el icono del carrito.

Añade una animación "Add to Cart Fly" (también llamada fly to cart o add-to-cart animation) en [dónde].
Al pulsar el botón de añadir, una pequeña copia de la imagen del producto debe encogerse mientras vuela en un arco suave y rápido hasta el icono del carrito, y el carrito debe dar un pequeño salto al actualizar su contador.
Reprodúcela una vez por pulsación sin mover la tarjeta original del producto, y omite el vuelo si el usuario prefiere movimiento reducido (prefers-reduced-motion), pero actualiza igualmente el carrito.

Al marcar la casilla, se dibuja una marca de verificación trazo a trazo en su interior.

Añade una animación "Checkbox Check Draw" (también llamada animated checkbox o checkmark draw) en [dónde].
Al marcar la casilla, debe rellenarse de color y la marca de verificación debe dibujarse sola en un trazo rápido y suave; al desmarcarla, se borra de la misma forma.
Mantenla como una casilla real con su estado marcado, que funcione con el teclado y con un anillo de foco visible.

Trozos de papel de colores salen disparados y caen para celebrar un éxito.

Añade una celebración de confeti (Confetti) en [dónde], también llamada confetti burst.
Pequeños trozos de papel de colores deben salir disparados rápidamente del botón y luego girar y caer flotando mientras se desvanecen, en una lluvia breve y animada.
Lánzala una vez por cada éxito en lugar de repetirla en bucle, evita que bloquee los clics en la página y omítela si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El icono de copiar se transforma en una marca de verificación y la etiqueta muestra Copiado por un momento.

Añade una animación de copiar al portapapeles (Copy-to-Clipboard Feedback) en [dónde], también llamada copied state o copy icon to checkmark.
Al pulsar el botón de copiar, el icono de copiar debe encogerse rápidamente mientras se dibuja una marca de verificación y la etiqueta cambia a "Copiado"; tras un breve momento, todo vuelve suavemente a su estado inicial.
Mantén el botón del mismo tamaño durante el cambio para que nada se desplace, y anuncia el estado de copiado a los lectores de pantalla.

Un elemento sigue al cursor al arrastrarlo y puede limitarse a un área o a un eje.

Añade una interacción de arrastrar (Drag) en [dónde], también llamada draggable o drag constraints.
El elemento debe seguir al cursor directamente mientras se arrastra, detenerse en los bordes de su área permitida y volver a su posición de reposo con un pequeño rebote al soltarlo.
Haz que funcione tanto con toque como con ratón sin que la página se desplace debajo, y ofrece una forma de moverlo con el teclado.

La etiqueta del placeholder sube y se reduce por encima del campo cuando este recibe el foco o tiene contenido.

Añade un "Floating Label" (también llamado float label o animated placeholder) en [dónde].
Cuando el campo reciba el foco o tenga un valor, la etiqueta que está dentro debe deslizarse hacia arriba y reducirse hasta el borde superior del campo, de forma suave y rápida, y volver a bajar solo cuando el campo esté vacío y sin foco.
Mantenla como una etiqueta real vinculada al input y asegúrate de que la altura del campo no cambie para que el formulario nunca se desplace.

Un icono de corazón se rellena de color y lanza pequeñas partículas o late al hacer clic.

Añade una animación "Like / Heart Burst" (también llamada heart animation o favorite toggle) en [dónde].
Al marcar me gusta, el corazón debe llenarse de color y dar un salto elástico mientras un anillo y pequeños puntos estallan hacia fuera y se desvanecen, todo rápido y juguetón; al desmarcarlo, el corazón solo se vacía en silencio.
Que sea un botón de alternancia real con su estado pulsado, y reproduce el estallido solo al activarlo.

Mantener pulsado un elemento un momento activa acciones extra o un relleno de progreso.

Añade una interacción de pulsación larga (Long Press) (también llamada press and hold o touch and hold) en [dónde].
Mientras se mantiene pulsado, el elemento debe hundirse un poco mientras un relleno de progreso lo recorre a ritmo constante; cuando se completa, rebota de vuelta y abre su menú, y si se suelta antes, se cancela y el relleno se reinicia.
Ofrece a los usuarios de teclado y lector de pantalla otra forma de llegar a las mismas acciones, y evita que la pulsación seleccione texto o abra el menú contextual del navegador.

Un indicador numérico aparece de golpe, rebota o late cuando llega una nueva notificación.

Añade una animación "Notification Badge Bounce" (también llamada badge pop o ping) en [dónde].
Cuando llegue una nueva notificación, el indicador numérico debe aparecer desde la nada y asentarse con un par de rebotes rápidos y elásticos mientras un anillo suave se expande desde él una vez.
Reprodúcela una vez por cada notificación nueva en lugar de en bucle, y anuncia el nuevo número a los lectores de pantalla.

Un icono de ojo cambia entre abierto y tachado al mostrar u ocultar la contraseña.

Añade un botón para mostrar/ocultar contraseña (Password Reveal Toggle) (también llamado show/hide password o eye icon toggle) en [dónde].
Al pulsar el ojo, su barra debe borrarse rápido mientras los puntos ocultos se funden con los caracteres reales, y al volver a pulsar la barra se dibuja de nuevo y los oculta: suave y rápido, sin rebote.
Mantén fijo el ancho del campo para que el texto no salte, y haz que el botón sea un botón real cuya etiqueta indique si la contraseña está visible.

Una flecha de puntero dibuja un recuadro de resaltado alrededor de una palabra cuando el texto entra en pantalla.

Añade un efecto "Pointer Highlight" en [dónde].
Cuando el texto entre en pantalla al hacer scroll, un recuadro debe dibujarse alrededor de la palabra clave de izquierda a derecha mientras una pequeña flecha de puntero recorre su esquina, suave y constante, como si alguien marcara la palabra a mano.
Dibújalo solo la primera vez que aparece sin desplazar el texto, y muestra el recuadro terminado de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se encoge un poco mientras se pulsa y vuelve con un rebote al soltarlo.

Añade un efecto "Press (Button Tap Scale)" (también llamado tap feedback o press state) en [dónde].
Mientras se pulsa, el elemento debe encogerse un poco y oscurecerse ligeramente, y al soltarlo volver a su tamaño con un pequeño rebote: rápido y sutil.
Muestra la misma respuesta al pulsar con el teclado y con el dedo, y evita que el diseño de alrededor se mueva.

Arrastrar una lista hacia abajo muestra un indicador de carga y recarga el contenido al soltar.

Añade una interacción "Pull to Refresh" (también llamada swipe to refresh) en [dónde].
Al tirar de la lista hacia abajo desde arriba, debe seguir al dedo con algo de resistencia y mostrar un indicador de carga que gira mientras se tira; al soltar, sigue girando mientras se recarga el contenido y luego la lista vuelve a subir con suavidad.
Actívala solo cuando la lista ya esté en la parte superior, y ofrece también un control de recarga normal para usuarios de teclado y lector de pantalla.

Una onda circular se expande y se desvanece desde el punto exacto del clic o toque.

Añade un efecto "Ripple" (también llamado material ripple o ink ripple) en [dónde].
En cada clic o toque, una onda circular suave debe extenderse desde el punto exacto pulsado hasta cubrir el elemento, desvaneciéndose mientras crece: rápida y ligera.
Recorta la onda a la forma del elemento, deja que cada pulsación rápida inicie su propia onda, y hazla empezar desde el centro al pulsar con el teclado.

Un círculo y una marca de verificación se dibujan solos para confirmar que la acción se completó.

Añade una animación "Success Checkmark" (también llamada animated success tick) en [dónde].
Un círculo debe dibujarse de un solo trazo suave, luego la marca se dibuja dentro y todo el símbolo da un pequeño salto suave: tranquilo y seguro.
Reprodúcela una vez cuando la acción tenga éxito, acompáñala de un mensaje de texto que los lectores de pantalla puedan anunciar, y muestra el símbolo terminado de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Deslizar una fila de la lista hacia un lado muestra botones de acción como eliminar o archivar.

Añade una interacción "Swipe to Delete" (también llamada swipe actions o swipe to reveal) en [dónde].
Al arrastrar una fila hacia un lado, debe moverse directamente con el dedo para descubrir detrás botones de acción como archivar y eliminar, deteniéndose cuando se ven por completo, y al soltar se desliza con suavidad a su sitio sin rebote.
Mantén el scroll vertical funcionando mientras se desliza en horizontal, y haz que las mismas acciones sean accesibles con teclado y lector de pantalla sin deslizar.

Un botón redondo se desliza por un carril y el color del carril cambia entre apagado y encendido.

Añade una animación "Toggle Switch" (también llamada switch) en [dónde].
Al activarlo o desactivarlo, el botón redondo debe deslizarse suavemente al otro extremo del carril mientras cambia el color del carril: rápido y nítido, sin rebote.
Que sea un interruptor accesible real (role="switch" con su estado checked) que también funcione con el teclado.

El cursor de texto crece o se encoge para ajustarse al tamaño del carácter que tiene al lado.

Añade un efecto "Adaptive Caret" (también llamado adaptive caret size) en [dónde].
El cursor de texto debe colocarse delante del carácter más cercano al puntero y estirarse o encogerse rápido hasta la altura de ese carácter, con un cambio de tamaño suave y ágil, sin rebote.
Evita que el texto se mueva, y haz que el cursor siga el movimiento del teclado igual que sigue al puntero.

Un cursor circular invierte los colores que tiene debajo usando mix-blend-mode difference.

Añade un "Blend-Mode Cursor" (también llamado difference cursor o inverting cursor) en [dónde].
Sustituye el puntero por un círculo sólido que quede justo debajo de él sin retraso e invierta los colores del texto y las formas por los que pasa.
Limita la mezcla a esa zona para que no se combine con el resto de la página, asegúrate de que siga invirtiendo con claridad en modo oscuro, y mantén el cursor normal en dispositivos táctiles.

Una forma o etiqueta sigue al puntero con un retraso elástico o suavizado.

Añade un "Cursor Follower" (también llamado following pointer o smooth cursor) en [dónde].
Un pequeño marcador redondo debe seguir al puntero con un retraso suave y amortiguado, y deslizarse hasta detenerse justo donde el puntero se queda quieto, sin rebotar.
Mantén visible el puntero real, que el marcador nunca bloquee los clics, y omítelo en dispositivos táctiles.

Una imagen de vista previa sigue al puntero al pasar sobre un elemento de una lista de texto.

Añade un efecto "Cursor Image Hover" (también llamado hover image follow o image preview on hover) en [dónde].
Mientras el puntero esté sobre un elemento de una lista de texto, una pequeña imagen de vista previa de ese elemento debe flotar junto al puntero, siguiéndolo con un ligero retraso suave y deslizándose a la siguiente imagen cuando el puntero pase a otro elemento.
La vista previa nunca debe bloquear los clics en la lista, y la lista debe seguir siendo totalmente usable sin ella en táctil y con teclado.

Un círculo de luz alrededor del puntero revela el contenido mientras el resto queda a oscuras.

Añade un efecto "Cursor Spotlight" (también llamado flashlight cursor o spotlight effect) en [dónde].
Un círculo de luz suave debe seguir al puntero y revelar el contenido que tiene debajo mientras el resto de la zona queda atenuado.
En dispositivos táctiles, donde no hay puntero que seguir, muestra el contenido totalmente iluminado.

Una estela de formas que se desvanecen queda detrás del puntero mientras se mueve.

Añade un efecto "Cursor Trail" (también llamado mouse trail) en [dónde].
Al mover el puntero, debe dejar detrás una estela corta de puntos pequeños que se encogen y se desvanecen rápido, para que el rastro sea corto y siga el recorrido con suavidad.
Dibuja la estela solo mientras el puntero se mueve, que nunca bloquee los clics, y omítela en dispositivos táctiles y si el usuario prefiere movimiento reducido (prefers-reduced-motion).

La flecha predeterminada se sustituye por un punto o anillo con estilo que cambia sobre los elementos interactivos.

Añade un cursor personalizado ("Custom Cursor", también llamado animated cursor o cursor replacement) en [dónde].
Sustituye la flecha predeterminada por un punto pequeño que sigue el puntero con exactitud y un anillo que lo sigue un poco por detrás, y haz que el anillo crezca con suavidad sobre enlaces y botones.
Mantén el cursor normal en dispositivos táctiles y en los campos de texto, y que el cursor personalizado nunca bloquee los clics.

El elemento se ve atraído hacia el puntero cuando este se acerca y vuelve a su sitio al alejarse.

Añade un efecto de botón magnético ("Magnetic Button", también llamado magnetic target o magnetic hover) en [dónde].
Cuando el puntero se acerque, el botón debe desplazarse un poco hacia él, con su texto moviéndose algo más, y al alejarse el puntero debe volver a su sitio con un pequeño rebote elástico.
Evita que el diseño de alrededor se desplace y desactiva la atracción en dispositivos táctiles y si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un campo de líneas cortas gira para apuntar al puntero, como limaduras de hierro alrededor de un imán.

Añade un efecto "Magnetic Filings" en [dónde].
Una cuadrícula de líneas cortas debe girar al instante para que cada una apunte directamente al puntero, como limaduras de hierro alrededor de un imán, y todas deben mirar al centro cuando no haya puntero.
Mantenlo como fondo decorativo que nunca bloquee los clics, y deja las líneas quietas si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un panel de contenido crece con suavidad hasta su altura completa o se reduce a cero al alternar su encabezado.

Añade un acordeón ("Accordion Expand-Collapse", también llamado collapse o disclosure) en [dónde].
Al pulsar un encabezado, su panel debe crecer con suavidad hasta la altura completa de su contenido y volver a cerrarse del todo con la siguiente pulsación, con la flecha del encabezado girando a la vez: rápido y suave, sin rebote.
Anima hasta la altura real del contenido en lugar de una altura fija estimada, haz que el encabezado sea un botón real que indique si está expandido y que funcione con el teclado.

Una capa oscura translúcida aparece detrás de una superposición para oscurecer la página.

Añade un "Backdrop Scrim Fade" (también llamado overlay fade o scrim) en [dónde].
Cuando se abra la superposición, una capa oscura translúcida debe aparecer suavemente sobre la página de detrás, un poco más despacio que la propia superposición, y desvanecerse de nuevo al cerrarse.
Mantén el scrim oscuro tanto en el tema claro como en el oscuro, y evita que la página de detrás se desplace o reciba clics mientras se muestra.

Un panel sube desde el borde inferior, a menudo arrastrable y con alturas de anclaje.

Añade un "Bottom Sheet Slide-Up" (también llamado bottom drawer o sheet) en [dónde].
El panel debe subir desde el borde inferior mientras la página de detrás se oscurece, frenando con suavidad hasta su sitio y sin rebote.
Reprodúcelo una vez cada vez que se abra el panel, bájalo de nuevo al cerrarlo y mantén el foco del teclado dentro del panel mientras esté abierto.

Las diapositivas se quedan en su sitio y se funden unas con otras en lugar de deslizarse.

Añade un "Carousel Crossfade" (también llamado fade slideshow o carousel fade) en [dónde].
Las diapositivas deben quedarse en su sitio y fundirse lentamente unas con otras, desapareciendo la anterior mientras aparece la siguiente al mismo tiempo, y mantenerse unos segundos antes del siguiente cambio.
Vuelve a la primera diapositiva sin cortes, pausa al pasar el ratón o al recibir el foco, y no avances automáticamente si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las diapositivas se mueven en horizontal por una ventana visible y encajan de una en una.

Añade un carrusel ("Carousel Slide", también llamado slider o swipe carousel) en [dónde].
Cada paso debe deslizar la fila de lado para que la siguiente diapositiva encaje en el centro, suave y frenando, con las vecinas asomando por los bordes y los puntos de posición siguiendo el cambio.
Avanza de una en una, admite deslizar con el dedo además de botones y flechas del teclado, y pon etiquetas a los controles para los lectores de pantalla.

Una tarjeta crece hasta convertirse en una vista de detalle completa, manteniendo un único contenedor visible que cambia de forma y revela contenido nuevo.

Añade una transición "Container Transform" (también llamada card expand to detail o expandable card) en [dónde].
Al abrir la tarjeta, el mismo contenedor debe crecer con suavidad hasta la vista de detalle completa: su contenido anterior se desvanece rápido y el nuevo aparece cuando casi ha terminado de crecer; al cerrar se reproduce a la inversa.
Mantenlo como un único contenedor continuo en lugar de un fundido entre dos cajas separadas, y mueve el foco a la vista de detalle al abrirse.

Al arrastrar un elemento, los demás se apartan deslizándose y se colocan en el nuevo orden.

Añade una lista de arrastrar para reordenar ("Drag-to-Reorder List", también llamada sortable list) en [dónde].
El elemento arrastrado debe seguir el puntero directamente y elevarse un poco, mientras los demás se apartan deslizándose con suavidad; al soltarlo debe asentarse rápido en el hueco más cercano.
Admite táctil además de ratón, y ofrece una forma de mover elementos con el teclado que anuncie la nueva posición a los lectores de pantalla.

Un panel lateral entra deslizándose desde el borde izquierdo, derecho o superior, empujando o cubriendo el contenido.

Añade un "Drawer Slide" (también llamado off-canvas o side sheet) en [dónde].
El panel debe entrar deslizándose desde el borde lateral sobre el contenido mientras la página de detrás se oscurece, rápido y frenando con suavidad, y salir igual al cerrarse.
Mantén el foco del teclado dentro del panel abierto, ciérralo con Escape o con un clic en la zona oscurecida, y devuelve el foco al botón que lo abrió.

Los elementos se deslizan con suavidad a sus nuevas posiciones y tamaños después de un cambio de diseño.

Añade una "FLIP Layout Animation" (también llamada layout animation o First-Last-Invert-Play) en [dónde].
Cuando cambie el diseño, cada elemento debe deslizarse de su posición anterior a la nueva en lugar de saltar, rápido al principio y asentándose con suavidad.
Anima solo con transforms para que la página no recalcule el diseño en cada fotograma, y pasa directamente al nuevo diseño si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Los elementos aparecen deslizándose al añadirse y salen animados al eliminarse mientras los vecinos cierran el hueco.

Añade una animación "List Item Enter/Exit" (también llamada animated list) en [dónde].
Un elemento nuevo debe abrir primero su espacio y luego aparecer deslizándose; un elemento eliminado debe desvanecerse primero y luego plegarse para que sus vecinos cierren el hueco con suavidad.
Mantén el elemento eliminado en su sitio hasta que termine su salida, para que la lista nunca salte al añadir o quitar elementos.

Una fila de contenido se desliza de lado en un bucle infinito y sin cortes.

Añade un "Marquee" (un desplazamiento horizontal infinito, también llamado ticker o marquesina) en [dónde].
El contenido debe desplazarse de derecha a izquierda a una velocidad lenta y constante, en un bucle continuo sin saltos visibles.
Páusalo al pasar el ratón por encima y detén el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las piezas de la cuadrícula se reordenan, se desvanecen o se deslizan a nuevas posiciones al aplicar un filtro u orden.

Añade un efecto "Masonry / Grid Shuffle" (también llamado filterable grid animation) en [dónde].
Al aplicar un filtro, las piezas que ya no coincidan deben encogerse y desvanecerse en su sitio mientras las restantes se deslizan con suavidad a sus nuevas posiciones; al quitar el filtro se reproduce a la inversa.
Evita que la página de alrededor salte mientras cambia la altura de la cuadrícula, y haz que los controles de filtro sean botones reales que indiquen qué filtro está seleccionado.

Un diálogo aparece mientras crece ligeramente desde su centro sobre una página oscurecida.

Añade una animación "Modal Scale-Fade In" (también llamada dialog open animation o zoom-fade dialog) en [dónde].
El diálogo debe aparecer mientras crece ligeramente desde su centro y la página de detrás se oscurece: rápido y sutil, sin rebote.
Reprodúcela una vez cada vez que se abra el diálogo, mueve el foco a él y mantenlo dentro, y usa un simple fundido si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un menú flotante aparece con un fundido y una ligera escala desde el punto donde está su disparador.

Añade una animación de menú desplegable ("Popover / Dropdown Open", también llamada menu pop o dropdown scale-fade) en [dónde].
El menú debe aparecer con un fundido mientras crece ligeramente desde la esquina junto a su disparador, rápido y nítido, y desaparecer un poco más rápido al cerrarse.
Mantenlo anclado al disparador, ciérralo con Escape o con un clic fuera y expón el estado abierto en el disparador para los lectores de pantalla.

Un elemento parece moverse y cambiar de tamaño hasta un elemento equivalente en otro lugar, como si fueran uno solo.

Añade una "Shared Layout Animation" (también llamada shared element dentro de la página) en [dónde].
Cuando cambie la selección, el elemento debe parecer moverse y cambiar de tamaño con suavidad desde su posición anterior a la nueva, asentándose con delicadeza, para que se lea como un solo objeto y no como dos.
Muestra solo una copia en cada momento y evita que el diseño de alrededor salte mientras se mueve.

Un subrayado o una píldora se desliza de la pestaña anterior a la recién seleccionada.

Añade un "Tab Indicator Slide" (también llamado sliding underline o active tab indicator) en [dónde].
Al seleccionar una pestaña nueva, el subrayado debe deslizarse de la pestaña anterior a la nueva, rápido y desacelerando con suavidad, y estirarse al ancho de la nueva pestaña si es distinto.
Mantén la semántica correcta de pestañas con navegación por flechas del teclado y mueve el indicador sin deslizarlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un mensaje breve se desliza o aparece en un borde de la pantalla, espera y luego se va; los toasts apilados se desplazan para hacer sitio.

Añade un "Toast Slide-In" (también llamado snackbar o toast notification) en [dónde].
Cada mensaje debe subir desde el borde de la pantalla y aparecer con un fundido, desacelerando con suavidad; cuando llegue un toast nuevo, los que ya se muestran deben desplazarse con suavidad para hacerle sitio.
Anuncia el mensaje a los lectores de pantalla sin robar el foco, déjalo visible el tiempo suficiente para leerlo y pausa el cierre automático al pasar el ratón o al enfocarlo.

Una pequeña etiqueta aparece con un fundido y se acomoda junto a un elemento tras una breve espera al pasar el ratón.

Añade un "Tooltip Fade" (también llamado tooltip reveal) en [dónde].
Tras una breve espera al pasar el ratón, la etiqueta debe aparecer con un fundido acomodándose ligeramente junto al elemento, y desaparecer rápido y sin espera cuando el puntero se aleje.
Muéstralo también con el foco del teclado, deja que Escape lo cierre y vincúlalo al elemento para que los lectores de pantalla lo lean.

La nueva vista se revela dentro de un círculo que se expande desde el punto del clic.

Añade una transición "Circular Reveal" (también llamada clip-path circle expand o theme toggle reveal) en [dónde].
La nueva vista debe aparecer dentro de un círculo que crece desde el control pulsado hasta cubrir toda el área: suave y constante, acelerando y frenando con suavidad.
Haz que el círculo empiece justo donde se pulsó el control y cambia al instante, sin círculo, si el usuario prefiere movimiento reducido (prefers-reduced-motion).

La página anterior se desvanece mientras la nueva aparece con un fundido en la misma área.

Añade una "Crossfade Page Transition" (también llamada cross-dissolve o fade transition) en [dónde].
Al navegar, la página anterior debe desvanecerse mientras la nueva aparece a la vez en la misma área: suave y bastante rápida.
Mantén ambas páginas en el mismo lugar para que nada se desplace durante el fundido y mueve el foco al título principal de la nueva página tras el cambio.

Unos paneles sólidos barren la pantalla para cubrir la página anterior y luego se retiran para revelar la nueva.

Añade una transición de página "Curtain / Panel Wipe" (también llamada page wipe o staggered panels) en [dónde].
Unos paneles sólidos deben barrer la pantalla uno tras otro para cubrir la página anterior, la página debe cambiar mientras está totalmente cubierta y los paneles deben seguir hasta salir de la vista para revelar la nueva: contundente y fluida.
No muestres nunca la nueva página antes de que los paneles cubran la anterior y usa un simple fundido si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El contenido saliente se desvanece por completo y luego el entrante aparece con un fundido y una ligera escala.

Añade una transición de página "Fade Through" (también llamada fade-through transition u out-in route transition) en [dónde].
Primero, el contenido saliente debe desvanecerse rápido y por completo; después, el entrante debe aparecer con un fundido mientras crece ligeramente hasta su lugar.
No dejes nunca que ambos se superpongan y evita que el diseño del contenido entrante se desplace mientras escala.

Una capa de introducción a pantalla completa con un logo o un contador se desliza o se desvanece para revelar el sitio.

Añade un "Preloader Curtain Lift" (también llamado splash screen o intro loader) en [dónde].
Una capa de introducción a pantalla completa debe mantenerse mientras se llena una barra de carga y luego subir y salir con suavidad para revelar el sitio, que se asienta con delicadeza debajo.
Reprodúcelo solo en la primera carga, no retengas nunca la página más de lo que tarda la carga real y omítelo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El contenido saliente y el entrante se mueven juntos a lo largo del eje X, Y o Z con fundidos para mostrar su relación espacial.

Añade una transición de página "Shared Axis" (también llamada shared axis X/Y/Z) en [dónde].
Al avanzar, el contenido anterior debe deslizarse un poco hacia un lado y desvanecerse rápido mientras el nuevo entra desde el otro lado y aparece justo después; al retroceder, la dirección se invierte.
Mantén el recorrido corto para que solo sugiera la dirección y ajusta el eje a la navegación: lateral para hermanos, vertical para pasos, profundidad para entrar en detalle.

Un elemento equivalente, como una miniatura, se transforma en posición y tamaño de una página a la siguiente.

Añade una transición de elemento compartido ("Shared Element Transition", también llamada hero transition o view-transition-name morph) en [dónde].
Al pasar a la página siguiente, el elemento equivalente, como una miniatura, debe moverse y crecer con suavidad hasta su lugar en la nueva página mientras el resto del contenido hace un fundido cruzado, y encogerse de vuelta al regresar.
Da a los elementos equivalentes de ambas páginas una misma identidad compartida para que se emparejen bien y recurre a un simple fundido cruzado cuando el navegador no pueda transformarlos.

La nueva página entra deslizándose por un lado mientras la anterior sale, y la dirección sigue la profundidad de navegación.

Añade una "Slide Page Transition" (también llamada push / pop o directional slide) en [dónde].
Al avanzar, la nueva página debe entrar empujando desde el lado mientras la anterior sale por el otro; al retroceder, ambas deben moverse en la dirección opuesta: suave, acelerando y frenando con suavidad.
Vincula la dirección a la profundidad de navegación, incluido el botón Atrás del navegador, y evita que la página se desplace de lado durante el deslizamiento.

La página anterior se amplía o se reduce y se desvanece mientras la nueva escala hasta su lugar.

Añade una "Zoom Page Transition" (también llamada scale transition o zoom in / out) en [dónde].
Al entrar en detalle, la página anterior debe ampliarse un poco y desvanecerse mientras la nueva crece desde un tamaño algo menor hasta su lugar; al volver, el zoom debe ir en sentido contrario: suave y rápido.
Mantén la escala sutil para que el contenido siga legible en todo momento y usa un simple fundido si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Unas barras verticales crecen y se encogen desfasadas, como un ecualizador de audio.

Añade una animación de carga "Bar Loader (Equalizer)" (también llamada bars loader o audio bars) en [dónde].
Unas pocas barras verticales deben estirarse y encogerse desfasadas entre sí como un ecualizador de audio, a un ritmo vivo pero regular.
Haz que el bucle sea continuo, dale una etiqueta de estado para lectores de pantalla y detén el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una versión diminuta y desenfocada de la imagen ocupa su lugar y se vuelve nítida cuando carga la imagen completa.

Añade un efecto de carga de imagen "Blur-Up Placeholder" (también llamado LQIP o blur placeholder) en [dónde].
Una versión diminuta y muy desenfocada de la imagen debe ocupar su espacio de inmediato y, cuando la imagen completa haya cargado, volverse nítida en su lugar con suavidad y bastante rapidez.
Reserva el tamaño exacto de la imagen para que nada se desplace cuando llegue y recorta los bordes desenfocados para que no se salgan del marco.

Una fila de puntos rebota, se desvanece o cambia de tamaño en secuencia.

Añade "Bouncing Dots" (también llamado dots loader o three-dot loader) en [dónde].
Los puntos deben saltar y aterrizar uno tras otro con un ritmo ligero y elástico, con una breve pausa antes de que la secuencia se repita.
Haz que el bucle sea continuo, dale una etiqueta de estado para lectores de pantalla y detén el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un botón reemplaza su texto por un pequeño spinner, o lo añade, mientras se ejecuta una acción.

Añade un "Button Loading State" (también llamado spinner button o loading button) en [dónde].
Al pulsarlo, el botón debe hundirse un poco, desvanecer su texto y mostrar un pequeño spinner en su lugar mientras se ejecuta la acción; al terminar, el texto vuelve.
Mantén fijo el ancho del botón mientras carga, bloquea las pulsaciones repetidas y anuncia el estado ocupado a los lectores de pantalla.

Un anillo o arco gira sin parar para indicar que algo está cargando.

Añade un "Circular Spinner" (también llamado spinner o throbber) en [dónde].
Un arco debe girar a ritmo constante alrededor de un anillo tenue mientras se alarga y se acorta, suave y continuo.
Haz que el giro sea continuo, dale una etiqueta de carga para lectores de pantalla y ralentízalo o detenlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una barra se llena de izquierda a derecha en proporción al avance de la tarea.

Añade una barra de progreso determinada (Determinate Progress Bar, también llamada progress bar fill o progress indicator) en [dónde].
La barra debe llenarse de izquierda a derecha al ritmo del progreso real, con transiciones suaves entre actualizaciones, y mostrar el porcentaje a su lado.
Usa la semántica correcta de barra de progreso con valores actual, mínimo y máximo para que los lectores de pantalla puedan leerla, y nunca dejes que el relleno retroceda.

Un segmento de barra recorre una y otra vez el carril cuando no se conoce la duración.

Añade una barra de progreso indeterminada (Indeterminate Linear Progress, también llamada indeterminate progress bar) en [dónde].
Un segmento corto debe recorrer el carril de un extremo a otro una y otra vez, rápido y suave, mientras no se sepa cuánto durará la tarea.
Deja que el segmento entre y salga del carril por completo para que el bucle no tenga cortes visibles, y márcalo como barra de progreso ocupada para lectores de pantalla.

Una lista de pasos se resalta o se marca uno a uno a medida que avanza una tarea larga.

Añade un "Multi-Step Loader" (también llamado step loader o checklist loader) en [dónde].
Los pasos deben iluminarse uno a uno de arriba abajo, y cada uno debe recibir una pequeña marca de verificación que aparece con un pequeño salto al completarse, a un ritmo tranquilo y fácil de leer.
Avanza los pasos según el progreso real de la tarea en lugar de un temporizador fijo, y anuncia cada paso completado a los lectores de pantalla.

Un arco crece alrededor de un anillo para mostrar el porcentaje completado.

Añade un "Progress Ring" (también llamado circular progress o radial progress) en [dónde].
Empezando arriba, un arco debe crecer en el sentido de las agujas del reloj alrededor del anillo para mostrar el porcentaje completado, frenando suavemente al asentarse, mientras el número del centro sube a la par.
Mantén sincronizados el arco y el número, y expón el valor con la semántica correcta de barra de progreso para lectores de pantalla.

Bloques grises de marcador de posición aparecen y se desvanecen suavemente para indicar que algo carga.

Añade un "Pulse Placeholder" (también llamado skeleton pulse) en [dónde].
Bloques grises con la forma del contenido que va a llegar deben aclararse y volver despacio, todos juntos, con un ritmo suave y constante.
Ajusta los marcadores a la maquetación real para que nada salte cuando llegue el contenido, y déjalos quietos si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Sobre formas grises de marcador de posición pasa un brillo de luz de lado a lado.

Añade un "Skeleton Shimmer" (también llamado skeleton wave o shimmer effect) en [dónde].
Una franja de luz suave debe cruzar las formas grises de izquierda a derecha y hacer una breve pausa antes de la siguiente pasada: fluido y sin prisa.
Ajusta las formas a la maquetación real para que nada salte cuando cargue el contenido, y muestra marcadores estáticos si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una barra fina en la parte superior de la página avanza poco a poco durante la navegación y se completa al cargar.

Añade una "Top Loading Bar" (también llamada page progress bar) en [dónde].
Una barra fina en el borde superior debe avanzar rápido al principio y luego cada vez más despacio mientras carga la página; cuando termine, debe correr hasta el final y desvanecerse.
Nunca dejes que llegue al final antes de que la carga termine de verdad, y evita que tape o desplace el contenido de la página.

Tres puntos dentro de una burbuja laten o suben por turnos para mostrar que alguien o una IA está escribiendo.

Añade un "Typing Indicator" (también llamado typing dots) en [dónde].
Los puntos dentro de una pequeña burbuja de chat deben subir y brillar uno tras otro con un ritmo suave y delicado mientras la otra parte escribe.
Haz que el bucle sea continuo, quita la burbuja en cuanto llegue el mensaje y da a los lectores de pantalla un breve texto de estado en lugar de los puntos.

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