Micro-interactions
Magnetic Dock
ProA 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.
Install
Props
What It Demonstrates
- Hover effect
- Visual change when the cursor moves over an element.
- 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.
- Spatial consistency
- Animating so an element keeps its identity and position across states, so users never lose track of where things went.
- Follow-through
- Parts of an element keep moving and settle slightly after the main motion stops, adding weight.
- Purposeful animation
- Motion should serve a function — orient, give feedback, show relationships — not just decorate.
Related Components
UnfoldPro
A row of slats that open on approach while their neighbours give up the room on a spring.
Shadow Cursor
A custom cursor with a shadow at its heel. A precise dot leads while a lagging blade trails on a spring, and when it crosses an interactive element the trail pools and swells around it, inverting whatever lies beneath. Scoped entirely to its own stage, so the page cursor is never touched.
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.
Hover List
A display-type list where a shared accent block springs between rows on hover while the text indents and inverts.
Magnetic Button
A button that leans into your cursor. Caught in a magnetic field it slides toward the pointer while an amethyst aura swells with proximity, then snaps home on a spring and answers every click with a dark ripple bursting outward from the point of contact.