Micro-interacciones

El thumb del toggle debe sobrepasar su posición final y retroceder levemente (overshoot), como si tuviera masa. La curva ideal es cubic-bezier(.34,1.56,.64,1). Sin spring, el toggle parece un elemento de formulario de 2005.

El like tiene tres fases: (1) escala a 1.4 en 80ms, (2) rebota a 0.9 en 60ms, (3) vuelve a 1 en 100ms. El color cambia al inicio de la fase 1. Agregar particulas opcionales en la fase 2 para refuerzo visual.

Al copiar, la confirmación tiene tres capas simultaneas: (1) el icono cambia de clipboard a checkmark, (2) el texto cambia a "Copiado", (3) un tooltip efimero aparece 200ms después y desaparece en 1.5s. Las tres capas se revierten solas.

El drag tiene cinco capas simultaneas: (1) cursor cambia a grab/grabbing, (2) el elemento sube con sombra elevada, (3) escala a 1.05, (4) los destinos validos se iluminan, (5) el fantasma (ghost) sigue al cursor con 0.85 de opacidad.

La acción se dispara cuando el swipe supera el 35% del ancho de la fila. Por debajo rebota al origen. El icono de acción aparece progresivamente a medida que avanza el swipe. Al superar el umbral el item vibra sutilmente para confirmar.

El download tiene 4 etapas visuales: (1) icono de descarga pulsando, (2) circulo de progreso llenandose con porcentaje, (3) checkmark al completar con scale spring, (4) estado final de archivo disponible. Nunca saltarse etapas.

El share sheet emerge desde el borde inferior con un overshoot de 8px en 320ms. El fondo se oscurece gradualmente a 0.4 de opacidad. Al cerrar, desaparece hacia abajo en 200ms sin overshoot. El origen siempre es el borde inferior, nunca el centro.