VendHub Design System

Motion & Animation

4 easing curves, 7 duration tokens, 6 animation patterns — purposeful motion that communicates state, never decoration.

Ease Out
Ease In
In-Out
Spring
01 · Easing

4 Easing Curves — Hover to Preview

Every curve has a specific role. Hover any card to see the ball travel with that easing applied.

Ease Out
cubic-bezier(0, 0, 0.2, 1)
Fast start, smooth deceleration
~80% of all interactions
Ease In
cubic-bezier(0.4, 0, 1, 1)
Slow start, accelerates out
Exits only
Ease In-Out
cubic-bezier(0.4, 0, 0.2, 1)
Smooth start and end
Layout shifts, accordion
Spring
cubic-bezier(0.175, 0.885, 0.32, 1.275)
Overshoots then settles — playful
Success states, toasts
02 · Duration

7 Duration Tokens

Faster = micro feedback. Slower = layout changes. Bar width is proportional to the duration.

03 · Patterns

6 Animation Patterns — Hover to Play

Named patterns that combine easing + duration + transform. Hover each card to see the animation.

Fade Out
150ms · ease-in
Lift
200ms · ease-out
Scale Up
200ms · ease-out
Slide In
200ms · ease-out
Morph
300ms · ease-in-out
Emphasis
400ms · spring