Magnetic Glass Lens
A glass loupe that follows the cursor and magnifies the live page beneath it, with refraction wobble, chromatic fringing and 3D tilt momentum.
About This Effect
A physical glass loupe that follows the pointer and magnifies the real page content beneath it. Glide slowly and it reads like an optician's instrument: the point under the lens centre stays locked under the glass while a refraction wobble bends the magnified image like a true convex lens.
Read the full effect overview
Whip the cursor and the physics answer: the lens banks in 3D against its momentum, the magnified image splits into red and blue fringing scaled by velocity, and the specular glint swings around the bezel to face the direction of travel. Stop dead and everything settles with a damped elastic wobble.
Built with GSAP core only. The magnifier is live DOM, not a screenshot: the content under the glass is a synchronised clone of the page, so it stays sharp at any zoom and updates with the layout.
What's Included
- One movement vector drives five response channels: smoothed spatial tracking, velocity-banked 3D tilt, RGB channel separation, a rotating bezel glint aimed at the travel heading, and a damped elastic settle
- True optical magnification: a synchronised full-size clone of the page is scaled and counter-translated so the point under the lens centre always lands on the optical centre
- Refraction wobble from an SVG feDisplacementMap whose strength is driven by cursor velocity, over a base level that reads as glass texture at rest
- Chromatic dispersion built from colour-isolated content layers that fade in and spread apart with speed, not a canvas trick
- Configured live through data attributes: change data-lens-zoom, data-lens-dispersion or data-lens-filter at runtime and the lens follows, which is all a preset switcher needs to do
- Film-negative mode inverts everything inside the glass, leaving the page untouched
- Touch support with pointer capture and an idle figure-8 preview orbit that resumes after interaction pauses
- Keyboard accessible: focusable inspection targets glide the loupe to themselves; reduced motion gets direct positioning with the physics switched off; without JavaScript the page simply renders without the lens
Perfect For
- Print shops, poster stores and editorial archives where fine detail is the selling point
- Luxury product pages for horology, jewellery and fabric close-ups
- Type foundry specimens and design portfolio pieces built around micro-typography
- Photography and art gallery sites that want inspection to feel physical
How It Works
The script clones the element marked data-lens-content into the lens aperture three times, one copy per colour channel, sized to match the stage exactly. Each frame, a GSAP ticker lerps the lens toward the pointer, then scales and counter-translates the cloned view so the point under the lens centre maps onto the aperture centre at the current zoom.
The frame-to-frame delta gives a velocity vector. Its magnitude drives the scale attribute of an SVG feDisplacementMap for the refraction wobble and sets the offset and opacity of the red and blue channel layers for the dispersion fringing; its heading angles both the 3D tilt (banking against momentum via rotateX and rotateY) and the conic-gradient glint on the bezel through CSS custom properties.
When speed falls to rest the loop hands off to tracked settle tweens: an elastic.out on the tilt and scale, and quick power2 decays on the fringing, glare and wobble. A MutationObserver watches the stage's data-lens-* attributes so zoom, dispersion and the negative filter can be changed live from outside the script.