Terminal Rain

Streams of glowing glyphs raining down in layered columns

terminal-rain-tw

Customize

Trail

Head

Background

Glyph Size

18px

Spacing

1.00

Density

0.45

Trail

Speed

1.00

Variance

0.50

Angle

0°

Shuffle

0.35

Depth

0.60

Glow

0.22

Intensity

1.00

Slow Radius

170px

Slow Strength

0.60

Burst Size

1.00

MirrorBullet TimeClick BurstInteractivePaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#9D7BFF", "#FFD6F5"]`	Colour of the falling trails and colour of the bright glyph leading each stream.
`backgroundColor`	string	`"#0A0A0A"`	Colour behind the rain.
`mode`	"auto" \| "glow" \| "ink"	`"auto"`	glow adds light for dark backgrounds, ink prints coloured glyphs for light ones. auto picks from the background brightness.
`glyphs`	string	`half-width katakana, digits and A–F`	Characters the streams are made of. Any string works: binary, hex, letters, symbols or your brand's characters.
`fontFamily`	string	`system monospace`	Font used to draw the glyphs. Use a font that is already loaded on the page.
`glyphSize`	number	`18`	Height of the glyphs in pixels.
`spacing`	number	`1`	Horizontal gap between columns, from 0.6 (packed) to 3 (sparse).
`density`	number	`0.45`	Share of columns carrying a stream at any moment, from 0 to 1.
`trail`	number	`16`	Length of each stream's fading trail, in glyphs.
`speed`	number	`1`	How fast the streams fall.
`variance`	number	`0.5`	How much fall speed varies between columns, from 0 (uniform) to 1.
`angle`	number	`0`	Tilt of the rain in degrees, as if blown by wind.
`shuffle`	number	`0.35`	How often glyphs in the trails change character, from 0 (frozen) to 1.
`mirror`	boolean	`false`	Draw every glyph mirrored, as in the classic film titles.
`depth`	number	`0.6`	Visibility of a second, smaller and slower layer of rain behind the first, from 0 (off) to 1.
`glow`	number	`0.22`	Soft bloom around the bright glyphs, from 0 to 3.
`intensity`	number	`1`	Overall exposure.
`interactive`	boolean	`true`	Respond to the pointer.
`bulletTime`	boolean	`true`	Time slows around the pointer: streams crawl past it and their trails linger, then pick up speed again.
`slowRadius`	number	`170`	Radius of the slowed zone around the pointer, in pixels.
`slowStrength`	number	`0.6`	How much time slows at the centre of the zone, from 0 (no effect) to 1 (nearly frozen).
`clickBurst`	boolean	`true`	Clicking releases a cascade of new streams from the click point, fanning out column by column.
`burstSize`	number	`1`	How many columns a click cascade spans, from 0 to 3.
`paused`	boolean	`false`	Freeze the rain. Reduced-motion users always get a still frame.
`quality`	number	`1`	Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.
`ref`	{ burst }	`—`	burst(x, y) releases a cascade from a point given as fractions of the width and height.
`children`	ReactNode	`—`	Content placed over the background.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 240px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

colors[string, string]

Colour of the falling trails and colour of the bright glyph leading each stream.

Default["#9D7BFF", "#FFD6F5"]

backgroundColorstring

Colour behind the rain.

Default"#0A0A0A"

mode"auto" | "glow" | "ink"

glow adds light for dark backgrounds, ink prints coloured glyphs for light ones. auto picks from the background brightness.

Default"auto"

glyphsstring

Characters the streams are made of. Any string works: binary, hex, letters, symbols or your brand's characters.

Defaulthalf-width katakana, digits and A–F

fontFamilystring

Font used to draw the glyphs. Use a font that is already loaded on the page.

Defaultsystem monospace

glyphSizenumber

Height of the glyphs in pixels.

Default18

spacingnumber

Horizontal gap between columns, from 0.6 (packed) to 3 (sparse).

Default1

densitynumber

Share of columns carrying a stream at any moment, from 0 to 1.

Default0.45

trailnumber

Length of each stream's fading trail, in glyphs.

Default16

speednumber

