Pixel Reveal

An image that reveals itself through a sweep of pixels

pixel-reveal-tw

Customize

Image URL

Grid Size

Edge Height

0.20

Transition Color

Duration (s)

1.6

PausedAuto TriggerTrigger 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)

Default20

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)

Default0.2

durationnumber

Total reveal duration in seconds (0.2–6)

Default1.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

Defaulttrue

triggerOnceboolean

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

Defaultfalse

triggerThresholdnumber

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

Default0

pausedboolean

Freeze the animation in place

Defaultfalse

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)

Defaultundefined

onRevealComplete() => void

Fires when the reveal animation reaches progress 1

Defaultundefined

refPixelRevealRef

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

Defaultundefined

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