← All effects

X-ray Spotlight

Micro-interactionTinkerFX signature ✦clip by mask — one property per frame
A finished page
Everything here looks polished — but move the lens and see what it is really made of.
A little card
A finished page
Everything here looks polished — but move the lens and see what it is really made of.
A little card
-- fps
prefers-reduced-motion detected — the lens follows directly, no glide

X-ray · layers

off = the whole page goes X-ray
wireframe boxes and grid
each element admits what it is

Parameters

Lens radius130 px
Edge softness24 px
Glide0.22
Grid brightness0.35
your version · updates as you tinker

How this effect works

There are two copies of the same page stacked on top of each other: the finished design below, and its "skeleton" above — same layout, but styled as a wireframe (transparent boxes, dashed outlines, a blueprint grid, and a tag label on every element saying what it really is). The X-ray layer is fully there the whole time; you just can't see it, because a mask-image with a radial gradient makes it visible only inside a circle around the cursor. Moving the lens costs one CSS property per frame — the browser does all the clipping on the GPU.

The edge softness is simply where the gradient fades from opaque to transparent: 0 gives a surgical porthole, 40+ gives a dreamy torchlight. The lens glides after the cursor with a small chase-lerp, which is what makes it feel like a physical instrument instead of a div glued to the mouse. This effect is a TinkerFX signature: it's our whole philosophy — every polished thing is understandable underneath — turned into a toy.

Production notes: respects prefers-reduced-motion (lens follows directly, no glide) · mask-image is compositor-cheap; the skeleton layer is plain DOM · on touch, drag the finger — the stage traps its own gestures · the copied snippet is self-contained HTML + CSS + JS.