Pixelate Hover

Interactive pixelation effect with cursor-controlled reveal

pixelate-hover-tw

Customize

Pixel Size

Falloff

1.00

Cursor Radius

350

Smoothing

0.05

Auto Demo

Auto Speed

0.50

Auto Resume Delay (ms)

1500

Props

Name	Type	Default	Description
`image`	string	`""`	URL of the image to display and pixelate
`pixelSize`	number	`20`	Size of pixelation blocks - higher values create larger mosaic pixels
`cursorRadius`	number	`200`	Radius of the cursor effect area in pixels
`falloff`	number	`0.5`	Softness of the transition falloff (0-1) - controls edge smoothness
`mode`	"reveal" \| "pixelate"	`"reveal"`	"reveal" starts pixelated and reveals on hover, "pixelate" starts normal and pixelates on hover
`smoothing`	number	`0.15`	Mouse smoothing/dampening factor (0-1) - lower values create smoother, more delayed cursor following
`autoDemo`	boolean	`true`	Enable automatic cursor animation when idle
`autoSpeed`	number	`0.5`	Speed of automatic cursor movement during auto-demo
`autoResumeDelay`	number	`1500`	Delay in milliseconds before auto-demo resumes after user interaction
`style`	React.CSSProperties	`undefined`	Inline styles applied to the container element
`className`	string	`""`	Additional CSS classes for the container

imagestring

URL of the image to display and pixelate

Default""

pixelSizenumber

Size of pixelation blocks - higher values create larger mosaic pixels

Default20

cursorRadiusnumber

Radius of the cursor effect area in pixels

Default200

falloffnumber

Softness of the transition falloff (0-1) - controls edge smoothness

Default0.5

mode"reveal" | "pixelate"

"reveal" starts pixelated and reveals on hover, "pixelate" starts normal and pixelates on hover

Default"reveal"

smoothingnumber

Mouse smoothing/dampening factor (0-1) - lower values create smoother, more delayed cursor following

Default0.15

autoDemoboolean

Enable automatic cursor animation when idle

Defaulttrue

autoSpeednumber

Speed of automatic cursor movement during auto-demo

Default0.5

autoResumeDelaynumber

Delay in milliseconds before auto-demo resumes after user interaction

Default1500

styleReact.CSSProperties

Inline styles applied to the container element

Defaultundefined

classNamestring

Additional CSS classes for the container

Default""

Demo image by Alex Suprun @ unsplash.com, not part of the React Bits Pro offer.