Vignette

Darkens or tints the edges of the frame, drawing attention toward the center

Props

  • color

    Color of the vignette at the edges

    Type
    string
    Default
    #000000

  • center

    Center of the clear area where the vignette begins

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

  • radius

    Distance from center where the vignette begins to fade in

    Type
    number
    Default
    0.5

  • falloff

    Width of the transition zone from clear to full vignette

    Type
    number
    Default
    0.5

  • intensity

    Strength of the vignette effect

    Type
    number
    Default
    1

Usage

<Shader>
  <Vignette
    color="#000000"
    radius={0.5}
    intensity={1}
  >
    <Circle />
  </Vignette>
</Shader>