React Hover Effects
Twenty-eight components whose primary state change is the pointer arriving. Glows that track the cursor, cards that tilt toward it, lists that dim every row but one, surfaces that dissolve or displace underneath it. Hover is the cheapest interaction in the browser and the easiest to overdo — each of these picks one property to move and commits to it rather than animating everything at once.
28 components · all free
In This Collection
Light Rays
Volumetric god-rays from a configurable origin, optionally mouse-following.
Hover effect
Dot Field
An interactive dot grid that bulges and glows around the cursor.
Hover effect
World Map ASCII
A dot-matrix world map whose particles scatter from the cursor.
Hover effect
Constellation
A constellation network — drifting particles link by proximity, chase and flee the cursor, and glow.
Hover effect
Plus Grid
A canvas field of '+' glyphs — scroll or pointer motion injects a traveling wave that ripples and decays across the grid.
Hover effect
Turing
Gray-Scott reaction-diffusion on the GPU. Two reagents, four terms, and coral, labyrinths and colonies that settle and stop all fall out of the arithmetic — a background that grows rather than loops, and never reaches the same frame twice.
Hover effect
Quicksilver
Molten chrome. Every other shader background emits light; this one reflects a studio that does not exist, synthesised from the surface normal — sharp softbox edges, a conductor's Fresnel wash, thin-film iridescence, and a wake that keeps moving where you dragged.
Hover effect
Mycelium
A slime mould foraging in the dark. Every other field here is a differential equation on a grid; this one is a population — up to a million agents, each carrying a position and a heading, sampling the trail ahead of itself, turning toward whatever smells strongest and laying down more of it as it goes. The veins, the junctions and the slow reorganisation are nowhere in the code.
Hover effect
Contour
A topographic map of terrain that will not hold still. The lines are not drawn, they are found — a height field is sampled onto a grid every frame and marching squares walks it once per altitude, emitting segments wherever the land crosses that height. Nothing here knows what a ridge is; ridges are where the crossings bunch up. The pointer raises a hill the contours have to route around, and because the interval is fixed rather than the line count, that extra altitude produces extra rings instead of restretching the ones already on screen.
Hover effect
Variable Proximity
Text whose letters interpolate font weight by cursor proximity.
Hover effect
Scramble Text
Ciphered glyphs boiling out of noise and resolving into words — a decode cascade that settles character by character, a hover that re-scrambles on demand, or a continuous low glitch that keeps the type restless, each freshly-resolved letter flashing accent before it cools to ink.
Hover effect
Molten
Type that melts. Letters sag under their own weight, string out, and fuse into one surface where they touch — because the glyphs are a coverage field cut by a threshold rather than shapes being moved, so two stems raise the coverage between them past the cut and one outline closes over both. The word underneath is a real text node the whole time: selectable, searchable, and read correctly aloud while it runs.
Hover effect
Neon
A neon sign, with everything that is wrong with a neon sign. Tubes strike one at a time rather than together, each settling at its own moment inside the ignition; the steady state carries a mains hum; and every so often one tube gives up for a third of a second and comes back. The glow is baked once per letter into a sprite, so a frame is a handful of draws no matter how wide the word — and the word itself never stops being a real, selectable text node underneath.
Hover effect
Rime
Hoarfrost taking a word — Molten's opposite number, the same idea of type as a coverage field run cold. Crystal tips seeded on the glyph edges creep across the letters, fork at a fixed lattice angle, and die where they run out of glyph or hit ice already there, so the cost tracks the growing edge rather than the area. The text underneath is never redrawn: it stays a real span at its real colour the whole time, which makes the thaw nothing more than fading the ice off type that was always there.
Hover effect
Pixel Transition
Reveal a second layer through a random pixelated dissolve on hover.
Hover effect
Border Glow
A cursor-proximity gradient border with an outer glow.
Hover effect
Spotlight Shell
A card shell with 3D magnetic tilt, radial glow, and a shimmer sweep.
Hover effect
Hover List
A display-type list where a shared accent block springs between rows on hover while the text indents and inverts.
Hover effect
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.
Hover effect
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.
Hover effect
Torchlight
Content hidden in darkness; the cursor is a torch that reveals only what it touches.
Hover effect
Tilt
A machined card that leans toward the pointer in 3D while a specular sheet slides across its face.
Hover effect
Approach
A tile whose overlay enters from the exact edge your cursor crossed, and leaves the way you go.
Hover effect
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.
Hover effect
Swarm
Up to a quarter of a million particles integrated entirely on the GPU, morphing between words and solids, with a drag-orbit camera. Position and velocity live in floating-point textures and never come back to the CPU; text targets are sampled once out of an offscreen canvas, so the shape can be any string with no font atlas.
Hover effect
Mirage
Live, fully interactive HTML seen through moving air. An animated turbulence field displaces the real DOM subtree per pixel — no snapshot, no canvas replica — so the text stays selectable, the button still takes focus and the link is still a link while the whole panel shimmers.
Hover effect
Submerge
Live content held under water. A slow current bends it continuously, a press drops a stone and a drag leaves a wake that trails behind the cursor — and the text underneath stays selectable, the button still answers and the link is still a link, because the water bends the real tree rather than a picture of it.
Hover effect
Telemetry
A metric board that behaves as one instrument instead of eight sparklines. Hovering any tile broadcasts a single timestamp and every other tile resolves its own value at that same instant, so a latency spike and a queue backing up are visibly the same event rather than two coincidences. Threshold breaches are recorded on the sample rather than on a pixel, so the scar travels with its data and is still there forty seconds after the value recovered.
Hover effect
The Terms
- Hover effect
- Visual change when the cursor moves over an element.