Microinteraction study · No. 054

Small joys,
ten of them.

Interfaces are remembered for their smallest moments: the way a switch lands, the pause before a checkmark. Each card below is one such moment, built by hand with spring physics and system fonts only.

01

Magnetic button

Pulls toward the cursor within a radius; the label drifts a little further than the body.

02

Liquid toggle

The knob stretches like a droplet mid-travel and overshoots before settling.

03

Drawn checkmark

The tick is a stroked path revealed by dash-offset; the box tilts as it fills.

04

Like with burst

Twelve particles launch on radial vectors, decelerate and fade, each with its own hue.

45
05

Elastic slider

The thumb lags on a spring and squashes in the direction of travel; the tooltip pops with overshoot.

06

Ripple tabs

A ripple blooms from the click point while the indicator glides and resizes to the new tab.

Quarterly report

Revenue, retention and roadmap in one place. Hover to read on.

07

Cursor-lit border

A masked gradient border and inner glow track the pointer; copy rises on hover.

Press Enter to validate
08

Floating label input

The label shrinks into the corner; invalid entries shake, valid ones draw a green check.

09

Springy segments

The pill is driven by a damped spring and stretches while in flight, like a rubber band.

10

Morphing download

The pill collapses into a ring that fills with progress, then flips green with a drawn check.