Liquify

Liquid-like interactive deformation effect

Props

  • intensity

    Scale of the fabric displacement effect

    Type
    number
    Default
    10

  • stiffness

    Fabric rigidity (higher = stiffer canvas, lower = stretchy silk)

    Type
    number
    Default
    3

  • damping

    How quickly fabric motion settles

    Type
    number
    Default
    3

  • radius

    Cursor influence area

    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>
  <Liquify
    intensity={10}
    radius={1}
  >
    <Circle />
  </Liquify>
</Shader>