Glyph Stream

A liquid stream of glyph tiles that pours after the cursor and splashes on click

glyph-stream-tw

Customize

Head

Tail

Glyphs

Custom Characters

Cell Size

14px

Cell Gap

2.0px

Cell Radius

2.0px

Glyph Scale

0.56

Thickness

0.70

Trail Length

0.85s

Smoothing

0.45

Wobble

0.35

Momentum

0.70

Viscosity

0.15

Tension

0.15

Breakup

0.90

Edge Softness

0.50

Sheen

0.45

Scramble

8.0/s

Splash Size

1.20

Autoplay Speed

1.00

Idle Delay

1.50s

SplashAutoplayIntroInteractiveDisabled

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#5227FF", "#FF9FFC"]`	Colour of fresh liquid at the head and of aged liquid in the tail, blended in OKLab along the stream. Accepts any CSS colour, including currentColor.
`glyphColor`	string	`"rgba(255, 255, 255, 0.82)"`	Colour of the characters inside the cells. Use its alpha to set how strongly they read.
`characters`	string	`"A–Z0–9"`	The pool of characters the stream is made of. Whitespace is ignored.
`fontFamily`	string	`ui-monospace stack`	Font of the characters.
`cellSize`	number	`14`	Size of one grid cell in pixels. The stream is drawn on this grid.
`cellGap`	number	`2`	Gap between neighbouring cells in pixels.
`cellRadius`	number	`2`	Corner radius of each cell in pixels. 0 gives sharp pixels.
`glyphScale`	number	`0.56`	Character size relative to the cell, from 0 (no characters) to 1.
`thickness`	number	`0.7`	Width of the stream. Fast strokes swell it, slow ones thin it to a fine line.
`trailLength`	number	`0.85`	Seconds the liquid lasts before it has evaporated.
`smoothing`	number	`0.45`	Damping between the pointer and the nozzle that pours the stream, from 0 (glued to the pointer) to 1 (slow and fluid).
`wobble`	number	`0.35`	How far the nozzle overshoots on sharp turns before it settles, from 0 to 1.
`momentum`	number	`0.7`	How much of the stroke's speed the liquid keeps, so it flows on after you stop.
`viscosity`	number	`0.15`	Drag on the liquid, from runny (0) to thick (1).
`tension`	number	`0.15`	Surface tension. It smooths kinks out of the stream and pulls the tail back as it drains.
`breakup`	number	`0.9`	How strongly the thinning tail pinches off into droplets, from 0 (an unbroken ribbon) to 1.
`edgeSoftness`	number	`0.5`	Fade at the edge of the stream, from 0 (crisp pixel edge) to 1 (a soft, translucent rim).
`sheen`	number	`0.45`	Light catching the upper rim of the stream, from 0 to 1.
`scramble`	number	`8`	How often characters change per second at the fresh head of the stream. The tail settles.
`splash`	boolean	`true`	Click or tap to splash a crown of droplets that fly out and evaporate.
`splashSize`	number	`1.2`	Size and reach of the splash.
`autoplay`	boolean	`false`	Pour on its own along flowing curves while the pointer is away, with the odd splash. The pointer takes over the stream the moment it enters.
`autoplaySpeed`	number	`1`	Speed multiplier for autoplay.
`idleDelay`	number	`1.5`	Seconds after the pointer leaves before autoplay resumes.
`intro`	boolean	`true`	Pour one stroke across the component the first time it scrolls into view. With autoplay on, the stream flows in from the edge instead.
`interactive`	boolean	`true`	Follow the visitor's pointer. Turn it off to show only autoplay and scripted splashes.
`disabled`	boolean	`false`	Stop pouring and ignore input. Liquid already on screen drains away.
`ref`	{ splash, clear, replay }	`—`	splash(x?, y?) splashes at a point in pixels (or at the stream), clear() empties it, replay() pours the intro again.
`children`	ReactNode	`—`	Content the stream pours over.
`className`	string	`—`	Classes for the root element. It fills its parent and is at least 240px tall.
`style`	CSSProperties	`—`	Inline styles for the root element.

colors[string, string]

Colour of fresh liquid at the head and of aged liquid in the tail, blended in OKLab along the stream. Accepts any CSS colour, including currentColor.

Default["#5227FF", "#FF9FFC"]

glyphColorstring

Colour of the characters inside the cells. Use its alpha to set how strongly they read.

Default"rgba(255, 255, 255, 0.82)"

charactersstring

The pool of characters the stream is made of. Whitespace is ignored.

Default"A–Z0–9"

fontFamilystring

Font of the characters.

Defaultui-monospace stack

cellSizenumber

Size of one grid cell in pixels. The stream is drawn on this grid.

Default14

cellGapnumber

Gap between neighbouring cells in pixels.

Default2

cellRadiusnumber

Corner radius of each cell in pixels. 0 gives sharp pixels.

Default2

glyphScalenumber

Character size relative to the cell, from 0 (no characters) to 1.

Default0.56

thicknessnumber

Width of the stream. Fast strokes swell it, slow ones thin it to a fine line.

Default0.7

trailLengthnumber

Seconds the liquid lasts before it has evaporated.

Default0.85

smoothingnumber

