Foundation · Lumina

Motion

Movimento é hierarquia. No Lumina, transições contam para o usuário onde ele está vindo e para onde está indo, sem nunca tropeçar.

Easings

Sempre cubic-bezier, nunca linear (exceto para spinners contínuos). Passe o cursor por cada card para sentir a curva.

--ease-lumina

cubic-bezier(0.4, 0, 0.2, 1)

Padrão do Lumina. Para tudo, exceto exceções.

--ease-cinematic

cubic-bezier(0.65, 0.05, 0.35, 1)

Entradas grandes, hero, cenas inteiras.

--ease-out-soft

cubic-bezier(0.22, 1, 0.36, 1)

Fade-in suave, sem overshoot.

--ease-in-out-quart

cubic-bezier(0.76, 0, 0.24, 1)

Quando precisa de aceleração simétrica.

A faixa Lumina é de 150 a 250 ms. Menos parece bug, mais parece travado. Hover dispara o demo.

--duration-100

100 ms

Microinterações sem peso (ripple, foco)

--duration-150

150 ms

Hover de menu, item de lista

--duration-200

200 ms

Padrão para hover de botão

--duration-250

250 ms

Collapsible, popover

--duration-480

480 ms

Mood transitions (exceção, cinematográfico)

--duration-1100

1100 ms

Entrada cinematográfica (hero)

TSX