supafast-ui · sub-skill: MOTION

Movimiento sobrio y funcional. La mayoría de transiciones son de color/posición a duration-200. Animaciones decorativas se declaran como keyframes en @theme y se exponen como animate-*.

Transiciones por defecto

Color/estado: transition-colors (nav, botones ghost, switch track).
Multi-prop: transition-all (controles con focus ring + fondo).
Solo una prop cara (ej. width del sidebar): transition-[width] duration-200.
Duración estándar 200ms; micro-interacciones 150ms (token --default-transition-duration: .15s).
Curvas: --ease-out: cubic-bezier(0,0,.2,1) y --ease-in-out: cubic-bezier(.4,0,.2,1).
Thumb del switch: transition-transform data-checked:translate-x-4 data-unchecked:translate-x-0.

Keyframes decorativos (patrón del logo)

Se declaran como --animate-* en @theme inline + @keyframes en el CSS global. Ejemplo real:

@theme inline {
  --animate-logo-square: logo-square 1.4s ease-in-out infinite;
  --animate-logo-shimmer-slide: logo-shimmer-slide 2s linear infinite;
  --animate-logo-shimmer-text: logo-shimmer-text 2s linear infinite;
}

@keyframes logo-square {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  45%      { transform: scale(0.55); opacity: 0.35; }
  65%      { transform: scale(1.25); opacity: 1;    }
}
@keyframes logo-shimmer-slide { from { transform: translateX(-250%); } to { transform: translateX(250%); } }
@keyframes logo-shimmer-text  { from { background-position: 200% center; } to { background-position: -200% center; } }

Uso en TSX: className="animate-logo-square". tw-animate-css está importado para utilidades extra.

Reglas

Nada de animaciones largas ni bouncy en UI funcional; reservar lo expresivo para branding (logo).
Animar transform/opacity (compositables), evitar animar layout (width/height) salvo necesidad puntual.
Respetar prefers-reduced-motion para animaciones infinitas/decorativas.
Para entrar/salir de overlays (dialog/sheet/popover) usar las utilidades de tw-animate-css coherentes con los estados data-* de base-ui, no animaciones manuales ad-hoc.