Simple Swirl
Rotating concentric swirl with glow
simple-swirl-tw
Customize
Animation
1
1
0.32
1
Layers
20
0.13
0.05
1
1
Vignette
0
0.47
Glow
0.05
0.05
Color
1
Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | string | number | "100%" | Container width |
| height | string | number | "100%" | Container height |
| className | string | "" | Additional CSS classes for styling |
| children | ReactNode | undefined | Content rendered above the effect |
| speed | number | 1 | Animation speed multiplier (0.01–3.0) |
| direction | number | 1 | Rotation direction: 1 = clockwise, -1 = counter-clockwise |
| zoom | number | 0.32 | Overall zoom into the swirl (0.05–2.0) |
| layers | number | 20 | Number of concentric layers (1–30) |
| layerStep | number | 0.13 | Spacing increment per layer (0.01–1.0) |
| twist | number | 0.05 | Rotation per layer in radians (0–0.5) |
| lineWeight | number | 1 | Line thickness factor (0.1–5.0) |
| gamma | number | 1 | Gamma exponent for contrast (0.1–5.0) |
| swirlColor | string | "#5227FF" | Foreground swirl color (hex) |
| backgroundColor | string | "#ffffff" | Background fill color (hex) |
| vignetteStart | number | 0 | Radial fade-out start distance (0–1) |
| vignetteEnd | number | 0.47 | Radial fade-out end distance (0–2) |
| glowStrength | number | 0.05 | Center glow intensity (0–1) |
| glowRadius | number | 0.05 | Center glow radius (0–0.5) |
| opacity | number | 1 | Master opacity (0–1) |
| cursorInteraction | boolean | false | Enable cursor interaction to warp twist and line weight near pointer |
| cursorIntensity | number | 1 | Cursor effect strength multiplier (0–3) |