Micro-Interaction Toolkit

Small moments, remembered.

Micro-interactions are the interface saying ‘got it’. Each component here closes a loop between an action and its result in under a second, carries its meaning in text for assistive technology, and goes quiet when motion is unwelcome.

A.36
clickhovertweenmotion
Copy Button
A copy-to-clipboard button whose icon morphs into a drawn check, with a tooltip, live announcement and fallback.
Buttons & Controls · React / Motion / SVG / Tailwind
A.64
clickkeyboardspringmotion
Reaction Button
A like toggle that pops with a spring, fires a ring and particle burst, and rolls its count digit by digit.
Buttons & Controls · React / Motion / SVG / Tailwind
A.33
clickkeyboardlayoutmotion
Stateful Submit Button
A submit button that morphs through loading, success and error with a spring-driven width and drawn icons.
Buttons & Controls · React / Motion / SVG / Tailwind
A.65
pressclickspringmotion
Number Stepper
A numeric field with − / + buttons, accelerating hold-to-repeat, rolling digits and an elastic bump at the limits.
Buttons & Controls · React / Motion / Tailwind
A.66
dragpointerspringmotion
Swipe to Confirm
A slide-to-unlock control: drag the knob across the track to confirm, or step it there with the arrow keys.
Buttons & Controls · React / Motion / CSS / Tailwind
E.81
clicktweenzero deps
Confetti
Canvas confetti bursts with flipping squares, circles and strips, fired by ref, hook or trigger.
Backgrounds & Effects · React / Canvas / Tailwind
F.21
clickpressspringmotion
Animated Toggle
A tactile switch whose thumb springs across the track and squashes when pressed.
Forms & Inputs · React / Motion / SVG / Tailwind
C.44
viewporthovertweenzero deps
Marker Highlight
Hand-drawn annotations — marker swipes, underlines, circles, boxes — that draw in on view.
Typography & Text · React / SVG / CSS / Tailwind
A.95
clickkeyboardspringmotion
Theme Toggle
A light / dark toggle with a sun-to-moon morph and an optional circular reveal using the View Transitions API.
Buttons & Controls · React / Motion / SVG / Tailwind
F.114
clickpressspringmotion
Animated Checkbox
A real checkbox with a drawn check, an indeterminate dash morph, a spring press and a tri-state select-all group.
Forms & Inputs · React / Motion / SVG / Tailwind
G.120
clickkeyboardspringmotion
Notification Bell
A bell with a rolling unread badge, a wobble on new arrivals and a popover panel with read states.
Data & Feedback · React / Motion / Tailwind
A.94
clickkeyboardspringmotion
Speed Dial
A floating action button that fans out into labelled actions with staggered springs, as a stack or an arc.
Buttons & Controls · React / Motion / Tailwind
A.126
clickkeyboardspringmotion
Morph Icon Button
An icon button whose glyph morphs between two states by interpolating SVG paths — play/pause, menu/close, heart and more.
Buttons & Controls · React / Motion / SVG / Tailwind
A.125
clickkeyboardspringmotion
Vote Control
Forum-style up / down voting with rolling digits, bouncing arrows and optimistic updates that roll back on error.
Buttons & Controls · React / Motion / SVG / Tailwind
C.134
clickkeyboardcontinuouszero deps
Spoiler Text
Text hidden under shimmering particle noise that dissolves outward from where you click.
Typography & Text · React / Canvas / Tailwind
A.123
clickpressspringmotion
Progress Button
A download button whose fill sweeps across as work progresses, with pause, cancel, retry and a rolling percentage.
Buttons & Controls · React / Motion / SVG / Tailwind
A.155
keyboardfocustweenmotion
Kbd Shortcut
Keycaps for a keyboard shortcut that light up as the keys are physically pressed, with platform-aware modifiers and sequences.
Buttons & Controls · React / Motion / Tailwind
B.159
hoverfocusspringmotion
Smart Tooltip
An accessible tooltip for hover and keyboard focus with flip / shift placement, a pointing arrow and an OS-style delay group.
Cards & Containers · React / Motion / Tailwind
A.186
clickpressspringmotion
Add to Cart Button
Throws the product along a parabola into the cart, bumps it, rolls the badge and confirms with a check.
Buttons & Controls · React / Motion / SVG / Tailwind
A.184
clickkeyboardspringmotion
Scene Switch
An illustrated day / night switch: the sun springs across a tiny sky and turns into the moon.
Buttons & Controls · React / Motion / SVG / CSS / Tailwind
D.195
dragscrollspringmotion
Pull to Refresh
Pull a scroll container down at the top to refresh: rubber-band resistance, a filling ring, a spinner and a Refresh button.
Navigation & Menus · React / Motion / SVG / Tailwind

Technology requirements

Everything this set needs, combined. Each component remains a separate, self-contained file.

ReactMotionSVGTailwindCSSCanvas

npm dependencies: motion
Peer: react, tailwindcss

npm install motion

Next collectionThree-Dimensional Interfaces