Toggle Sidebar B
Light & dark mode D

Liquify

Liquid-like interactive deformation effect

Liquid-like interactive deformation effect

Props

PropTypeDefaultDescription
intensityrange10Scale of the fabric displacement effect
stiffnessrange3Fabric rigidity (higher = stiffer canvas, lower = stretchy silk)
dampingrange3How quickly fabric motion settles
radiusrange1Cursor influence area
edges"stretch" | "transparent" | "mirror" | "wrap"stretchHow to handle edges when distortion pushes content out of bounds

Usage

vue
<Shader>
  <Liquify
    :intensity="10"
    :radius="1"
  >
    <Circle />
  </Liquify>
</Shader>