Micro-interactions
Hover List
A display-type list where a shared accent block springs between rows on hover while the text indents and inverts.
Install
Props
What It Demonstrates
- Hover effect
- Visual change when the cursor moves over an element.
- 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.
- Continuity transition
- A change that keeps the user oriented by visually connecting before and after. For example, making the same rectangle bigger and smaller.
Related Components
UnfoldPro
A row of slats that open on approach while their neighbours give up the room on a spring.
Morph Dialog
A dialog that morphs open from its trigger via shared-layout animation, with elements that travel between card and panel.
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.
Segmented
A segmented control whose indicator travels on a shared layout id and smears in the direction it is moving.
Reorder
A sortable list that answers to a finger and to a keyboard equally. Grab a row, and the rest step aside to make the space.