Pixel Rain

Pixelated streaks falling in a quiet digital rain

pixel-rain-tw

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