Library • 10 React interactions
React microinteractions
10 copy-paste React microinteractions: animated buttons, tabs and hover effects, each with a live preview and TypeScript, JavaScript and Tailwind code.
Click feedback 7
- 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.
- 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.
Navigation 3
- 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.