Cursor Wave
A grid of shapes that reacts to your cursor and clicks
Customize
Props
18| 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 | numberContainer width
"100%"heightstring | numberContainer height
"100%"classNamestringAdditional CSS classes for styling
""childrenReactNodeContent rendered above the canvas
undefinedcellSizenumberPixel spacing between cell centres (16–96)
40influenceRadiusVminnumberCursor influence radius as a percentage of min(width, height) (5–80)
30attackTimenumberTime constant in seconds for the swell-up ease (0.05–2)
0.5releaseTimenumberTime constant in seconds for the relax-down ease (0.05–2)
0.6idleScalenumberResting scale applied to every shape (0–0.5)
0.09minPeakScalenumberMinimum peak scale assigned per cell on hover (0.5–4)
1maxPeakScalenumberMaximum peak scale assigned per cell on hover (1–6)
3burstSpeednumberClick-burst expansion speed in pixels/second (200–4000)
1200burstThicknessnumberClick-burst ring thickness in pixels (40–600)
180backgroundColorstringBackground fill color in hex format
"#080808"shapes("circle" | "triangle" | "square")[]Pool of shapes randomly assigned across the grid; repeat entries to bias the distribution
["circle", "triangle", "square"]colors(string | { stops: [string, string] })[]Color pool. Strings are solid hex; objects produce a 2-stop radial gradient (top → bottom)
[17 default colors and gradients]dprnumberMaximum device pixel ratio (caps GPU work) (1–3)
2opacitynumberMaster alpha (0–1)
1