ConcentricSpin

Concentric rings that each rotate the underlying image by different amounts

Props

  • intensity

    Maximum rotation angle per ring

    Type
    number
    Default
    20

  • rings

    Number of concentric rings

    Type
    number
    Default
    8

  • smoothness

    Softness of transitions between rings

    Type
    number
    Default
    0.03

  • seed

    Randomization seed for per-ring rotation variation

    Type
    number
    Default
    0

  • speed

    Speed of continuous ring rotation

    Type
    number
    Default
    0.1

  • speedRandomness

    How much each ring varies in rotation speed and direction

    Type
    number
    Default
    0.5

  • edges

    How to handle edges when distortion pushes content out of bounds

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

  • center

    Center point of the concentric rings

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

Usage

<Shader>
  <ConcentricSpin
    intensity={20}
  >
    <Circle />
  </ConcentricSpin>
</Shader>