Glass Lens — React Glass Effect

A biconvex lens: magnification through the center, inversion at the edges, and fine spectral fringes.

Starting live preview

Usage

import { GlassLens } from "@/components/GlassLens";

export function LensStudy() {
  return <div style={{ height: 520 }}><GlassLens interactive
    {...{
      interactive: true,
      speed: 1,
      refraction: 0.85,
      dispersion: 0.7,
      blur: 0.8,
      rim: 0.9,
      tint: "#e0eef4"
    }}
  /></div>;
}

Implementation notes & API

Original three-dimensional biconvex lens; the light ray passes through both air/glass interfaces. The printed backdrop is procedural, not a DOM backdrop filter. No copy is built in. Pointer tilts the lens. Refraction controls refractive index, dispersion splits RGB, blur softens the material response, rim adjusts Fresnel reflection. Provide a sized parent. Existing preset IDs remain valid.

Property	Type	Notes / default
`interactive`	`boolean`	false in the library; enabled in this preview
`fallback`	`ReactNode`	Shown when the renderer is unavailable
`className / style`	`string / CSSProperties`	Applied to the outer container

View source on GitHubFree for commercial projects · MIT