Pillar · the heart
Motion
Motion is where Zippex earns its feel. Fast, natural, purposeful. Grounded in Emil Kowalski’s framework and codified into tokens every app shares.
Motion in action
The signature save bar. Toggle the setting, then save, or simulate an error.
Easing curves
Built-in CSS easings are too weak. Each dot loops with its real ease.
Out
cubic-bezier(0.23, 1, 0.32, 1)
Entrances, exits, the responsive default.
In-Out
cubic-bezier(0.65, 0, 0.35, 1)
On-screen movement & morphs.
Drawer
cubic-bezier(0.32, 0.72, 0, 1)
iOS-like sheets and drawers.
Soft
cubic-bezier(0.25, 0.46, 0.45, 0.94)
Hover and color changes only.
Durations
Everything UI-facing stays under 300ms. A 180ms dropdown feels faster than a 400ms one.
Press
140ms
button / tap feedback
Fast
180ms
tooltips, small popovers
Normal
240ms
dropdowns, tabs, selects
Slow
400ms
modals, drawers, sheets
Spring presets
Springs simulate physics: they settle and stay interruptible. Click rapidly to retarget.
Snappy
stiffness 500, damping 30
Click rapidly, it retargets from its current velocity.
Gentle
stiffness 300, damping 25
Click rapidly, it retargets from its current velocity.
Pop
stiffness 400, damping 22
Click rapidly, it retargets from its current velocity.
Bouncy
stiffness 400, damping 15
Click rapidly, it retargets from its current velocity.
Interaction feedback
The smallest motions, felt on every press and hover.
Hover me, lift
Stagger
Siblings entering together cascade 30 to 80ms apart, never all at once.
- 1Order placed
- 2Driver assigned
- 3Picked up
- 4On the way
- 5Delivered
The motion law
Eight rules. Every demo on this site obeys them.
Animate transform & opacity only, GPU, skips layout + paint.
Custom easing curves. UI motion stays under 300ms.
Springs for gestures, drag, and interruptible motion.
scale(0.97) press feedback on every pressable element.
Respect prefers-reduced-motion, keep opacity, drop movement.
Never ease-in on UI, it starts slow and feels sluggish.
Never animate from scale(0), start at scale(0.95) + opacity.
Never animate keyboard-repeated actions (⌘S, command palette).