Glass Lens

Стеклянная линза с настоящим преломлением. Pro · Эффекты › Стекло

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add glass-lens

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { GlassLens } from 'valyro-ui-pro';

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.