GridDistortion

Interactive grid distortion controlled by mouse position

Props

  • intensity

    Strength of the distortion effect

    Type
    number
    Default
    1

  • decay

    Rate of distortion decay (higher = faster)

    Type
    number
    Default
    3

  • radius

    Radius of the distortion effect

    Type
    number
    Default
    1

  • gridSize

    Resolution of the distortion grid (higher = more detailed)

    Type
    number
    Default
    20

  • edges

    How to handle edges when distortion pushes content out of bounds

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

Usage

<Shader>
  <GridDistortion
    intensity={1}
    radius={1}
  >
    <Circle />
  </GridDistortion>
</Shader>