EXP·007 Refraction — a glassy 3D design experiment: a backdrop-blur glass lens with chromatic-fringe edges and a pointer-tracked specular highlight floating over an animated mesh gradient

Design Lab · Experiment 007 · glass

Bend the light

A pane of glass that isn't an image — it's a live backdrop blur with a chromatic fringe at its edges and a specular highlight that chases your pointer. The mesh behind it refracts as the lens drifts.

backdrop-filter · 0 images
scroll
[00]Optical recipe

real glass from three CSS primitives and zero textures

Lens
backdrop-filter blur + saturate + brightness over a live mesh
Fringe
cyan / pink offset shadows = chromatic edge
Specular
screen-blend highlight tracked to the pointer
Body
animated organic border-radius · pointer parallax + tilt
Control
live IOR slider drives blur depth & fringe spread
Status
🟢 transparent · contrast AA · reduced-motion stills it
[01]Six facets

the glass vocabulary, one cut at a time · scroll to reveal

01 · refraction

Blur is the lens

A frosted plane samples whatever sits behind it. Move the page and the colour beneath shifts through the glass — no image, just live compositing.

02 · iridescence

Oil-slick sheen

A conic spectrum.

03 · chromatic

Split at the edge

Offset cyan/pink shadows fake the way real lenses scatter colour at their rim.

04 · bevel

Inner light

Inset highlights and shadow give thickness — the pane has a top and a bottom.

05 · spectrum

Cyan → pink

Three stops.

06 · transparency

The opposite of ink

003 was opaque print; 007 is the inverse — a surface defined entirely by what shows through it.

[02]Index of refraction

drag to thicken the glass · low = clear pane, high = deep frosted lens

IOR 1.4
Field note: the SceneAI "3D glassy gradient" look, rebuilt with nothing but backdrop-filter, offset box-shadows, and a screen-blend highlight. The glass refracts the real page behind it, so it's never a flat picture of glass — it's the actual thing.