Magnetic Glass Lens

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add the optical filters once, anywhere inside <body>:

Code snippet omitted: it ships with the download.

3. Mark up the stage, your content, and the lens:

Code snippet omitted: it ships with the download.

4. Add before closing </body> tag:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

What the effect actually requires of your markup:

• A positioned stage. [data-lens-stage] must be position: relative (or otherwise positioned); the lens and the magnified view are placed in its coordinate space.
• One content root. [data-lens-content] is cloned into the aperture at page load. It must fill the stage the same way in both places, so give it position: absolute; inset: 0 inside the stage (the script sizes the cloned copy to the stage's pixel size for you). Give it its own background; a transparent content root shows the aperture's own --surface colour inside the glass where the page shows whatever is behind it.
• The lens skeleton. The five elements in step 3 are structural. The script injects .lens-optics > .lens-view > .lens-layer copies into .lens-aperture; everything else about the lens (bezel look, glare colours, shadow) is CSS you are free to restyle.
• The SVG filter ids are contractual. #lens-distortion, #lens-displacement-map, #lens-filter-red, #lens-filter-green and #lens-filter-blue are referenced from the stylesheet and the script; keep the ids if you move the block. The three colour layers reassemble the full image by screen-blending, so all three must stay present or the colours inside the glass drift.

What is only the demo's CSS and can be deleted: everything under the SPECIFICATION SHEET banner in style.css (the sheet, its tables, the drawing plate and the photographs), the .showcase-* shell/toolbar, and the glass-tint blocks keyed off data-lens-tint. The demo loads Mona Sans from Google Fonts; the effect does not depend on any face.

Photographs and SVG inside [data-lens-content] are cloned with everything else, so <img> tags work as they are. Serve them at roughly twice their rendered size (the demo bakes the bench at 1200px for a 450px column) or the loupe magnifies pixels rather than detail. Avoid id attributes on anything inside the content root: the clones would duplicate them.

Non-obvious CSS the effect depends on:

• .lens-aperture needs overflow: hidden and the radial mask-image; without them the magnified copy escapes the glass.
• .lens-view needs transform-origin: 0 0. The counter-translation maths assumes it.
• .glass-lens is centred by negative margins of half --lens-size and positioned via GSAP transforms; do not add your own transform to it.
• The lens is hidden without JavaScript via html:not(.has-js) .glass-lens. Keep that rule: the empty lens shell is meaningless without the script.
• The cloned copies triple the DOM under the content root. Keep [data-lens-content] to hundreds of nodes, not thousands, and avoid videos or iframes inside it (they will not stay in sync).

Options

All read from the [data-lens-stage] element, all live: change the attribute at runtime and the lens follows (a MutationObserver watches them). The demo's toolbar is nothing more than buttons stamping these attributes.

--lens-size in :root sets the physical size of the loupe (240px desktop, 170px under 900px in the demo).

Accessibility

• Reduced motion: the physics loop, tilt, fringing and idle orbit are all disabled; the lens positions directly under the pointer and zoom changes are instant. The CSS also forces the chromatic layers off.
• Keyboard: elements marked data-lens-focus (with tabindex="0" and a sensible aria-label) glide the loupe to themselves on focus, mirroring hover.
• No JavaScript: the page renders normally without the lens; nothing is hidden behind the effect.
• The lens itself and every cloned copy are aria-hidden, and focusables inside the clones are removed from the tab order.
• Touch: see below — the loupe is pinned to the screen and lifted off the fingertip.
• Attract orbit: a slow figure-8 runs on load to show the optics off, for a fixed number of passes, then parks back at the centre. Once the visitor has driven the lens themselves it does not run again. It is an attract loop, not an ambient animation.

Touch behaviour

A pointer-following loupe needs rethinking on a phone, and the effect handles it rather than leaving it to the buyer:

• The glass is lifted off the contact point. A fingertip otherwise covers the magnified centre, which is the one part you are trying to read. Near the bottom edge, where there is no screen left to put a finger below the glass, the lift tapers off so the last of the board stays reachable; the loupe holds position when you let go, so it is still readable there.
• The loupe is pinned to the viewport, and the page scrolls underneath it. touch-action is pan-y, so the browser claims vertical gestures for scrolling and the lens receives almost no pointermove on a downward drag. Left in page coordinates the loupe also scrolls away and, with no vertical drag available, cannot be brought back. Scrolling moves it down the board; dragging moves it across.
• Tapping a card does not yank the loupe to that card. The cards carry tabindex, so a tap focuses one; the focus glide is a keyboard affordance and is gated on the last input modality so it does not fight the pointer.

Performance

Each colour channel is a full-size copy of the page behind its own SVG filter, and the two chromatic ones are screen-blended, so the channel count is the per-frame render budget. The effect picks it by pointer type:

• Fine pointer: all three channels, the #lens-distortion turbulence, and the chromatic fringing.
• Coarse pointer: one unfiltered channel. Magnification, tilt, the bezel glare and the elastic settle are unchanged; the fringing and the refraction wobble are dropped. Traced on a throttled iPhone 13 profile, that takes raster work from 9.8s per 5s of wall clock (a quarter of frames dropped) to 1.1s (frame budget held).

The loop is also gated on an IntersectionObserver and visibilitychange, so it stops entirely when the stage scrolls out of view or the tab is hidden.

If you want the full optics everywhere, change the channel list passed to buildOptics in script.js; the single-channel styling hangs off the .lens-optics--simple class it adds.

Dependencies

• GSAP core 3.x (no plugins)