React Hover Effects
Forty-two components whose main state change is the pointer arriving. Glows that follow the cursor, cards that tilt toward it, lists that dim every row but one, surfaces that dissolve or shift underneath it. Hover is the cheapest interaction in the browser and the easiest to overdo, so each of these picks one property to move and commits to it instead of animating everything at once.
40 components · live previews
In This Collection
Light Rays
Volumetric god-rays from a configurable origin, optionally following the mouse.
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, built out of 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
ContourPro
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
MoirePro
Two lattices stacked at a fraction of a degree apart, beating against each other into live interference fringes. Every layer is band-limited in the shader, so what you see is the interference and not the sampling.
Hover effect
Flock FieldPro
A murmuration of hundreds of boids wheeling as one — separation, alignment, and cohesion resolved every frame through a spatial hash for the crowd, banking toward or scattering from your cursor, smeared into long trails of amethyst and cyan as the flock folds across the dark.
Hover effect
CausticsPro
Light through moving water. The filaments are the zero crossings of a noise field folded back on itself, not its peaks — which is why they stay thin and hard-edged at any brightness instead of blooming into blobs. The lattice is periodic, so the flow offset wraps and the motion never coarsens over a long session.
Hover effect
Voronoi ShatterPro
Lit cells that fracture apart under the pointer and knit back together behind it. The seam is drawn from the gap between the two nearest seeds rather than the distance to the nearest one, so it holds an even width right through the vertices where three cells meet — and the shatter displaces the space rather than the seeds, so no cell ever swaps neighbours mid-fracture.
Hover effect
Variable Proximity
Text whose letters shift font weight as the cursor gets closer.
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: 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, so it stays 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. This is 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
Anaglyph
Stereoscopic channel-split type. The real headline stays put, selectable, one announcement to a screen reader, while two aria-hidden copies in opposing ink colors slide against each other under the pointer, and the blend mode resolves their overlap back toward white, so the depth lives entirely in the fringes, exactly as it does on a printed anaglyph. The channels chase the cursor through an exponential lerp written straight to transform, and once the pointer goes quiet a slow bounded-phase sway takes the target over so the split keeps breathing on an idle pane.
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, so 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
UnfoldPro
A row of slats that open on approach while their neighbours give up the room on a spring.
Hover effect
Magnetic DockPro
A dock whose items swell under the pointer and carry their neighbours part of the way with them. One shared value drives the whole row, so nothing re-renders while you sweep across it — and focusing an item writes the same value, which is why the keyboard gets the identical effect rather than a substitute for it.
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, with no snapshot and 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. 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
Grid HorizonPro
A synthwave horizon in one fragment shader. A glowing grid floor, a banded sun, parallax ridges and a pulse rolling out of the vanishing point.
Hover effect
Depth StagePro
A DOM hero stage where any children become parallax layers in real 3D. Pointer-tracked tilt, spring physics, a following spotlight, depth of field, staggered entrance, zero canvas.
Hover effect
Eclipse FlarePro
A total eclipse under liquid-glass copy: a streamered corona, a diamond-ring flare on the breath, god-rays marched through drifting cirrus in one jittered pass.
Hover effect
TidalPro
A dusk ocean under flat, left-aligned copy: noise-warped swells with wind ripple, sunlit crests, a sun path and breaking foam, raymarched in one bounded pass.
Hover effect
Liquid ChromePro
A liquid-chrome form of fused spheres over a black mirror floor: rectangular studio softboxes, one mirror bounce and soft occlusion, sphere-traced in one pass beside left-aligned copy.
Hover effect
The Terms
- Hover effect
- Visual change when the cursor moves over an element.