Overshoot
It carries past the mark and swings back — the tell that something has real momentum, not a scripted stop.
GLIDE · Motion UI Kit
It doesn't ease. It springs.
GLIDE is a component kit where selection glides on real springs — it overshoots, squashes, and settles like something with weight. Not a tween in sight.
hover · tune · feel
Hover the items — the pill overshoots its target, then squashes as it slows. Nudge the sliders and feel the difference.
velocity0 px/s
squash1.00×
statesettled
01 — The model
Three things a spring does that a tween never will.
Every indicator in GLIDE is integrated frame-by-frame from tension and friction. No fixed duration. Motion length falls out of the physics.
Squash & stretch
Velocity deforms the pill along its travel axis — fast means stretched and thin, the moment of impact means squat and wide.
Settle
Each bounce loses energy to friction until it comes to rest — a decay curve, not a hard cut to the final frame.
02 — The kit
One spring, every selection surface.
The same engine drives a top nav, a segmented control, a sidebar, and a filter row. Switch tabs — the underline glides too.
Segmented control
Tighter geometry, solid fill. The pill snaps between equal cells and the label crossfades to ink as it lands.
- Instant — click anywhere, the fill chases the pointer.
- Contrast-aware — active label flips to background ink.
Vertical sidebar
Same engine, rotated ninety degrees. The indicator springs on the Y axis and squashes vertically as it drops between rows.
- Axis-agnostic — one config, either orientation.
- Icon-safe — rows keep their glyphs perfectly aligned.
Filter chips
Wrapping is where most indicators break. GLIDE re-measures on resize, so the pill springs across line breaks without a stutter.
- Wrap-aware — jumps rows on both X and Y at once.
- Resilient — re-anchors on layout and font shifts.
03 — The numbers
Small kit. Serious weight.
The whole spring solver ships in a rounding error. Everything else is markup you already write.
Components
On any surface
Spring core, gzipped
Dependencies
Give your interface a little momentum.
Drop GLIDE into any framework. Feed it a container of items and it does the measuring, the springing, and the squashing for you.