Sistema de motion

Cámbialo, en tres niveles

Cada componente tiene un valor por defecto sensato. Tú decides dónde va el movimiento y cuál, sin modificar nada del kit.

1. Toda la app: ThemeProvider motion define el modo (expressive, productive, reduced u off), sigue o reemplaza el ajuste de movimiento reducido del sistema, escala la velocidad y la intensidad, y cambia el valor por defecto por tipo de componente.
2. Un tipo de componente, en CSS: .alea-popover { --alea-enter: alea-m-fade-in; --alea-exit: alea-m-fade-out; }. Estas variables no se heredan, así un diálogo nunca pasa su movimiento al select de adentro.
3. Una instancia: cada overlay acepta una prop motion : un preset, false, o { enter, exit, duration, easing, delay }. Míralo en vivo.

<ThemeProvider motion={{
  mode: 'productive',        // expressive (default) | productive | reduced | off
  reduced: 'system',         // follow the OS (default) | 'always' | 'never'
  speed: 0.9,                // multiplies every duration
  intensity: 1.2,            // multiplies distances, scales and blur
  components: { dialog: 'scale', tooltip: 'fade', toast: { enter: 'slide-left', duration: 300 } },
}}>

<Select motion="blur" />
<DialogModal motion={{ enter: 'zoom', duration: 320, easing: 'spring' }} />
<Popover motion={false} />

Presets: fade, scale, pop, rise, drop, slide-up, slide-down, slide-left, slide-right, blur, zoom, flip, morph, none. Cada uno es un par de keyframes, alea-m-<preset>-in y -out, que también puedes usar en tu propio CSS.

Modos

Prueba los mismos controles en cada modo. Productive es más corto y discreto, para apps densas; reduced mantiene los fundidos y quita los desplazamientos; off quita todas las animaciones.

Patrones

El botón abajo de la pantalla repite las demos automáticas; el resto lo puedes probar a mano.

Curvas

Duraciones, distancias y escalas

Movimiento reducido

• Las distancias, escalas, la elevación y el stagger van a cero: los overlays y elementos aparecen en su lugar, nada cruza la pantalla.
• Las duraciones lentas se acortan a base; la curva emphasized deja de rebotar.
• Los bucles decorativos se detienen (pulse, orbes, el ping del indicador); el brillo del esqueleto baja a 3 s. Los spinners siguen girando porque te dicen que algo está pasando.
• Nada importante espera a una animación: las salidas terminan en menos de 200 ms, y el foco se mueve de inmediato.

Reglas para componentes nuevos

• Usa un patrón; si ninguno sirve, agrega uno aquí primero. Nunca un keyframe suelto.
• Entra con ease-out, sal con ease-in y más rápido que la entrada.
• Aparece desde 0.01, no desde 0, así la primera pintura cuenta.
• Anima solo transform y opacity (y height para expand): sin saltos de diseño.
• En Figma, los mismos patrones son componentes interactivos con Smart Animate en la curva ease-out.