Toggle Switch
También llamado Switch, Switch Thumb Slide
Un botón redondo se desliza por un carril y el color del carril cambia entre apagado y encendido.
Se usa en
Ajustes, modo oscuro
Variantes
- checkbox-hack toggle
- role=switch
Prompt
Sustituye [dónde] por la parte de tu página y pega el prompt en tu agente de IA. Cada prompt incluye el nombre de la animación, así la próxima vez puedes pedirla solo por su nombre.
Añade 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.Animaciones parecidas
Haz clic
Checkbox Check Draw
También llamado Animated checkbox, Checkmark draw
Al marcar la casilla, se dibuja una marca de verificación trazo a trazo en su interior.
Se usa en
Formularios, listas de tareas
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.ABC
Haz clic
Tab Indicator Slide
También llamado Sliding underline, Active tab indicator, Segmented control pill
Un subrayado o una píldora se desliza de la pestaña anterior a la recién seleccionada.
Se usa en
Barras de pestañas, controles segmentados
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).••••••ABCDEF
Haz clic
Password Reveal Toggle (mostrar/ocultar contraseña)
También llamado Show/hide password, Eye icon toggle
Un icono de ojo cambia entre abierto y tachado al mostrar u ocultar la contraseña.
Se usa en
Formularios de inicio de sesión y registro
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.Más en Micro-interaction
A
1
Haz clic
Add to Cart Fly
También llamado Fly to cart, Add-to-cart animation
La imagen del producto se encoge y vuela en arco hasta el icono del carrito.
Se usa en
Comercio electrónico
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.A
Haz clic
Confetti (confeti)
También llamado Confetti burst, Celebration
Trozos de papel de colores salen disparados y caen para celebrar un éxito.
Se usa en
Compra completada, objetivo alcanzado
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).