Liquid Ascii

Fluid simulation rendered as ASCII characters

liquid-ascii-tw

Customize

Tweak the props live

Simulation

Speed0.9

Cell Size15

Gravity-25

FLIP Ratio0.3

Fill Height0.4

Over-Relaxation1.5

Cursor & Solver

Cursor Radius0.25

Cursor Force66

Pressure Iters30

Separation Iters3

Auto Wave

Color

Text Color

#000000

Background

#FFFFFF

Opacity1

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

Default:undefined

speednumber

Simulation timestep multiplier (0.1–3)

Default:0.9

cellSizenumber

Character cell size in pixels (6–30)

Default:15

gravitynumber

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

Default:-25

flipRationumber

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

Default:0.3

pressureItersnumber

Number of pressure solver iterations (5–80)

Default:30

separationItersnumber

Number of particle separation passes (1–10)

Default:3

overRelaxationnumber

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

Default:1.5

fillHeightnumber

Fill fraction of the tank (0–1)

Default:0.4

cursorRadiusnumber

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

Default:0.25

cursorForcenumber

Strength of cursor push force (0–200)

Default:66

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)

Default:1

autoWaveboolean

Auto-animate waves when cursor is idle

Default:true