Lens: a transparent capsule that bends light

About the material

Lens is the most optical material in the catalogue. Blur all but disappears (2 px), the tint is a token 3% white, noise is off, and refraction climbs to 92 with a wide edge zone, so stripes, text and shapes behind it visibly bend toward the rim. The capsule shape and a bright specular highlight complete the impression of a polished magnifier. A light built-in dim of 0.2 keeps the glass from vanishing altogether.

Use Lens sparingly, where the effect itself is the message: a floating action button, a slider thumb, a selection indicator, a compact capsule toolbar over dark UI or media. It suits large panels and dense text less well, and it should not be nested inside another glass layer. Over bright media raise the dim from 0.2 to at least 0.35, as the clear-glass rule requires, and verify contrast on the rendered frame.

The lens effect lives in an SVG displacement filter, so plan exports accordingly. The full export (HTML, CSS and the local runtime, served over HTTP) carries the adaptive SVG lens; the standalone CSS file does not, and falls back to blur, tint and rim. Refraction appears in full quality on Chromium after visual confirmation, Safari and Firefox get the reduced look, and reduced transparency sets refraction to zero.

Best for

• A floating action button
• Slider thumbs and selection indicators
• Compact capsule toolbars over media
• A CSS and SVG lens effect without canvas

Parameters

Where to use it

Best on: dark backgrounds, photos and video.
Avoid: long-form content, glass nested in glass.
Needs a dimming layer: 35%.

Code

import { generateCode } from
  '/releases/2.2.0/sdk/core/index.js';

const result = generateCode({
  component: 'button', preset: 'lens'
});

The SDK runs without the DOM: swap in the component you need, the preset stays the same.