Pixelate Hover

An image that pixelates or sharpens under the cursor

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.

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