Micro-interactions
Unfold
ProA row of slats that open on approach while their neighbours give up the room on a spring.
Install
Props
What It Demonstrates
- Accordion / Collapse
- A section smoothly expands and collapses its height to show or hide content.
- Layout animation
- When an element's size or position changes, it animates to the new spot instead of snapping.
- 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.
- Hover effect
- Visual change when the cursor moves over an element.
- Layout thrashing
- Animating properties like width, height, top, or left that force the browser to recalculate layout every frame, causing jank.
Related Components
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.
Hover List
A display-type list where a shared accent block springs between rows on hover while the text indents and inverts.
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 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.
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.