CursorRipples

Fluid-like ripple distortion

Props

  • intensity

    Strength of the ripple distortion

    Type
    number
    Default
    10

  • decay

    How quickly ripples fade (higher = faster)

    Type
    number
    Default
    10

  • radius

    Radius of cursor influence

    Type
    number
    Default
    0.5

  • chromaticSplit

    RGB channel separation along ripple edges

    Type
    number
    Default
    1

  • edges

    How to handle edges when distortion pushes content out of bounds

    Type
    "stretch" | "transparent" | "mirror" | "wrap"
    Default
    stretch

Usage

<Shader>
  <CursorRipples
    intensity={10}
    radius={0.5}
  >
    <Circle />
  </CursorRipples>
</Shader>