Design SystemMotion

Motion & Animation

Ambrosio Health's motion system. Timing scale, easing curves, keyframe library and micro-interactions. All values are reusable CSS variables.

01 · System

Timing Scale

System duration scale. Each value has a specific use to maintain consistency.

Token	Duration	Uso
--dur-instant	0ms	Mudanças de estado sem animação (focus, active)
--dur-fast	100ms	Hover states, tooltips, micro-feedback
--dur-base	200ms	Botões, links, cor background — padrão
--dur-medium	300ms	Accordions, tabs, dropdowns
--dur-slow	400ms	Modals, drawers, page transitions
--dur-slower	600ms	Entrance animations, hero elements
--dur-slowest	1000ms	Loaders, progress bars, onboarding

02 · System

Easing Curves

Hover over each card to see the curve animation in action. 600ms duration for clear visualization.

Linear

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

Velocidade constante. Evitar para UI — parece mecânico.

Ease (Default CSS)

cubic-bezier(.25,.1,.25,1)

Suave e natural. Bom para transições gerais de UI.

Ease Out

cubic-bezier(0, 0, .2, 1)

Elementos que entram na tela. Parece natural e responsivo.

Ease In

cubic-bezier(.4, 0, 1, 1)

Elementos que saem da tela. Acelera ao final.

Spring (Preferred)

cubic-bezier(.16, 1, .3, 1)

Easing principal do sistema. Modals, cards, dropdowns.

Overshoot

cubic-bezier(.34, 1.56, .64, 1)

Ultrapassa o destino e volta. Usar com moderação para ênfase.

03 · Animation

Keyframes Library

Reusable CSS animations. Each box applies its animation in a continuous loop.

FADE IN

1.5s · ease-in-out · infinite

SLIDE UP

1.2s · ease-out · infinite

SCALE IN

1.2s · spring · infinite

BOUNCE

1.4s · ease-in-out · infinite

PULSE

1.5s · ease-in-out · infinite

SPIN

1.2s · linear · infinite

SHIMMER

1.5s · linear · infinite

FLOAT

2.5s · ease-in-out · infinite

04 · Animation

Micro Interactions

Hover over the buttons to see the system micro-animations in action.