Documentation

GuidesComponents

ConcentricSpin

Concentric rings that each rotate the underlying image by different amounts

Props

intensitynumber
Default:20
Maximum rotation angle per ring
ringsnumber
Default:8
Number of concentric rings
smoothnessnumber
Default:0.03
Softness of transitions between rings
seednumber
Default:0
Randomization seed for per-ring rotation variation
speednumber
Default:0.1
Speed of continuous ring rotation
speedRandomnessnumber
Default:0.5
How much each ring varies in rotation speed and direction
edges"stretch" | "transparent" | "mirror" | "wrap"
Default:mirror
How to handle edges when distortion pushes content out of bounds
center{x: number, y: number}
Default:{"x":0.5,"y":0.5}
Center point of the concentric rings

Usage

<Shader>
  <ConcentricSpin
    intensity={20}
  >
    <Circle />
  </ConcentricSpin>
</Shader>
Previous
Circle
Next
ConicGradient