Micro-interactions
Focus Grid
ProA five-tile bento where any tile you pick takes the large slot and the rest slide back into order around it.
Install
Props
What It Demonstrates
- Layout animation
- When an element's size or position changes, it animates to the new spot instead of snapping.
- Shared element transition
- An element travels and transforms from one position into another, like a thumbnail expanding into a card.
- Spring
- Motion driven by physics (tension, mass, damping) rather than a set duration.
- Stiffness / Tension
- How strongly the spring pulls toward its target. Higher feels snappier.
- Damping
- How quickly a spring settles. Lower damping means more bounce and oscillation.
Related Components
UnfoldPro
A row of slats that open on approach while their neighbours give up the room on a spring.
Dial
A machined rotary knob: angular drag with detents you can feel on the way past, inertia on a flick, and a spring that settles into the nearest stop. The angle lives in a motion value rather than in React state, because a drag writes it sixty times a second and a spring more often than that, so the only thing React holds is the detent index, and only when that integer actually changes. Arrow keys step through the same spring the hand does, so the keyboard is not a second, worse path to the same control.
Lever
An industrial breaker lever with a real over-centre mechanism. Displayed travel lags the raw pointer travel by a bump curve peaked at the threshold, so approaching it the handle drags heavier, and crossing it the lag collapses and the handle races ahead of the finger. That is why a half-hearted push falls back the way a real breaker does. Release projects the flick's velocity past the threshold before choosing a side, so momentum can finish a throw the finger only started, and the keyboard commits through exactly the same spring the hand uses. The throw is a motion value. React holds only the committed side.
Magnetic DockPro
A dock whose items swell under the pointer and carry their neighbours part of the way with them. One shared value drives the whole row, so nothing re-renders while you sweep across it — and focusing an item writes the same value, which is why the keyboard gets the identical effect rather than a substitute for it.
Morph Dialog
A dialog that morphs open from its trigger via shared-layout animation, with elements that travel between card and panel.
Hover List
A display-type list where a shared accent block springs between rows on hover while the text indents and inverts.