Lightspeed
lightspeed-tw
Customize
0.5
1
128
0.05
0
2
1
60
Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | number | string | "100%" | Width of the component in pixels or CSS value |
| height | number | string | "100%" | Height of the component in pixels or CSS value |
| speed | number | 1.0 | Animation speed multiplier |
| primaryColor | string | "#FF5722" | Primary streak color in hex format |
| secondaryColor | string | "#2196F3" | Secondary streak color in hex format |
| tertiaryColor | string | "#4CAF50" | Tertiary streak color in hex format |
| streakCount | number | 128 | Number of horizontal streak columns |
| stretchFactor | number | 0.05 | Vertical stretch factor of streaks |
| intensity | number | 1.0 | Overall intensity/brightness multiplier |
| interactionEnabled | boolean | true | Enable compression on mouse click |
| rotation | number | 0 | Rotation angle in radians |
| fadePower | number | 2.0 | Distance-based fade multiplier |
| opacity | number | 1.0 | Overall opacity (0-1) |
| quality | "low" | "medium" | "high" | "medium" | Quality preset for performance/visual tradeoff |
| maxFPS | number | 60 | Maximum frames per second cap |
| pauseWhenOffscreen | boolean | true | Pause rendering when component is off-screen |
| className | string | "" | Additional CSS classes |
| children | React.ReactNode | undefined | Content to render on top of the effect |