Pixelate Image
0
Used by 0Controls
Pixelate Image
Reveal or conceal an image through a real-time SVG pixelation filter driven by cursor distance or a scroll-triggered tween.
KEY FEATURES
- — Pixelate or depixelate reveal modes
- — Hover trigger that maps cursor distance from center to pixelation
- — Scroll-into-view enter trigger with configurable easing tween
- — Adjustable hover area and safe-area radius
- — Replay animation each time it re-enters the viewport
- — Trigger position at top, middle, or bottom of the viewport
- — Intensity control for pixel block size
- — Custom image with width and height controls
- — SVG feConvolveMatrix-based pixelation filter
- — Mobile-aware fallback that disables the filter
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
image
responsiveimage
{"..."}
Source image shown and revealed through the pixelation filter.
imageWidth
number
800
Width of the image box in pixels.
imageHeight
number
500
Height of the image box in pixels.
intensity
number
10
Strength of the pixelation; higher yields coarser, blockier pixels.
pixelateMode
enum
depixelate
Effect direction: depixelate sharpens the image, pixelate blocks it up.
hoverArea
number
100
How far beyond the image the cursor still affects pixelation, in percent.
safeArea
number
10
Central zone kept fully resolved around the center, in percent.
enterEase
transition
{"..."}
Easing curve and duration of the scroll-triggered enter tween.
enterPosition
enum
above
Scroll point that fires the enter animation: top, middle, or bottom.
enterReplay
enum
no
Replays the enter animation each time the component re-enters view.
ANIMATION
PROP
TYPE
DEFAULT
DESCRIPTION
animationMode
enum
enter
Trigger source: cursor distance (hover) or scroll into view (enter).
