Metallic Swirl
Metallic swirl shader background
metallic-swirl-tw
Customize
Animation
1
6
12
1
Flow
0.095
0.75
0.15
Color Phases
3.11
3.11
3.11
Tone
0.75
0.5
1
Interaction
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) |
| zoom | number | 6 | Zoom level of the pattern (1–30) |
| iterations | number | 12 | Number of flow iterations (1–12). More iterations = more complex swirls |
| sampleGap | number | 0.095 | Sampling epsilon for gradient computation (0.01–0.5) |
| tangentForce | number | 0.75 | Tangent flow strength per iteration (0–2) |
| gradientForce | number | 0.15 | Gradient push strength per iteration (0–1) |
| colorPhaseR | number | 3.11 | Color phase offset for red channel (0–6.28) |
| colorPhaseG | number | 3.11 | Color phase offset for green channel (0–6.28) |
| colorPhaseB | number | 3.11 | Color phase offset for blue channel (0–6.28) |
| colorRange | number | 0.75 | Color saturation range (0–1) |
| colorBias | number | 0.5 | Color midpoint brightness (0–1) |
| brightness | number | 1 | Overall brightness multiplier (0–3) |
| backgroundColor | string | "#000000" | Background color in hex |
| opacity | number | 1 | Master opacity (0–1) |
| cursorInteraction | boolean | false | Enable cursor interaction to intensify flow turbulence near pointer |
| cursorIntensity | number | 1 | Cursor effect strength multiplier (0–3) |