Liquid Ascii
Fluid simulation rendered as ASCII characters
liquid-ascii-tw
Customize
Simulation
0.9
15
-25
0.3
0.4
1.5
Cursor & Solver
0.25
66
30
3
Color
1
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 |