ConcentricSpin
Concentric rings that each rotate the underlying image by different amounts
Concentric rings that each rotate the underlying image by different amounts
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| intensity | range | 20 | Maximum rotation angle per ring |
| rings | range | 8 | Number of concentric rings |
| smoothness | range | 0.03 | Softness of transitions between rings |
| seed | range | 0 | Randomization seed for per-ring rotation variation |
| speed | range | 0.1 | Speed of continuous ring rotation |
| speedRandomness | range | 0.5 | How much each ring varies in rotation speed and direction |
| edges | "stretch" | "transparent" | "mirror" | "wrap" | mirror | How to handle edges when distortion pushes content out of bounds |
| center | position | {"x":0.5,"y":0.5} | Center point of the concentric rings |
Usage
vue
<Shader>
<ConcentricSpin
:intensity="20"
>
<Circle />
</ConcentricSpin>
</Shader>