Light Droplets

Falling light streaks with rotation and glow effects

light-droplets-tw

Customize

Tweak the props live

Animation

Speed0.3

Rotation Speed1

Rotation Angle (deg)90

Enable Rotation

Droplet Settings

Column Count64

Stretch0.25

Trail Length50

Intensity1

Thickness0.25

Droplet Color

#5227FF

Performance

Quality

Max FPS120

Transparent Background

Pause When Offscreen

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

widthnumber | string

Width of the component in pixels or CSS value

Default:"100%"

heightnumber | string

Height of the component in pixels or CSS value

Default:"100%"

speednumber

Animation speed multiplier

Default:0.3

colorstring

Droplet color in hex format

Default:"#5227FF"

columnCountnumber

Number of droplet columns

Default:64

stretchnumber

Vertical stretch factor

Default:0.25

trailLengthnumber

Droplet trail length

Default:50.0

rotationSpeednumber

Rotation speed multiplier

Default:1.0

rotationnumber

Manual rotation angle in degrees (when autoRotate is false)

Default:90

intensitynumber

Droplet intensity/brightness

Default:1.0

thicknessnumber

Droplet thickness/width

Default:0.25

enableRotationboolean

Enable automatic rotation

Default:false

transparentboolean

Transparent background

Default:true

quality"low" | "medium" | "high"

Quality preset for performance

Default:"medium"

maxFPSnumber

Maximum frames per second

Default:120

pauseWhenOffscreenboolean

Pause when component is off-screen

Default:true

classNamestring

Additional CSS classes

Default:""

childrenReact.ReactNode

Content to render on top

Default:undefined