AXIS Design System Lab
← All patterns

candidate · greenhouse-ui-platform

efeonce.motion

Version 0.1.1. A published contract for products built by agents and humans.

HTML + CSS reference0.1.1

Reference implementation

Motion Lab — primitiva GSAP

✓ Token-backed

Referencia viva de motion: las variants, duraciones y easings se derivan de un contrato portable. Hover, tap y toggles simples siguen en CSS; las demos orquestadas se reproducen con un controlador vanilla mínimo.

AXIS
Tokens

Duraciones y easing

Escala fija del design system. GSAP consume los mismos valores en segundos y las curvas conservan paridad con CSS.

Duración
instant75 ms
short150 ms
standard200 ms
medium300 ms
long400 ms
extended600 ms
Easing
emphasizedcubic-bezier(0.2, 0, 0, 1)
standardcubic-bezier(0.4, 0, 0.2, 1)
emphasizedAcceleratecubic-bezier(0.3, 0, 0.8, 0.15)
linearlinear
Variants

Modos funcionales oficiales

Cada variant es un modo, no un skin. Reproduce cada demo para ver la entrada; reduced-motion mantiene el significado sin desplazamiento.

entrance

Fade + leve desplazamiento al montar.

Panelentró al montar
<Motion variant='entrance'>…</Motion>
stagger

Los hijos directos entran en secuencia.

Primera filaSegunda filaTercera filaCuarta fila
<Motion kind='listMount'>…</Motion>
timeline

Secuencia orquestada vía callback declarativo.

<Motion variant='timeline' build callback>…</Motion>
scrollReveal

Se revela al entrar en viewport, una sola vez.

Secciónrevelada al hacer scroll
<Motion kind='sectionReveal'>…</Motion>
Accesibilidad

Contrato prefers-reduced-motion

Cuando el sistema operativo pide reduced-motion, las entradas se vuelven cross-fade/snap, el scroll reveal queda visible y los timelines colapsan.

El contenido nunca queda oculto: puedes inspeccionar el estado final equivalente a un fallo de JS.

Framework-agnostic reference. Consumer adapters are reviewed against it.

Promotion evidence

Before stable

  • fixture:motion-duration-scale
  • fixture:motion-easing-scale
  • fixture:motion-four-variants
  • fixture:motion-reduced
  • desktop-mobile-keyboard
  • reduced-motion
  • Keyboard and focus
  • 390 px responsive
  • Reduced motion