About Liquid Ascii

Liquid Ascii is a free, open-source React component that renders a real-time FLIP fluid simulation as ASCII text on a canvas. It offers a unique visual experience where fluid dynamics are represented by characters, creating an engaging and dynamic display. The component is designed with zero dependencies and is MIT licensed, allowing for unrestricted use and modification.

Key Features:

• Real-time FLIP Fluid Simulation: Experience a dynamic fluid simulation rendered entirely as ASCII characters.

• Zero Dependencies: Easily integrate into your projects without worrying about additional library conflicts.

• MIT Licensed: Free for commercial and personal use, with the freedom to copy, modify, and distribute.

• Interactive Playground: Live playground available to experiment with different settings and see the results instantly.

• Customizable Props: Control various aspects of the simulation, including speed, cell size, gravity, fill height, cursor interaction, and auto-wave effects.

• Font Flexibility: Supports any CSS font face, allowing you to customize the glyphs used in the simulation.

• Responsive Design: Adapts to light and dark modes automatically and respects prefers-reduced-motion settings.

Installation

Install Liquid Ascii easily into your Next.js or React project using the following command:

npx shadcn@latest add https://tirup.in/components/r/liquid-ascii.json

Then, render the component within any sized container in your application.

Technical Details

The simulation involves up to 20,000 particles on a staggered MAC grid. Each frame calculates gravity, splats velocities to grid faces, solves for pressure over 30 iterations to maintain volume, and blends the results back to particles using a PIC/FLIP method. Density is binned per cell and rendered using glyphs, with character density varying based on surface, spray, and depth.