ASCII Ripple

Text that ripples like water under the cursor

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—

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().