CursorsNew
Ripple Surface
A water-like surface: a click sends out rings and the cursor leaves a light ripple. The grid underneath bends.
Customize
color
background
A Codearia component · Terms of use
More in Pro
View allProps
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| color | string | "#ffffff" | Color of the grid and highlights. |
| background | string | "#0a0a0a" | Surface color. |
| gridSize | number | 32 | Grid step, in pixels. 0 hides the grid. |
| strength | number | 1 | Wave height. |
| speed | number | 1 | Speed. 0 stops the motion. |
| lifetime | number | 3 | How long one ripple lives, in seconds. |
| rippleOnMove | boolean | true | Leave small rings while the cursor moves. |
| autoDemo | boolean | true | Drop ripples on their own until the visitor touches the block. |
| children | ReactNode | — | Content on top of the effect. |
| className | string | — | Classes for the wrapper. |
Dependencies
3 required packages
npm install ogl clsx tailwind-merge