Halftone Image Reveal

Изображение проявляется растровыми точками: при прокрутке, наведении или появлении. Pro · Анимированные компоненты › Слои и раскрытие

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add halftone-image-reveal

npm install valyro-ui-pro

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

Prop	Type	Default
`src` *	`string`		Image address.
`alt` *	`string`		Text alternative; always in the page, whatever the reveal shows.
`srcSet`	`string`		Responsive sources, as for `<img srcset>`.
`sizes`	`string`		Rendered widths for `srcSet`, as for `<img sizes>`.
`trigger`	`'visible' \| 'hover' \| 'scroll' \| 'manual'`	`'visible'`	`visible` (default): reveals once when scrolled into view; `hover`: while pointed at or focused; `scroll`: follows the scroll position; `manual`: only `revealed` decides.
`revealed`	`boolean`		The picture is shown (not for `scroll`).
`defaultRevealed`	`boolean`	`false`	Initial state when uncontrolled. Default false.
`onRevealedChange`	`(revealed: boolean) => void`		Called when the picture is revealed or hidden again.
`cell`	`number`	`10`	Distance between dots in px. Default 10.
`duration`	`number`	`900`	Length of the reveal in ms (not for `scroll`). Default 900.
`lite`	`boolean`	`false`	Light mode: a plain fade instead of the dot mask, for slow devices and long lists.
`reducedMotion`	`'auto' \| 'always' \| 'never'`	`'auto'`	`auto` (default) follows the reader's setting; `always` shows the picture at once; `never` animates regardless.
`aspectRatio`	`string`		Box shape while loading, e.g. "16 / 9". Default: the image's own.
`ink`	`string`		Colour of the dot screen behind the picture.
`caption`	`ReactNode`		Caption under the picture.
`labels`	`Partial<HalftoneImageRevealLabels>`		Overrides for the built-in English text; keys left out keep their defaults.