Signature interactions
The crafted moments that make Zippex feel like Zippex. Each one is a live, copy-paste demo.
Save morph
A 22px orb blooms into a pill, then collapses back as it confirms.
Refresh button
A pill that squishes to a spinning circle, then springs back to a green confirmation.
Animated tabs
A single pill morphs between tabs with a shared layout animation.
Confetti
A burst of delight. Reserved for rare first-time moments, never high-frequency actions.
Shimmer skeletons
A loading placeholder that sweeps, then cross-fades into real content.
Live status
A pulsing dot signals real-time activity: driver location, live tracking.
Staggered entrance
List items cascade in, each a beat after the last.
- 1Order placed
- 2Driver assigned
- 3Picked up
- 4On the way
- 5Delivered
Bottom sheet
The iOS drawer curve with drag-to-dismiss. A quick flick is enough.
Toast
Enters and exits from the same edge, so swipe-to-dismiss feels intuitive. Stacks on repeat.
Brand silk
A custom WebGL shader: domain-warped noise flowing in navy, teal, and ember, with in-shader film grain. The texture behind onboarding, courier search, and empty states. Pauses off-screen; freezes to a still under reduced motion.
Live capsule
One pill carries the whole order. It resizes on a spring while contents blur-swap, so each status change reads as one object transforming.
Route tracer
The logistics signature: the route draws itself while the courier dot rides the same curve, and the destination pings on arrival.
Delivery timeline
Order progress as one continuous line. The fill springs forward, checkmarks pop a beat later, and the current step breathes.
Number ticker
An odometer for money and minutes. Digits roll on springs instead of blinking, so earnings feel earned.
Hold to confirm
Actions that must never happen by accident take a deliberate hold, not a dialog. Slow linear press while the user decides; instant snap-back when they release. Toned green for accepting, red for destroying.
Press is slow and deliberate · release snaps back instantly
Verification code
The front door of every Zippex app. Digits pop in, the active cell breathes a caret, success glows, and a wrong code shakes once and clears itself.
Magnetic CTA
Decorative gravity for the one button that matters per screen. Springs toward the cursor; the label leans a touch less, which sells the depth. Fine pointers only.