Pixel Reveal

An image that reveals itself through a sweep of pixels

pixel-reveal-tw

Customize

Tweak the props live

Image & Geometry

Image URL

Grid Size20

Edge Height0.2

Transition Color

#ffffff

Animation

Duration (s)1.6

Easing

Direction

Paused

Trigger

Auto Trigger

Trigger Once

Props

Name	Type	Default	Description
`imageSrc`	string	`""`	Image URL to reveal (required)
`width`	string \| number	`"100%"`	Container width
`height`	string \| number	`"100%"`	Container height
`gridSize`	number	`20`	Approximate pixel size of each dissolving cell — lower means a denser grid (4–80)
`transitionColor`	string	`"#242424"`	Hex color of the dissolving pixel squares
`edgeHeight`	number	`0.2`	Thickness of the noisy leading edge as a fraction of the axis (0.05–0.6)
`duration`	number	`1.6`	Total reveal duration in seconds (0.2–6)
`easing`	"linear" \| "easeIn" \| "easeOut" \| "easeInOut"	`"linear"`	Easing curve applied to the progress ramp
`direction`	"up" \| "down" \| "left" \| "right"	`"up"`	Axis along which the reveal sweeps
`autoTrigger`	boolean	`true`	Auto-fire the reveal when the container intersects the viewport
`triggerOnce`	boolean	`false`	Only auto-trigger on the first viewport entry; otherwise replay each time it re-enters
`triggerThreshold`	number	`0`	Intersection ratio that fires the auto-trigger (0–1)
`paused`	boolean	`false`	Freeze the animation in place
`borderRadius`	string \| number	`"0px"`	Border radius applied to the container
`className`	string	`""`	Additional CSS classes for the container
`children`	ReactNode	`undefined`	Content rendered above the canvas (pointer-events disabled by default)
`onRevealComplete`	() => void	`undefined`	Fires when the reveal animation reaches progress 1
`ref`	PixelRevealRef	`undefined`	Imperative API: { trigger(), play(), reset() } for manual playback

imageSrcstring

Image URL to reveal (required)

Default:""

widthstring | number

Container width

Default:"100%"

heightstring | number

Container height

Default:"100%"

gridSizenumber

Approximate pixel size of each dissolving cell — lower means a denser grid (4–80)

Default:20

transitionColorstring

Hex color of the dissolving pixel squares

Default:"#242424"

edgeHeightnumber

Thickness of the noisy leading edge as a fraction of the axis (0.05–0.6)

Default:0.2

durationnumber

Total reveal duration in seconds (0.2–6)

Default:1.6

easing"linear" | "easeIn" | "easeOut" | "easeInOut"

Easing curve applied to the progress ramp

Default:"linear"

direction"up" | "down" | "left" | "right"

Axis along which the reveal sweeps

Default:"up"

autoTriggerboolean

Auto-fire the reveal when the container intersects the viewport

Default:true

triggerOnceboolean

Only auto-trigger on the first viewport entry; otherwise replay each time it re-enters

Default:false

triggerThresholdnumber

Intersection ratio that fires the auto-trigger (0–1)

Default:0

pausedboolean

Freeze the animation in place

Default:false

borderRadiusstring | number

Border radius applied to the container

Default:"0px"

classNamestring

Additional CSS classes for the container

Default:""

childrenReactNode

Content rendered above the canvas (pointer-events disabled by default)

Default:undefined

onRevealComplete() => void

Fires when the reveal animation reaches progress 1

Default:undefined

refPixelRevealRef

Imperative API: { trigger(), play(), reset() } for manual playback

Default:undefined