Pixelate Hover

Interactive pixelation effect with cursor-controlled reveal

pixelate-hover-tw

Customize

Tweak the props live

Mode & Effect

Mode

Pixel Size30

Falloff1

Cursor

Cursor Radius350

Smoothing0.05

Auto Demo

Auto Speed0.5

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

Default:20

cursorRadiusnumber

Radius of the cursor effect area in pixels

Default:200

falloffnumber

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

Default:0.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

Default:0.15

autoDemoboolean

Enable automatic cursor animation when idle

Default:true

autoSpeednumber

Speed of automatic cursor movement during auto-demo

Default:0.5

autoResumeDelaynumber

Delay in milliseconds before auto-demo resumes after user interaction

Default:1500

styleReact.CSSProperties

Inline styles applied to the container element

Default:undefined

classNamestring

Additional CSS classes for the container

Default:""

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