Halftone Image Reveal
Image revealed in halftone dots on scroll, hover or when it appears. Pro · Animated components › Layers and reveals
A picture that develops through a halftone dot screen: the dots grow until they close, on scroll, hover or entering the view. Pure CSS masks animated on the compositor; a light fade mode, an instant reduced-motion mode, and the picture is visible without JavaScript.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add halftone-image-revealnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { HalftoneImageReveal } from 'valyro-ui-pro';Props
| 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. |
Related components
- Folded Depth Cards — Cards layered in depth that fold like paper, with keyboard and swipe
- Toggle — Toggle button with a springy response
- Flip Button — Two-sided button that flips on a spring
- Liquid Button — Button that fills with “liquid” on hover
- Theme Toggler — Light/dark switch with a View Transitions reveal
- GitHub Stars Button — Repository link with a rolling star count
- Share Button — Button that fans out social icons
- Code Tabs — Code variants in tabs: npm, pnpm, bun, with copy
- Number Wheel — Number on a spinning wheel with neighboring values
- Pin List — Pinnable list: items glide between groups
- Notification Stack — Notification stack that expands into a list
- Todo List — Checklist with a wavy strike-through on done items
Previous: Folded Depth Cards · Next: Glass Lens · All Animated components