Star Swipe
Conformal star warp shader with sweeping motion
star-swipe-tw
Customize
Animation
0.2
6
-45
1.5
1
Warp
1.5
6
4
0.5
Color
0.1
0
1
Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | string | number | "100%" | Container width |
| height | string | number | "100%" | Container height |
| className | string | "" | Additional CSS classes |
| children | ReactNode | undefined | Content rendered above the effect |
| speed | number | 0.2 | Animation speed multiplier (0.01–2.0) |
| scale | number | 1.5 | Pattern zoom scale — higher = zoomed in (0.1–5.0) |
| warpStrength | number | 1.5 | Intensity of the conformal star warp (0–5) |
| warpCurvature | number | 6.0 | Möbius projection curvature numerator (0.1–20) |
| warpFalloff | number | 4.0 | Möbius denominator offset — higher values soften center warp (0.1–20) |
| scrollSpeed | number | 6.0 | How fast the pattern sweeps across the screen (0–20) |
| noiseAmount | number | 0.5 | Screen-space dither noise amount (0–2) |
| colorIntensity | number | 0.1 | Overall color brightness factor (0.01–2.0) |
| colorSeparation | number | 0 | RGB channel separation for rainbow-like splits (0–5) |
| rotation | number | -45 | Rotation angle in degrees (-180–180) |
| color | string | "#FF9FFC" | Tint color (hex) |
| backgroundColor | string | "#000000" | Background color (hex) |
| opacity | number | 1 | Master opacity (0–1) |
| cursorInteraction | boolean | false | Enable cursor interaction to bend the warp field near pointer |
| cursorIntensity | number | 1 | Cursor effect strength multiplier (0–3) |