Pixel Rain

Pixelated streaks falling in a quiet digital rain

pixel-rain-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Digital rain, softly falling

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

Get startedBrowse library

9:41

Digital rain, softly falling

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

Get startedBrowse library

Digital rain, softly falling

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

Get startedLearn more

Customize

Column Width

Speed

0.20

Scatter

2.50

Wave Frequency

0.20

Wave Amplitude

0.60

Trail

6.0

Ambient

0.00

Brightness

1.00

Gamma

1.00

Vignette

0.00

Opacity

1.00

Cursor Glow

0.90

Cursor Reach

0.12

Color

Hot Color

Background

Cursor InteractionAdaptive QualityPaused

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width.
`height`	string \| number	`"100%"`	Container height.
`className`	string	`-`	Additional CSS classes.
`children`	ReactNode	`-`	Content rendered above the effect.
`columnWidth`	number	`3`	Width of one rain column in CSS pixels.
`speed`	number	`0.2`	How fast the columns sweep.
`scatter`	number	`2.5`	Spread of the per-column scatter. Higher values decorrelate neighbours.
`waveFrequency`	number	`0.2`	Frequency of the slow wave riding across the columns.
`waveAmplitude`	number	`0.6`	Strength of the slow wave riding across the columns.
`trail`	number	`6`	Length of each streak. Higher values give shorter streaks.
`ambient`	number	`0`	Ambient level held between streaks.
`color`	string	`"#a54693"`	Colour of the streaks.
`hotColor`	string	`"#a54693"`	Colour the brightest part of a streak shifts toward.
`backgroundColor`	string	`"#0a0a0a"`	Background fill colour. Accepts "transparent".
`direction`	"down" \| "up"	`"down"`	Travel direction of the streaks.
`brightness`	number	`1`	Overall gain.
`gamma`	number	`1`	Contrast curve applied at the end.
`vignette`	number	`0`	Darkening toward the edges from 0 to 1.
`opacity`	number	`1`	Master alpha from 0 to 1.
`cursorInteraction`	boolean	`true`	Let the pointer brighten nearby columns.
`cursorGlow`	number	`0.9`	How much nearby columns brighten.
`cursorReach`	number	`0.12`	Reach of the pointer highlight from 0 to 1.
`adaptiveQuality`	boolean	`true`	Drop resolution when the frame rate falls short.
`targetFps`	number	`60`	Frame rate the adaptive pass aims for.
`dpr`	number	`2`	Upper bound on device pixel ratio.
`paused`	boolean	`false`	Hold the animation still.

widthstring | number

Container width.

Default"100%"

heightstring | number

Container height.

Default"100%"

classNamestring

Additional CSS classes.

Default-

childrenReactNode

Content rendered above the effect.

Default-

columnWidthnumber

Width of one rain column in CSS pixels.

Default3

speednumber

How fast the columns sweep.

Default0.2

scatternumber

Spread of the per-column scatter. Higher values decorrelate neighbours.

Default2.5

waveFrequencynumber

Frequency of the slow wave riding across the columns.

Default0.2

waveAmplitudenumber

Strength of the slow wave riding across the columns.

Default0.6

trailnumber

Length of each streak. Higher values give shorter streaks.

Default6

ambientnumber

Ambient level held between streaks.

Default0

colorstring

Colour of the streaks.

Default"#a54693"

hotColorstring

Colour the brightest part of a streak shifts toward.

Default"#a54693"

backgroundColorstring

Background fill colour. Accepts "transparent".

Default"#0a0a0a"

direction"down" | "up"

Travel direction of the streaks.

Default"down"

brightnessnumber

Overall gain.

Default1

gammanumber

Contrast curve applied at the end.

Default1

vignettenumber

Darkening toward the edges from 0 to 1.

Default0

opacitynumber

Master alpha from 0 to 1.

Default1

cursorInteractionboolean

Let the pointer brighten nearby columns.

Defaulttrue

cursorGlownumber

How much nearby columns brighten.

Default0.9

cursorReachnumber

Reach of the pointer highlight from 0 to 1.

Default0.12

adaptiveQualityboolean

Drop resolution when the frame rate falls short.

Defaulttrue

targetFpsnumber

Frame rate the adaptive pass aims for.

Default60

dprnumber

Upper bound on device pixel ratio.

Default2

pausedboolean

Hold the animation still.

Defaultfalse

Name

Type

Default

Description

width

string | number

"100%"

Container width.

height

string | number

"100%"

Container height.

className

string

-

Additional CSS classes.

children

ReactNode

-

Content rendered above the effect.

columnWidth

number

3

Width of one rain column in CSS pixels.

speed

number

0.2

How fast the columns sweep.

scatter

number

2.5

Spread of the per-column scatter. Higher values decorrelate neighbours.

waveFrequency

number

0.2

Frequency of the slow wave riding across the columns.

waveAmplitude

number

0.6

Strength of the slow wave riding across the columns.

trail

number

6

Length of each streak. Higher values give shorter streaks.

ambient

number

0

Ambient level held between streaks.

color

string

"#a54693"

Colour of the streaks.

hotColor

string

"#a54693"

Colour the brightest part of a streak shifts toward.

backgroundColor

string

"#0a0a0a"

Background fill colour. Accepts "transparent".

direction

"down" | "up"

"down"

Travel direction of the streaks.

brightness

number

1

Overall gain.

gamma

number

1

Contrast curve applied at the end.

vignette

number

0

Darkening toward the edges from 0 to 1.

opacity

number

1

Master alpha from 0 to 1.

cursorInteraction

boolean

true

Let the pointer brighten nearby columns.

cursorGlow

number

0.9

How much nearby columns brighten.

cursorReach

number

0.12

Reach of the pointer highlight from 0 to 1.

adaptiveQuality

boolean

true

Drop resolution when the frame rate falls short.

targetFps

number

60

Frame rate the adaptive pass aims for.

dpr

number

2

Upper bound on device pixel ratio.

paused

boolean

false

Hold the animation still.