Light Droplets
Falling light streaks with rotation and glow effects
light-droplets-tw
Customize
Speed
0.3
Rotation Speed
1.0
Rotation Angle (deg)
90
Column Count
64
Stretch
0.25
Trail Length
50
Intensity
1.0
Thickness
0.3
Droplet Color
Max FPS
120
Props
18| 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 |
widthnumber | stringWidth of the component in pixels or CSS value
Default
"100%"heightnumber | stringHeight of the component in pixels or CSS value
Default
"100%"speednumberAnimation speed multiplier
Default
0.3colorstringDroplet color in hex format
Default
"#5227FF"columnCountnumberNumber of droplet columns
Default
64stretchnumberVertical stretch factor
Default
0.25trailLengthnumberDroplet trail length
Default
50.0rotationSpeednumberRotation speed multiplier
Default
1.0rotationnumberManual rotation angle in degrees (when autoRotate is false)
Default
90intensitynumberDroplet intensity/brightness
Default
1.0thicknessnumberDroplet thickness/width
Default
0.25enableRotationbooleanEnable automatic rotation
Default
falsetransparentbooleanTransparent background
Default
truequality"low" | "medium" | "high"Quality preset for performance
Default
"medium"maxFPSnumberMaximum frames per second
Default
120pauseWhenOffscreenbooleanPause when component is off-screen
Default
trueclassNamestringAdditional CSS classes
Default
""childrenReact.ReactNodeContent to render on top
Default
undefined