All components

28 components

React Cursor Effects and Hover Animations

Interfaces feel alive when they notice the pointer. These React cursor effects lean, glow, tilt and light up as the cursor moves over them, then settle back when it leaves. Each one is built on springs rather than fixed timings, so the motion keeps its weight at any speed, and every one holds still for people who prefer reduced motion. On touch screens they fall back to sensible defaults instead of waiting for a hover that never comes.

A button that leans toward the cursor with a springy, physical pull.

A card with a soft glow that tracks the pointer across its surface.

A 3D card that tilts toward the pointer, with an optional moving glare.

A card that tilts toward the cursor while its layers float at different depths, so each moves at its own speed.

A metallic rainbow foil that shifts and shimmers as the pointer moves, like a holographic trading card.

One soft beam follows the pointer across a grid, lighting the borders and faces of the cards it passes.

Crystal-clear glass cards with lens-like edges, rainbow dispersion, a rim highlight that tracks the pointer and a liquid press.

A deck you swipe through: fling the top card and it tucks in at the back.

Text that decodes itself character by character, terminal style.

Letters near the cursor swell to a heavier weight and ease back as it moves on, using a variable font.

Each letter leans toward the cursor and springs home, like a magnetic button for every character.

On hover or focus, the letters swap places a few times and slide home. Made for links and buttons.

Text circles slowly around an icon, like a stamp. Pauses under the pointer and picks up where it stopped.

A floating icon bar that magnifies and lifts around the pointer, with tooltips and a gliding active indicator.

A pill navbar where a soft highlight glides to whatever you point at or tab to.

A headline number that counts up beside a sparkline that draws itself, with a change badge and hover readout.

Drag a handle across two layers to compare before and after, smoothly sprung.

A cone of light from above that sways gently and turns to follow the pointer.

A soft ribbon of light behind the pointer, across the window or inside one section.

A feathered light follows the cursor, revealing a glowing texture. On touch screens it drifts on its own and follows a drag.

A headline drawn in thousands of particles that gather into place, then part around the cursor and spring back.

Drifting stars join into constellations as they pass close, and reach out to the cursor with lines of light.

A complete landing-page hero: a pointer-lit grid, a headline that rises word by word and a product window that tilts flat as you scroll.

A range slider with give: the value bubble leans as you drag, and pulling past the ends stretches the track like rubber.

Segments draw themselves in on scroll; hover, tap or tab to one to lift it and read its value and share in the middle.

A feature grid in tiles of different sizes: they rise in turn, one border light follows the pointer across them all, and each tile's visual comes alive.

A dotted 3D globe you can spin by dragging, with markers pulsing at real coordinates and light travelling along arcs between them.