Liquid Ascii

Fluid simulation rendered as ASCII characters

liquid-ascii-tw

Customize

Speed

0.90

Cell Size

Gravity

-25

FLIP Ratio

0.30

Fill Height

0.40

Over-Relaxation

1.50

Cursor Radius

0.25

Cursor Force

Pressure Iters

Separation Iters

Auto Wave

Text Color

Background

Opacity

1.00

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width
`height`	string \| number	`"100%"`	Container height
`className`	string	`""`	Additional CSS classes for styling
`children`	ReactNode	`undefined`	Content rendered above the effect
`speed`	number	`0.9`	Simulation timestep multiplier (0.1–3)
`cellSize`	number	`15`	Character cell size in pixels (6–30)
`gravity`	number	`-25`	Gravity strength (negative = downward, 0 = zero-g) (-50–0)
`flipRatio`	number	`0.3`	FLIP vs PIC blending ratio (0=PIC, 1=FLIP)
`pressureIters`	number	`30`	Number of pressure solver iterations (5–80)
`separationIters`	number	`3`	Number of particle separation passes (1–10)
`overRelaxation`	number	`1.5`	Over-relaxation factor for pressure solve (1–2)
`fillHeight`	number	`0.4`	Fill fraction of the tank (0–1)
`cursorRadius`	number	`0.25`	Radius of mouse influence as fraction of short side (0–0.5)
`cursorForce`	number	`66`	Strength of cursor push force (0–200)
`characters`	string	`" ·:-~=+*#%@"`	Characters ordered by visual weight (light to heavy)
`color`	string	`"#ffffff"`	Text color (hex)
`backgroundColor`	string	`"#000000"`	Background color (hex)
`fontFamily`	string	`"monospace"`	Font family for rendering
`opacity`	number	`1`	Master opacity (0–1)
`autoWave`	boolean	`true`	Auto-animate waves when cursor is idle

widthstring | number

Container width

Default"100%"

heightstring | number

Container height

Default"100%"

classNamestring

Additional CSS classes for styling

Default""

childrenReactNode

Content rendered above the effect

Defaultundefined

speednumber

Simulation timestep multiplier (0.1–3)

Default0.9

cellSizenumber

Character cell size in pixels (6–30)

Default15

gravitynumber

Gravity strength (negative = downward, 0 = zero-g) (-50–0)

Default-25

flipRationumber

FLIP vs PIC blending ratio (0=PIC, 1=FLIP)

Default0.3

pressureItersnumber

Number of pressure solver iterations (5–80)

Default30

separationItersnumber

Number of particle separation passes (1–10)

Default3

overRelaxationnumber

Over-relaxation factor for pressure solve (1–2)

Default1.5

fillHeightnumber

Fill fraction of the tank (0–1)

Default0.4

cursorRadiusnumber

Radius of mouse influence as fraction of short side (0–0.5)

Default0.25

cursorForcenumber

Strength of cursor push force (0–200)

Default66

charactersstring

Characters ordered by visual weight (light to heavy)

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

colorstring

Text color (hex)

Default"#ffffff"

backgroundColorstring

Background color (hex)

Default"#000000"

fontFamilystring

Font family for rendering

Default"monospace"

opacitynumber

Master opacity (0–1)

Default1

autoWaveboolean

Auto-animate waves when cursor is idle

Defaulttrue