Glass Lens
Glass lens with real refraction. Pro · Effects › Glass
A Liquid Glass surface with real refraction: the rim bends the backdrop inward like a convex glass edge, with a specular highlight and optional colour fringing and magnification. Refraction uses an SVG displacement map through backdrop-filter: url(#…), which only Chromium renders; Safari and Firefox get frosted glass (blur, saturation, specular rim). The Vercel theme turns the lens into a crisp panel or a clean magnifier with a 1px ring.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add glass-lensnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { GlassLens } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
strength | number | 24 | How far, in px, the rim pulls the backdrop inward at the very edge. 0 turns edge refraction off. |
radius | number | 'full' | Corner radius in px, or 'full' for a capsule or circle. Default: the theme's card radius (a circle when movable). | |
blur | number | Frost: backdrop blur in px; 0 gives clear glass. Default: 6, or 0 for a movable lens. | |
zoom | number | 1 | Magnification of the backdrop at the centre, like a loupe. 1 = none. |
aberration | number | 0.4 | Colour fringing at the rim, 0–1: red, green and blue bend by slightly different amounts. |
movable | boolean | false | Lets the user move the lens over its container with a pointer or the arrow keys (Shift = faster). The lens is absolutely positioned, so the container needs position: relative. |
position | GlassLensPosition | Controlled position of a movable lens: fractions of the free travel inside the container. | |
defaultPosition | GlassLensPosition | Initial position when uncontrolled. | |
onPositionChange | (position: GlassLensPosition) => void | Called with the new position when it changes. | |
labels | Partial<GlassLensLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Morphing Capsule — Capsule that flows between states
- Floating Tab Bar — Floating glass tab bar
- Aurora Background — Slow aurora behind your content
- Gradient Background — Slowly shifting gradient
- Bubble Background — Soft colored bubbles, one follows the cursor
- Stars Background — Starry sky with cursor parallax
- Hexagon Background — Hexagon grid with a glowing trail
- Hole Background — Portal tunnel with rings and particles
- Fireworks Background — Fireworks for wins and achievements, launch on click
- Spotlight — Stage beams and a cursor spotlight
- Meteors — Falling meteors
- Background Pattern — Fading dot, grid and line backgrounds
Previous: Halftone Image Reveal · Next: Morphing Capsule · All Effects