ASCII Ripple

A page of monospace text that behaves like a liquid surface: pointer drops and drags send simulated waves through the grid, bending the words and blooming into heavier glyphs

ascii-ripple-tw

Customize

Glyphs

Interactive

Text

Crest

Trough

Font Size

16px

Line Height

1.20

Text Opacity

0.15

Resolution

Speed

0.55

Damping

0.045

Viscosity

0.40

Drop Strength

1.2

Drop Radius

26px

Drag Strength

0.30

Drag Radius

16px

Rain

0.0/s

Rain Strength

0.6

Sensitivity

2.2

Slope Gain

1.0

Refraction

4.0

Scramble

1.00

Scramble Speed

90ms

Dither

0.50

Vignette

0.60

Props

Name	Type	Default	Description
`text`	string	`built-in passage`	Passage used to fill the grid. Words wrap row by row and repeat as needed.
`chars`	string	`"·.,:;-~=+*%#@"`	Glyph palette from lightest to heaviest, picked by ripple intensity.
`fontSize`	number	`16`	Font size in pixels.
`lineHeight`	number	`1.2`	Line height as a multiplier of fontSize.
`fontFamily`	string	`ui-monospace stack`	Monospace font stack.
`fontWeight`	number \| string	`400`	Font weight.
`textColor`	string	`"#f5f5f4"`	Colour of the resting text.
`rippleColor`	string	`"#ffffff"`	Colour glyphs tint toward on wave crests.
`troughColor`	string	`"#ad57ff"`	Colour glyphs tint toward in wave troughs.
`backgroundColor`	string	`"transparent"`	Canvas background. Transparent inherits the page.
`textOpacity`	number	`0.15`	Opacity of the resting text, 0 to 1.
`resolution`	number	`3`	Simulation cells per text row, 1 to 4. Higher is smoother and costlier.
`speed`	number	`0.55`	Wave propagation speed, 0 to 1.
`damping`	number	`0.045`	Fraction of surface velocity lost per step, 0 to 0.5. Lower rings longer.
`viscosity`	number	`0.4`	Surface viscosity, 0 to 1. Smooths sharp wavelets into softer swells.
`edges`	"reflect" \| "absorb"	`"absorb"`	Whether waves bounce off the edges or fade out at them.
`dropStrength`	number	`1.2`	Impulse of a click or tap.
`dropRadius`	number	`26`	Radius of a click or tap in pixels.
`dragStrength`	number	`0.3`	Impulse deposited by a moving pointer. 0 disables the trail.
`dragRadius`	number	`16`	Radius of the pointer trail in pixels.
`rain`	number	`0`	Random drops per second while the pointer is away.
`rainStrength`	number	`0.6`	Impulse of each rain drop.
`sensitivity`	number	`2.2`	How strongly surface height maps to glyph intensity.
`slopeGain`	number	`1`	How strongly surface slope adds to glyph intensity.
`refraction`	number	`4`	How far the underlying text is displaced by the slope, in cells.
`scramble`	number	`1`	How readily disturbed cells swap to palette glyphs, 0 to 1.
`scrambleSpeed`	number	`90`	Milliseconds between glyph reshuffles inside a ripple.
`dither`	number	`0.5`	Edge texture of the disturbed region, 0 hard to 1 grainy.
`vignette`	number	`0.6`	Width of the edge fade as a fraction of the shorter half-side, 0 to 1.
`interactive`	boolean	`true`	Whether the pointer disturbs the surface.
`ref`	AsciiRippleHandle	`—`	Imperative handle exposing drop(x, y, strength?, radius?) and calm().

textstring

Passage used to fill the grid. Words wrap row by row and repeat as needed.

Defaultbuilt-in passage

charsstring

Glyph palette from lightest to heaviest, picked by ripple intensity.

Default"·.,:;-~=+*%#@"

fontSizenumber

Font size in pixels.

Default16

lineHeightnumber

Line height as a multiplier of fontSize.

Default1.2

fontFamilystring

Monospace font stack.

Defaultui-monospace stack

fontWeightnumber | string

Font weight.

Default400

textColorstring

Colour of the resting text.

Default"#f5f5f4"

rippleColorstring

Colour glyphs tint toward on wave crests.

Default"#ffffff"

troughColorstring

Colour glyphs tint toward in wave troughs.

Default"#ad57ff"

backgroundColorstring

Canvas background. Transparent inherits the page.

Default"transparent"

textOpacitynumber

Opacity of the resting text, 0 to 1.

Default0.15

resolutionnumber

Simulation cells per text row, 1 to 4. Higher is smoother and costlier.

Default3

speednumber

Wave propagation speed, 0 to 1.

Default0.55

dampingnumber

Fraction of surface velocity lost per step, 0 to 0.5. Lower rings longer.

Default0.045

viscositynumber

Surface viscosity, 0 to 1. Smooths sharp wavelets into softer swells.

Default0.4

edges"reflect" | "absorb"

Whether waves bounce off the edges or fade out at them.

Default"absorb"

dropStrengthnumber

Impulse of a click or tap.

Default1.2

dropRadiusnumber

Radius of a click or tap in pixels.

Default26

dragStrengthnumber

Impulse deposited by a moving pointer. 0 disables the trail.

Default0.3

dragRadiusnumber

Radius of the pointer trail in pixels.

Default16

rainnumber

Random drops per second while the pointer is away.

Default0

rainStrengthnumber

Impulse of each rain drop.

Default0.6

sensitivitynumber

How strongly surface height maps to glyph intensity.

Default2.2

slopeGainnumber

How strongly surface slope adds to glyph intensity.

Default1

refractionnumber

How far the underlying text is displaced by the slope, in cells.

Default4

scramblenumber

How readily disturbed cells swap to palette glyphs, 0 to 1.

Default1

scrambleSpeednumber

Milliseconds between glyph reshuffles inside a ripple.

Default90

dithernumber

Edge texture of the disturbed region, 0 hard to 1 grainy.

Default0.5

vignettenumber

Width of the edge fade as a fraction of the shorter half-side, 0 to 1.

Default0.6

interactiveboolean

Whether the pointer disturbs the surface.

Defaulttrue

refAsciiRippleHandle

Imperative handle exposing drop(x, y, strength?, radius?) and calm().

Default—