Streaks of light sweeping into a warp
| 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) |
widthstring | numberContainer width
"100%"heightstring | numberContainer height
"100%"classNamestringAdditional CSS classes
""childrenReactNodeContent rendered above the effect
undefinedspeednumberAnimation speed multiplier (0.01–2.0)
0.2scalenumberPattern zoom scale, higher = zoomed in (0.1–5.0)
1.5warpStrengthnumberIntensity of the conformal star warp (0–5)
1.5warpCurvaturenumberMöbius projection curvature numerator (0.1–20)
6.0warpFalloffnumberMöbius denominator offset: higher values soften center warp (0.1–20)
4.0scrollSpeednumberHow fast the pattern sweeps across the screen (0–20)
6.0noiseAmountnumberScreen-space dither noise amount (0–2)
0.5colorIntensitynumberOverall color brightness factor (0.01–2.0)
0.1colorSeparationnumberRGB channel separation for rainbow-like splits (0–5)
0rotationnumberRotation angle in degrees (-180–180)
-45colorstringTint color (hex)
"#FF9FFC"backgroundColorstringBackground color (hex)
"#000000"opacitynumberMaster opacity (0–1)
1cursorInteractionbooleanEnable cursor interaction to bend the warp field near pointer
falsecursorIntensitynumberCursor effect strength multiplier (0–3)
1