Micro-interaction · 8.1

Gradient mask hover

A torch swept across a wall of picture frames.

A soft radial gradient following the pointer across a grid, lighting borders only near the cursor.

JavaScript is off, so the controls are hidden and the stage below shows a static field instead of the running effect. Every word on this page is still here. Nothing is hidden behind the script.

4 knobs

How it actually works

Best effort-to-impact ratio in the micro-interaction set, and it is on half the SaaS sites on the internet. The reason it is cheap is architectural: the naive version puts a mousemove handler on every card and reads a bounding rect per card per frame. This version has one handler and reads nothing.

Write pointer X and Y into CSS custom properties on the CONTAINER, not on each card. A pseudo-element with a radial-gradient positioned at var(--x) var(--y) acts as the mask or overlay. One listener for the whole grid. The cards do nothing: they are not listening, they are not measuring, they do not know the pointer exists.

The knobs, named

Gradient radius, falloff softness, intensity, mask versus overlay. Two sliders and no library.

Knob	Source	What it teaches
Gradient radius	ours	The size of the torch beam.
Falloff softness	ours	Where the light stops. Hard falloff is a spotlight; soft is a glow.
Intensity	ours	How bright the lit state gets.
Mode	ours	Whether the torch lights the card edges or washes the whole surface. Border is the Evervault look.

sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.

Evidence

INFERRED

Codrops "Recreating the Gradient Mask Hover Effect from Evervault" (2023); evervault.com. The mechanism is standard, but the index records the source as a one-liner and the four knobs as ours. Not upgraded.

Seen on: evervault.com; ubiquitous on SaaS logo walls and pricing grids.
Dependencies: vanilla + CSS
Difficulty: trivial
Performance: Very cheap: CSS custom properties, no per-card JS.
Accessibility and the floor: Purely decorative, so there is no accessibility risk, and it degrades to flat cards.

Notes

Composability. This is the catalog page's own card hover. You have already used it.

The one-listener-per-container rule is the entire lesson, and it generalises well past this effect. Any time you are about to attach a handler per item in a grid, the pointer position in a custom property on the parent will do it for free.

Seamless infinite marquee

Boop: self-reverting spring hover