Lumo Glass Pane

A glass panel that refracts the image behind it and drifts towards the pointer, with a thin chromatic rim. Control the refraction, edge split, blur, size and corner radius, and put your copy inside the panel.

What you can change

• Background — The image behind the glass

• Title / Subtitle / Text — Copy inside the panel

• Panel width / Panel height — Panel size as a share of the frame (0.5 × 0.5)

• Radius — Panel corners (24px)

• Refraction — How much the glass bends the image (1.2, from 1 to 2)

• Chroma — Channel split at the edge (0.03)

• Blur — Softening inside the panel (0.3)

• Follow pointer — How far the panel goes towards the pointer, 0 to stay centred (1)

Good to know

• Every option lives in the properties panel; no code needed.

• Respects reduced motion: visitors who ask for less motion get a calm static version.

• Responsive: no horizontal scroll at phone, tablet or desktop widths.

• WebGL shader with a CSS fallback, so it still looks right where WebGL is unavailable.

• Installs from one link; its shared Hero Kit helpers come with it.

• Licence: Framer's single-use commercial licence (one project).