A button that leans toward the cursor with a springy, physical pull.
21 components
React Micro-interactions for Buttons, Toggles and Forms
Micro-interactions are the answers an interface gives when someone acts: a button that shows it is saving, a toggle that stretches on its way across, a heart that bursts when liked, a slider that gives a little at its ends. These React components respond to clicks, taps and keys with motion that confirms what happened. Every one is a real button, input or switch underneath, so keyboards and screen readers get the same answers the mouse does.
A button that fills while held, so destructive actions can never happen by accident.
Morphs from its label to a spinner, then to a drawn tick or a shake, so every save feels answered.
A deck you swipe through: fling the top card and it tucks in at the back.
Cards that morph smoothly into a full detail view, then fold back into place.
Bars cover the key facts like a classified file, then lift one by one on scroll, hover or click.
Accessible tabs with a sliding indicator and soft content transitions.
A floating icon bar that magnifies and lifts around the pointer, with tooltips and a gliding active indicator.
A ⌘K palette with live filtering, grouped results and a highlight that glides between them.
Command CentrePlus
A ⌘K command palette with recent actions, fuzzy search across pages and commands, and scope tabs.
A switch whose knob stretches like liquid on its way across, then settles.
One-time-code boxes where each digit pops in, with paste and phone autofill built in.
Stacking notifications with swipe-to-dismiss, hover-to-pause and variants.
Progress through steps: the line fills, and each finished step draws its own tick.
FAQ panels that open with a smooth, springy height and a turning chevron.
Drag a handle across two layers to compare before and after, smoothly sprung.
A tiled grid where a click sends a wave of light rolling outward.
Pricing SectionPlus
A complete pricing table: a sliding monthly/yearly switch, prices that roll to their new digits and a featured plan with an orbiting light.
A like or favourite toggle: the heart pops, a ring expands, sparks fly and the count rolls up.
A range slider with give: the value bubble leans as you drag, and pulling past the ends stretches the track like rubber.
A password field with a four-bar strength meter and requirements that tick themselves off as you type.