CursorRipples
Fluid-like ripple distortion
Fluid-like ripple distortion
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| intensity | range | 10 | Strength of the ripple distortion |
| decay | range | 10 | How quickly ripples fade (higher = faster) |
| radius | range | 0.5 | Radius of cursor influence |
| chromaticSplit | range | 1 | RGB channel separation along ripple edges |
| edges | "stretch" | "transparent" | "mirror" | "wrap" | stretch | How to handle edges when distortion pushes content out of bounds |
Usage
vue
<Shader>
<CursorRipples
:intensity="10"
:radius="0.5"
>
<Circle />
</CursorRipples>
</Shader>