How fast the streams fall.

Default1

variancenumber

How much fall speed varies between columns, from 0 (uniform) to 1.

Default0.5

anglenumber

Tilt of the rain in degrees, as if blown by wind.

Default0

shufflenumber

How often glyphs in the trails change character, from 0 (frozen) to 1.

Default0.35

mirrorboolean

Draw every glyph mirrored, as in the classic film titles.

Defaultfalse

depthnumber

Visibility of a second, smaller and slower layer of rain behind the first, from 0 (off) to 1.

Default0.6

glownumber

Soft bloom around the bright glyphs, from 0 to 3.

Default0.22

intensitynumber

Overall exposure.

Default1

interactiveboolean

Respond to the pointer.

Defaulttrue

bulletTimeboolean

Time slows around the pointer: streams crawl past it and their trails linger, then pick up speed again.

Defaulttrue

slowRadiusnumber

Radius of the slowed zone around the pointer, in pixels.

Default170

slowStrengthnumber

How much time slows at the centre of the zone, from 0 (no effect) to 1 (nearly frozen).

Default0.6

clickBurstboolean

Clicking releases a cascade of new streams from the click point, fanning out column by column.

Defaulttrue

burstSizenumber

How many columns a click cascade spans, from 0 to 3.

Default1

pausedboolean

Freeze the rain. Reduced-motion users always get a still frame.

Defaultfalse

qualitynumber

Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.

Default1

ref{ burst }

burst(x, y) releases a cascade from a point given as fractions of the width and height.

Default—

childrenReactNode

Content placed over the background.

Default—

classNamestring

Classes for the root element. It fills its parent, with a 240px minimum height.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

colors

[string, string]

["#9D7BFF", "#FFD6F5"]

Colour of the falling trails and colour of the bright glyph leading each stream.

backgroundColor

string

"#0A0A0A"

Colour behind the rain.

mode

"auto" | "glow" | "ink"

"auto"

glow adds light for dark backgrounds, ink prints coloured glyphs for light ones. auto picks from the background brightness.

glyphs

string

half-width katakana, digits and A–F

Characters the streams are made of. Any string works: binary, hex, letters, symbols or your brand's characters.

fontFamily

string

system monospace

Font used to draw the glyphs. Use a font that is already loaded on the page.

glyphSize

number

18

Height of the glyphs in pixels.

spacing

number

1

Horizontal gap between columns, from 0.6 (packed) to 3 (sparse).

density

number

0.45

Share of columns carrying a stream at any moment, from 0 to 1.

trail

number

16

Length of each stream's fading trail, in glyphs.

speed

number

1

How fast the streams fall.

variance

number

0.5

How much fall speed varies between columns, from 0 (uniform) to 1.

angle

number

0

Tilt of the rain in degrees, as if blown by wind.

shuffle

number

0.35

How often glyphs in the trails change character, from 0 (frozen) to 1.

mirror

boolean

false

Draw every glyph mirrored, as in the classic film titles.

depth

number

0.6

Visibility of a second, smaller and slower layer of rain behind the first, from 0 (off) to 1.

glow

number

0.22

Soft bloom around the bright glyphs, from 0 to 3.

intensity

number

1

Overall exposure.

interactive

boolean

true

Respond to the pointer.

bulletTime

boolean

true

Time slows around the pointer: streams crawl past it and their trails linger, then pick up speed again.

slowRadius

number

170

Radius of the slowed zone around the pointer, in pixels.

slowStrength

number

0.6

How much time slows at the centre of the zone, from 0 (no effect) to 1 (nearly frozen).

clickBurst

boolean

true

Clicking releases a cascade of new streams from the click point, fanning out column by column.

burstSize

number

1

How many columns a click cascade spans, from 0 to 3.

paused

boolean

false

Freeze the rain. Reduced-motion users always get a still frame.

quality

number

1

Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.

ref

{ burst }

—

burst(x, y) releases a cascade from a point given as fractions of the width and height.

children

ReactNode

—

Content placed over the background.

className

string

—

Classes for the root element. It fills its parent, with a 240px minimum height.

style

CSSProperties

—

Inline styles for the root element.