Light Droplets

Streaks of light falling like rain

light-droplets-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Where light falls like rain

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

9:41

Where light falls like rain

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

Where light falls like rain

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedLearn more

Customize

Speed

0.3

Rotation Speed

1.0

Rotation Angle (deg)

Enable Rotation

Column Count

Stretch

0.25

Trail Length

Intensity

1.0

Thickness

0.3

Droplet Color

Max FPS

120

Transparent BackgroundPause 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

Default0.3

colorstring

Droplet color in hex format

Default"#5227FF"

columnCountnumber

Number of droplet columns

Default64

stretchnumber

Vertical stretch factor

Default0.25

trailLengthnumber

Droplet trail length

Default50.0

rotationSpeednumber

Rotation speed multiplier

Default1.0

rotationnumber

Manual rotation angle in degrees (when autoRotate is false)

Default90

intensitynumber

Droplet intensity/brightness

Default1.0

thicknessnumber

Droplet thickness/width

Default0.25

enableRotationboolean

Enable automatic rotation

Defaultfalse

transparentboolean

Transparent background

Defaulttrue

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

Quality preset for performance

Default"medium"

maxFPSnumber

Maximum frames per second

Default120

pauseWhenOffscreenboolean

Pause when component is off-screen

Defaulttrue

classNamestring

Additional CSS classes

Default""

childrenReact.ReactNode

Content to render on top

Defaultundefined

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