Cursor Wave

A grid of shapes that ripples with the cursor

cursor-wave-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Every move makes a wave

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

9:41

Every move makes a wave

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

Every move makes a wave

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedLearn more

Customize

Cell Size

Influence Radius

Attack Time

0.50

Release Time

0.60

Idle Scale

0.09

Min Peak Scale

1.00

Max Peak Scale

3.00

Opacity

1.00

Burst Speed

1200

Burst Thickness

180

Background

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width
`height`	string \| number	`"100%"`	Container height
`className`	string	`""`	Additional CSS classes for styling
`children`	ReactNode	`undefined`	Content rendered above the canvas
`cellSize`	number	`40`	Pixel spacing between cell centres (16–96)
`influenceRadiusVmin`	number	`30`	Cursor influence radius as a percentage of min(width, height) (5–80)
`attackTime`	number	`0.5`	Time constant in seconds for the swell-up ease (0.05–2)
`releaseTime`	number	`0.6`	Time constant in seconds for the relax-down ease (0.05–2)
`idleScale`	number	`0.09`	Resting scale applied to every shape (0–0.5)
`minPeakScale`	number	`1`	Minimum peak scale assigned per cell on hover (0.5–4)
`maxPeakScale`	number	`3`	Maximum peak scale assigned per cell on hover (1–6)
`burstSpeed`	number	`1200`	Click-burst expansion speed in pixels/second (200–4000)
`burstThickness`	number	`180`	Click-burst ring thickness in pixels (40–600)
`backgroundColor`	string	`"#080808"`	Background fill color in hex format
`shapes`	("circle" \| "triangle" \| "square")[]	`["circle", "triangle", "square"]`	Pool of shapes randomly assigned across the grid; repeat entries to bias the distribution
`colors`	(string \| { stops: [string, string] })[]	`[17 default colors and gradients]`	Color pool. Strings are solid hex; objects produce a 2-stop radial gradient (top → bottom)
`dpr`	number	`2`	Maximum device pixel ratio (caps GPU work) (1–3)
`opacity`	number	`1`	Master alpha (0–1)

widthstring | number

Container width

Default"100%"

heightstring | number

Container height

Default"100%"

classNamestring

Additional CSS classes for styling

Default""

childrenReactNode

Content rendered above the canvas

Defaultundefined

cellSizenumber

Pixel spacing between cell centres (16–96)

Default40

influenceRadiusVminnumber

Cursor influence radius as a percentage of min(width, height) (5–80)

Default30

attackTimenumber

Time constant in seconds for the swell-up ease (0.05–2)

Default0.5

releaseTimenumber

Time constant in seconds for the relax-down ease (0.05–2)

Default0.6

idleScalenumber

Resting scale applied to every shape (0–0.5)

Default0.09

minPeakScalenumber

Minimum peak scale assigned per cell on hover (0.5–4)

Default1

maxPeakScalenumber

Maximum peak scale assigned per cell on hover (1–6)

Default3

burstSpeednumber

Click-burst expansion speed in pixels/second (200–4000)

Default1200

burstThicknessnumber

Click-burst ring thickness in pixels (40–600)

Default180

backgroundColorstring

Background fill color in hex format

Default"#080808"

shapes("circle" | "triangle" | "square")[]

Pool of shapes randomly assigned across the grid; repeat entries to bias the distribution

Default["circle", "triangle", "square"]

colors(string | { stops: [string, string] })[]

Color pool. Strings are solid hex; objects produce a 2-stop radial gradient (top → bottom)

Default[17 default colors and gradients]

dprnumber

Maximum device pixel ratio (caps GPU work) (1–3)

Default2

opacitynumber

Master alpha (0–1)

Default1

Name

Type

Default

Description

width

string | number

"100%"

Container width

height

string | number

"100%"

Container height

className

string

""

Additional CSS classes for styling

children

ReactNode

undefined

Content rendered above the canvas

cellSize

number

40

Pixel spacing between cell centres (16–96)

influenceRadiusVmin

number

30

Cursor influence radius as a percentage of min(width, height) (5–80)

attackTime

number

0.5

Time constant in seconds for the swell-up ease (0.05–2)

releaseTime

number

0.6

Time constant in seconds for the relax-down ease (0.05–2)

idleScale

number

0.09

Resting scale applied to every shape (0–0.5)

minPeakScale

number

1

Minimum peak scale assigned per cell on hover (0.5–4)

maxPeakScale

number

3

Maximum peak scale assigned per cell on hover (1–6)

burstSpeed

number

1200

Click-burst expansion speed in pixels/second (200–4000)

burstThickness

number

180

Click-burst ring thickness in pixels (40–600)

backgroundColor

string

"#080808"

Background fill color in hex format

shapes

("circle" | "triangle" | "square")[]

["circle", "triangle", "square"]

Pool of shapes randomly assigned across the grid; repeat entries to bias the distribution

colors

(string | { stops: [string, string] })[]

[17 default colors and gradients]

Color pool. Strings are solid hex; objects produce a 2-stop radial gradient (top → bottom)

dpr

number

2

Maximum device pixel ratio (caps GPU work) (1–3)

opacity

number

1

Master alpha (0–1)