React Micro-Interaction Components
The small responses that make an interface feel answered rather than obedient. Thirty components covering hover states, cursor effects, card transforms, dialogs, menus and machined controls — the layer users never consciously notice and immediately miss when it is gone. Every one is driven by a real pointer event rather than a CSS transition alone, so the behaviour holds up under a fast cursor, a slow drag, and a touch device.
30 components · all free
In This Collection
Pixel Transition
Reveal a second layer through a random pixelated dissolve on hover.
Border Glow
A cursor-proximity gradient border with an outer glow.
Spotlight Shell
A card shell with 3D magnetic tilt, radial glow, and a shimmer sweep.
Animated Hamburger
A three-bar hamburger that morphs to an X, driven by a toggle prop.
Morph Dialog
A dialog that morphs open from its trigger via shared-layout animation, with elements that travel between card and panel.
Blueprint Card
A technical-drawing card — dashed envelope, accent rules, corner nodes, and a soft glow that draw in on mount.
Corner Letters
Four glyphs pinned to the container corners that blur-and-scale in on mount and dissolve out on exit.
Hover List
A display-type list where a shared accent block springs between rows on hover while the text indents and inverts.
Preloader
A percentage-counting load overlay — spinning ring, eased counter, and a fade-out that reveals the page beneath.
Stagger Menu
A menu overlay that blooms open as a clip-path circle spring while items stagger in with blur and rotation, then collapses back to its pill.
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; the page cursor is never touched.
Torchlight
Content hidden in darkness; the cursor is a torch that reveals only what it touches.
Dissolve
An element disintegrates into drifting shadow-motes on dismiss, and reforms on command.
Tilt
A machined card that leans toward the pointer in 3D while a specular sheet slides across its face.
Sigil
An SVG crest that traces itself in when it scrolls into view, stroke by stroke.
Rift
A draggable tear between two overlaid scenes — push past an edge and it resists, then snaps back.
Approach
A tile whose overlay enters from the exact edge your cursor crossed, and leaves the way you go.
Hold
A confirm that has to be earned — the ring fills while you hold, snaps shut when it commits, and empties on a different curve entirely if you let go early.
Aperture
A camera iris. Blades pivot on a ring of pins and one shared angle drives the whole mechanism — wide open at 64% of the housing, past the centre and light-tight at zero, cutting the scalloped polygon a real iris makes on the way through.
Segmented
A segmented control whose indicator travels on a shared layout id and smears in the direction it is moving.
Tether
A popover that grows out of the corner nearest its trigger, and moves that origin when it flips.
Inline Edit
Text that becomes its own input with nothing moving — one padded box, two contents, sized in CSS.
Crossing
A gallery-to-detail crossing on the View Transitions API, where one element is the same object in both views.
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.
Holofoil
Holographic trading-card foil over real content. The diffraction band travels against the tilt while the specular follows it, and the flake only lights where the rainbow currently falls — which is what stops the whole thing reading as one gradient sliding around.
Lens
A glass lens you drag across live content, bending it through an SVG displacement field with a real bevel and three-channel dispersion. It refracts a live duplicate of its own children rather than the page backdrop — which is the only version of this effect that works in Chrome, Safari and Firefox alike.
Passcode
A one-time-code field whose cells answer every keystroke: each character lands compressed and springs back, a paste distributes across the row rather than filling it on one frame, a wrong code shakes and clears itself, and a right one folds the whole row into a tick. Underneath there is exactly one real input holding the whole code — which is what keeps SMS autofill, password managers, select-all and a screen reader working, none of which survive six inputs with maxLength one.
Dial
A machined rotary knob: angular drag with detents you can feel on the way past, inertia on a flick, and a spring that settles into the nearest stop. The angle lives in a motion value rather than in React state — a drag writes it sixty times a second and a spring more often than that — so the only thing React holds is the detent index, and only when that integer actually changes. Arrow keys step through the same spring the hand does, so the keyboard is not a second, worse path to the same control.
Refract
A frosted-glass slab you drag across a live scene, refracting it through a real shader optic — a rounded-rect height field whose gradient bends three separately-sampled color channels, with a Fresnel-bright rim, a travelling specular streak, and a frost that is a genuine multi-tap blur of what sits beneath the pane. Where Lens bends its DOM children through an SVG displacement map and magnifies, Refract is a flat pane over a scene texture: true angle-of-incidence refraction, dispersion and glare — and the scene it bends is drawn in the same shader, because no browser lets WebGL read the rendered page. Throw it and it glides on momentum, rubber-banding off the container walls.