Pixel Reveal
0
Used by 0Controls
Pixel Reveal
Dissolve a grid of colored pixel squares to reveal an image, sweeping up, down, left, or right with a ragged, noisy leading edge.
KEY FEATURES
- — Directional reveal sweep up, down, left, or right
- — Adjustable pixel grid cell size in pixels
- — Custom pixel cover color
- — Ragged dissolving frontier via Edge Noise control
- — Configurable transition easing and duration
- — Auto-plays once when scrolled into view
- — Retina-aware canvas rendering with device pixel ratio scaling
- — Responsive grid rebuild on container resize
- — onRevealComplete callback fires when the reveal finishes
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
imageSrc
image
https://imagedelivery.net/IEUjvl3YUlxY-MrTpOAWDQ/51984031-9176-484b-f5e0-4af9a8e9ed00/w=800
The image revealed beneath the dissolving pixel cover.
gridSize
number
5
Size of each pixel square in px; smaller makes a finer grid.
transitionColor
color
#000000
Fill color of the pixel squares covering the image.
edgeHeight
number
10
Raggedness of the dissolving frontier; higher scatters cells more.
transition
transition
{"..."}
Duration and easing curve of the reveal animation.
direction
enum
up
Sweep direction of the reveal: up, down, left, or right.