Damping between the pointer and the nozzle that pours the stream, from 0 (glued to the pointer) to 1 (slow and fluid).

Default0.45

wobblenumber

How far the nozzle overshoots on sharp turns before it settles, from 0 to 1.

Default0.35

momentumnumber

How much of the stroke's speed the liquid keeps, so it flows on after you stop.

Default0.7

viscositynumber

Drag on the liquid, from runny (0) to thick (1).

Default0.15

tensionnumber

Surface tension. It smooths kinks out of the stream and pulls the tail back as it drains.

Default0.15

breakupnumber

How strongly the thinning tail pinches off into droplets, from 0 (an unbroken ribbon) to 1.

Default0.9

edgeSoftnessnumber

Fade at the edge of the stream, from 0 (crisp pixel edge) to 1 (a soft, translucent rim).

Default0.5

sheennumber

Light catching the upper rim of the stream, from 0 to 1.

Default0.45

scramblenumber

How often characters change per second at the fresh head of the stream. The tail settles.

Default8

splashboolean

Click or tap to splash a crown of droplets that fly out and evaporate.

Defaulttrue

splashSizenumber

Size and reach of the splash.

Default1.2

autoplayboolean

Pour on its own along flowing curves while the pointer is away, with the odd splash. The pointer takes over the stream the moment it enters.

Defaultfalse

autoplaySpeednumber

Speed multiplier for autoplay.

Default1

idleDelaynumber

Seconds after the pointer leaves before autoplay resumes.

Default1.5

introboolean

Pour one stroke across the component the first time it scrolls into view. With autoplay on, the stream flows in from the edge instead.

Defaulttrue

interactiveboolean

Follow the visitor's pointer. Turn it off to show only autoplay and scripted splashes.

Defaulttrue

disabledboolean

Stop pouring and ignore input. Liquid already on screen drains away.

Defaultfalse

ref{ splash, clear, replay }

splash(x?, y?) splashes at a point in pixels (or at the stream), clear() empties it, replay() pours the intro again.

Default—

childrenReactNode

Content the stream pours over.

Default—

classNamestring

Classes for the root element. It fills its parent and is at least 240px tall.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

colors

[string, string]

["#5227FF", "#FF9FFC"]

Colour of fresh liquid at the head and of aged liquid in the tail, blended in OKLab along the stream. Accepts any CSS colour, including currentColor.

glyphColor

string

"rgba(255, 255, 255, 0.82)"

Colour of the characters inside the cells. Use its alpha to set how strongly they read.

characters

string

"A–Z0–9"

The pool of characters the stream is made of. Whitespace is ignored.

fontFamily

string

ui-monospace stack

Font of the characters.

cellSize

number

14

Size of one grid cell in pixels. The stream is drawn on this grid.

cellGap

number

2

Gap between neighbouring cells in pixels.

cellRadius

number

2

Corner radius of each cell in pixels. 0 gives sharp pixels.

glyphScale

number

0.56

Character size relative to the cell, from 0 (no characters) to 1.

thickness

number

0.7

Width of the stream. Fast strokes swell it, slow ones thin it to a fine line.

trailLength

number

0.85

Seconds the liquid lasts before it has evaporated.

smoothing

number

0.45

Damping between the pointer and the nozzle that pours the stream, from 0 (glued to the pointer) to 1 (slow and fluid).

wobble

number

0.35

How far the nozzle overshoots on sharp turns before it settles, from 0 to 1.

momentum

number

0.7

How much of the stroke's speed the liquid keeps, so it flows on after you stop.

viscosity

number

0.15

Drag on the liquid, from runny (0) to thick (1).

tension

number

0.15

Surface tension. It smooths kinks out of the stream and pulls the tail back as it drains.

breakup

number

0.9

How strongly the thinning tail pinches off into droplets, from 0 (an unbroken ribbon) to 1.

edgeSoftness

number

0.5

Fade at the edge of the stream, from 0 (crisp pixel edge) to 1 (a soft, translucent rim).

sheen

number

0.45

Light catching the upper rim of the stream, from 0 to 1.

scramble

number

8

How often characters change per second at the fresh head of the stream. The tail settles.

splash

boolean

true

Click or tap to splash a crown of droplets that fly out and evaporate.

splashSize

number

1.2

Size and reach of the splash.

autoplay

boolean

false

Pour on its own along flowing curves while the pointer is away, with the odd splash. The pointer takes over the stream the moment it enters.

autoplaySpeed

number

1

Speed multiplier for autoplay.

idleDelay

number

1.5

Seconds after the pointer leaves before autoplay resumes.

intro

boolean

true

Pour one stroke across the component the first time it scrolls into view. With autoplay on, the stream flows in from the edge instead.

interactive

boolean

true

Follow the visitor's pointer. Turn it off to show only autoplay and scripted splashes.

disabled

boolean

false

Stop pouring and ignore input. Liquid already on screen drains away.

ref

{ splash, clear, replay }

—

splash(x?, y?) splashes at a point in pixels (or at the stream), clear() empties it, replay() pours the intro again.

children

ReactNode

—

Content the stream pours over.

className

string

—

Classes for the root element. It fills its parent and is at least 240px tall.

style

CSSProperties

—

Inline styles for the root element.