Skip to main content
assetsforwordpress
MENU ASSETS

Glass Lens Cursor Magnifier

Moving your mouse over an area summons a circular lens that magnifies and distorts the content beneath it, mimicking real glass with added touches like rainbow edge fringing, soft lighting, and a bright rim.

Instructions

WebGL-powered cursor magnifier

This code creates a **magnifying glass effect** for a web page. You point it at a section of your page, and when you move your mouse over it, a circular lens appears under the cursor that magnifies and distorts what's beneath it — like real glass held over text. It even fakes physical details: rainbow color fringing at the edges, soft lighting, and a bright rim.

Behind the scenes, it takes a hidden "snapshot" of the container (redrawing its text and images pixel-perfectly), then lets the graphics card warp that snapshot inside the circle every frame as the cursor moves. When you leave, the lens can wander around on its own to keep things lively, and it automatically re-snapshots if the content or layout changes. The options at the bottom are just tuning knobs: lens size (`radius`), magnification (`strength`), distortion (`swirl`), and so on.

Works with any kind of element

A sleek black sports car with aerodynamic design and racing wheels, set against a modern abstract background. Perfect for automotive and speed-themed websites.

Instructions

Open the JS script in the Supa Code Block element and edit the options at the end of the script. Each option is explained below:

Setup

  • container (null) — Required. The DOM element the lens lives in. The effect rasterizes everything inside this element into a hidden texture, then overlays a WebGL canvas on top of it. Throws if missing.

What the glass "sees" (the texture)

  • background ('#f7f5f1') — Color painted behind the container's content when building the snapshot texture. Only matters where elements don't paint their own background; match it to your page background for a seamless look.
  • color ('#ffffff') — A tint multiplied over everything inside the lens. White = no change. Something like #eaf6ff gives the glass a cool cast. (Despite the name, it has nothing to do with text color.)

Refraction shape

  • radius (0) — Lens diameter's radius in CSS px. 0 = auto: 28% of the container's smaller side, clamped to 60–280 px.
  • strength (0.45) — Magnification power. Higher = stronger pull of pixels toward the lens center (more warp). Distortion fades to zero at the rim so edges stay continuous. Your demo uses 0.25 = subtle.
  • swirl (0) — Rotational twist inside the lens, strongest at the center, zero at the rim. In radians; negative values spin the other way. 0 = pure magnifier.
  • aberr (0.03) — Chromatic aberration: red and blue channels are sampled at slightly different radial offsets, creating an RGB fringe. Scales with distance from center — roughly aberr × radius pixels of split at the rim, none at the center. Your demo bumps it to 0.098 for a prismatic look.

Glass shading (the 3D look)

  • shade (0.40) — Master dial for the "glass dome" lighting: darkens edges, brightens the lit side, and adds a specular highlight from a fixed light direction. 0 = flat, 1 = full dome.
  • rim (0.10) — Extra brightening right at the lens edge (a fresnel-style edge glow). 0 disables it.
  • soft (0.07) — Edge feathering, as a fraction of the radius. The outer 7% fades out smoothly. Higher = softer edge; clamped to 0.002–0.95.

Motion & behavior

  • follow (9) — How tightly the lens chases the cursor, as an exponential smoothing rate. At 9 it closes ~63% of the gap to the cursor every ~110 ms. Higher = snappy, lower = lazy glide.
  • idleDrift (true) — Lets the lens wander on its own along a slow Lissajous path (27% of width / 21% of height around center) when it isn't following the pointer.
  • idleWhenOutside (false) — Decides what happens after the user has moved the mouse at least once and the cursor leaves the container. true = keep drifting inside it; false = fade out and wait for hover. (Before the first pointer move, idleDrift alone governs the wandering.)
  • reducedMotion ('auto') — Accessibility switch. 'auto' respects the OS "reduce motion" setting; 'on' forces it (instant snap to cursor, no drift, no animation loop); 'off' ignores the OS setting.

Diagnostics & performance

  • observe (true) — Watches the container with a MutationObserver and re-rasterizes the texture when the DOM changes (debounced ~120 ms). Set false for static content, or if you want manual control via api.redraw().
  • dpr (0) — Resolution override. 0 = auto (devicePixelRatio, capped at 2). Force 1 to cut GPU cost on hi-DPI screens, or 3 for extra-sharp text inside the lens (at a perf price).