What it looks like
It looks like ink dropped into a glass of water, seen from above. Every mouse movement leaves a trail of color that flows in the direction of the gesture, curls into eddies and lightens until it disappears. When nobody interacts, small automatic splashes keep the surface alive at short intervals. In ink mode the colors blend over a light background like watercolor; in light mode they add glow over a dark background. Four colors set the palette, and anything you place inside sits on top of the simulation.
You may be looking for this if you asked for something like
- a background that moves like ink in water when I move the mouse
- colorful smoke that follows the cursor
- an interactive, liquid-looking background for the site opener
- that fluid effect that mixes colors behind the headline
- a hero with colors flowing and swirling like watercolor
- a background that reacts to the mouse with swirls of color
Also known as
- fluid simulation
- WebGL fluid
- Navier-Stokes simulation
- ink in water effect
- swirling ink background
- smoke cursor effect
When to use
- A premium brand or creative agency hero
- A launch opener where the first impression matters
- A designer, artist or studio portfolio
- A short section with a large headline and little text
When to avoid
- Pages that already run other WebGL effects
- Forms and long reading areas, where motion distracts
- Audiences that browse mostly on old phones
How to ask your AI
Create a WebGL2 fluid simulation background in the homepage hero: mouse movement injects ink in my brand colors, it pauses when off screen, freezes for reduced motion and falls back to an image in browsers without WebGL2.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Nanquim
Does Nanquim work on phones?
It works on phones with WebGL2, which today covers most devices. Without a cursor, Nanquim's automatic splashes keep the ink moving. Because it is rated Heavy in THM Componentes, the prompt tells your AI to load it on demand and to provide a static image for devices without WebGL2.
Will Nanquim slow down my site?
Nanquim's simulation runs on the graphics card and pauses by itself when it leaves the screen, so it costs nothing while people read other sections. Still, it is a Heavy effect: use one per page, lower the pressure iterations on weaker devices and compare LCP and INP before and after.
Does Nanquim respect reduced motion settings?
Yes. Nanquim reads the system reduced motion preference: automatic splashes stop and the simulation freezes, leaving a still image. The cursor still marks the screen with color, but without flowing, which keeps the brand look without continuous animation.
