Movimiento
Una sola curva, el hover que aclara con sombra, y duraciones por tipo de cambio.
Una sola curva
Todo lo que se mueve en Striker usa esta curva: arranca casi instantáneo y frena con calma. Una curva única es lo que hace que diez animaciones distintas se sientan como un solo producto.
--sds-ease-standard
El botón aclara con sombra, no con forma
El botón es cuadrado, plano y no se mueve nunca: al pasar el mouse la sombra se enciende por detrás y el fondo aclara un paso; al presionar, la sombra se apaga y el fondo se hunde. Un botón que se desplaza bajo el cursor tiembla en el borde del hover — el movimiento está prohibido aquí.
El hover tiene su propio tempo: 300ms, más lento que un cambio de estado a propósito. La sombra se enciende con calma y soltar el cursor la apaga igual de suave.
Entrada: el contenido llega, no aparece
Lo que entra a la vista sube 8px y se revela en 280ms — una vez. Sin loops, sin secuencias que se repiten al hacer scroll, sin esperar a que la página «actúe».
La demo corre con los tokens reales: con prefers-reduced-motion las duraciones bajan a 0 y esto mismo aparece instantáneo.
Lead calificado
Constructora Andes · responde en 4 minutos
Overlay: cae desde su origen
Los flotantes caen 8px desde su origen con la sombra flotante, y las opciones entran en cascada de 40ms — nunca desde el centro de la pantalla, y nunca escalando: escalar un contenedor con texto re-rasteriza las letras al terminar y se ven saltar.
Prohibido en todo el sistema: scroll hijacking, loops decorativos, glitch, typewriter, y cualquier animación que el usuario tenga que esperar dos veces.
Duraciones por tipo de cambio
- feedback140mspress y toggles
- state200mscambio de estado y color
- hover300mssombras de hover — el tempo más suave
- expand240msacordeones y alturas
- overlay340msmenús, popovers, diálogos
- entry280mscontenido que llega a la vista
- Curva
- cubic-bezier(0.16, 1, 0.3, 1)
- Hover de botón
- sombra flotante · 300ms · sin moverse
- Active de botón
- sombra apagada + action-active
- Entrada
- +8px → 0 · una sola vez
- Overlay
- cae del origen · ítems en cascada 40ms
- Reduced motion
- todas las duraciones a 0