Library • 20 React interactions
React microinteractions
20 copy-paste React microinteractions: animated buttons, tabs and hover effects, each with a live preview and TypeScript, JavaScript and Tailwind code.
Click feedback 11
- Cursor Edge Glow ButtonA spring-tracked pill light with mirrored edge glows that crossfade as the pointer changes sides.
- Cursor Follow Share ButtonA dark share pill with a glowing send orb that tracks the pointer and a looping upward text swap.
- Hold to Delete ButtonA delete button that only fires when held: an orange bar fills linearly from left to right as a matching glow builds behind it, snapping back if you let go early and landing on a check with a pulse once it completes.
- Fuse Undo ButtonAn archive button that turns into Undo and lights an orange fuse around its outline; the fuse holds still while you hover it, so the chance to undo only runs out once you look away.
- Progress Ring CheckA task status icon whose dashed ring closes into a spinning arc, fills to its progress, then draws a check or a cross and strikes the label through.
- Secure Purchase ButtonA purchase button that opens room for a pixel-wave loader, swaps it for a shield once the payment clears, then resets itself.
- Magnetic Fill ButtonA magnetic pill button with a bottom-to-top background fill.
- Outline Wipe ButtonHollow stroked lettering that fills with orange behind a rounded bar sweeping left to right.
- Staggered Letter Text SwapA surface-free text interaction with a staggered per-letter upward replacement.
- Staggered Letter Glow ButtonA dark pill with inward orange edge glows and a staggered per-letter upward text swap.
- Contact Underline ButtonA compact contact action whose icon turns orange while an underline draws beneath the label.
Inputs 2
Navigation 7
- Blur Glide MenuA nested menu whose steps blur before they glide aside, while the surface animates to the height of the step arriving.
- Expanding Icon TabsAn icon bar where the chosen tab widens to reveal its label and the rest of the row slides over to make room.
- Preview Hover ToolbarA thin empty pill that grows wider and taller off its fixed bottom edge when the surrounding preview is hovered, scaling its actions in one after another with a label above each.
- Hover Glide CardsOne highlight glides from card to card under the pointer, seen only through the cards themselves, so it drains out of one and fills the next.
- Spotlight IndicatorA glowing rail that slides to the active item in a vertical nav — the same indicator powering this site's sidebar.
- Sliding Content TabsA compact tab switcher with a sliding active surface and content transition.
- Sliding Underline TabsA compact tab switcher with an orange underline that glides between labels.