Tokens de Movimento

Durações de transição e curvas de easing nos três design systems. Cada DS tem seu próprio ritmo — brutalist é rápido, editorial é suave.

Durações de Transição

Passe o mouse nas caixas abaixo para sentir a diferença de velocidade entre os design systems.

--transition-fast150ms

--transition-base250ms

--transition-slow400ms

Token	ds-editorial	ds-brutalist	ds-clean
`--transition-fast`	150ms	80ms	120ms
`--transition-base`	250ms	150ms	200ms
`--transition-slow`	400ms	250ms	300ms

Curvas de Easing

Todos os design systems compartilham as mesmas curvas base, mas --easing-spring varia por personalidade do DS.

Token	Rótulo	Valor
`--easing-default`	Standard	`cubic-bezier(0.4, 0, 0.2, 1)`
`--easing-in`	Accelerate	`cubic-bezier(0.4, 0, 1, 1)`
`--easing-out`	Decelerate	`cubic-bezier(0, 0, 0.2, 1)`
`--easing-spring`	Spring	editorial: `cubic-bezier(0.25, 1.25, 0.5, 1)` brutalist: `cubic-bezier(0.5, 2, 0.5, 1)` clean: `cubic-bezier(0.34, 1.56, 0.64, 1)`

Uso

Aplique os tokens de movimento diretamente nos seus CSS Modules:

.button {
  transition: background var(--transition-fast) var(--easing-default),
              transform  var(--transition-fast) var(--easing-spring);
}