Micro-interactions
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.
Install
Props
What It Demonstrates
- Spring
- Motion driven by physics (tension, mass, damping) rather than a set duration.
- Follow-through
- Parts of an element keep moving and settle slightly after the main motion stops, adding weight.
- Hover effect
- Visual change when the cursor moves over an element.
- Momentum
- Motion that carries velocity, especially after a drag or interruption.
Related Components
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.
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.
DismissPro
Throw the top card away and the stack closes up behind it. Distance commits, but so does speed — a fast flick from barely anywhere counts, and anything short of both rubber-bands home carrying the velocity you let go at.
UnfoldPro
A row of slats that open on approach while their neighbours give up the room on a spring.