Light Droplets
light-droplets-tw
Customize
0.3
64
0.25
50
1
90
1
0.25
120
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 | 0.3 | Animation speed multiplier |
| color | string | "#5227FF" | Droplet color in hex format |
| columnCount | number | 64 | Number of droplet columns |
| stretch | number | 0.25 | Vertical stretch factor |
| trailLength | number | 50.0 | Droplet trail length |
| rotationSpeed | number | 1.0 | Rotation speed multiplier |
| rotation | number | 90 | Manual rotation angle in degrees (when autoRotate is false) |
| intensity | number | 1.0 | Droplet intensity/brightness |
| thickness | number | 0.25 | Droplet thickness/width |
| enableRotation | boolean | false | Enable automatic rotation |
| transparent | boolean | true | Transparent background |
| quality | "low" | "medium" | "high" | "medium" | Quality preset for performance |
| maxFPS | number | 120 | Maximum frames per second |
| pauseWhenOffscreen | boolean | true | Pause when component is off-screen |
| className | string | "" | Additional CSS classes |
| children | React.ReactNode | undefined | Content to render on top |