Bulge

Magnify or pinch content around a center point

Props

  • center

    The center point of the bulge effect

    Type
    {x: number, y: number}
    Default
    {"x":0.5,"y":0.5}

  • strength

    The intensity of the bulge effect (positive = bulge out, negative = pinch in)

    Type
    number
    Default
    1

  • radius

    The radius of the bulge effect area

    Type
    number
    Default
    1

  • falloff

    Controls the smoothness of the transition (0 = hard edge, 1 = very smooth)

    Type
    number
    Default
    0.5

  • edges

    How to handle edges when distortion pushes content out of bounds

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

Usage

<Shader>
  <Bulge
    radius={1}
  >
    <Circle />
  </Bulge>
</Shader>