Halftone Reveal
A screen of halftone dots covers the content and shrinks away under the cursor, or sweeps off when it scrolls into view.
import { HalftoneReveal } from "pleate/effects/halftone-reveal";Wipe with the cursor
Wiped dots grow back slowly.
Hidden
Wipe the dots away with the pointer.
On scroll
Revealed on scroll
Props
- trigger
Cursor wipe, or one sweep when in view.
"hover" | "view"default "hover"- gap
Distance between dots in px.
numberdefault 12- radius
Reach of the cursor in px.
numberdefault 90- color
Dot color.
stringdefault var(--pl-accent)- heal
How fast dots grow back per second; 0 keeps them gone.
numberdefault 0.35
Accessibility
- The dots are a decorative canvas; the content underneath is always in the DOM.
- Hover mode needs a mouse: touch and reduced motion get the content uncovered.