# Nanquim

Colorful ink that flows and swirls behind your content, pushed by every mouse movement.

> Nanquim is an exclusive THM Componentes component that runs a real fluid simulation on the graphics card: mouse movement injects colored ink that swirls into eddies and slowly fades. Built with WebGL2 and no dependencies, it suits brand heroes, launch openers and portfolios that need a strong first impression.

- Category: Backgrounds and atmospheres
- Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code
- Load weight: Heavy: WebGL or simulation; one per page, loaded on demand
- Technology: Vue 3, TypeScript, WebGL
- Interaction: Mouse
- URL: https://vibecode.thmtecnologia.com/en/components/nanquim/

## 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

```text
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.

## Related components

- [Orvalho](https://vibecode.thmtecnologia.com/en/components/orvalho/): Glossy indigo drops that join and split like liquid, with one of them following the cursor.
- [Lusco-fusco](https://vibecode.thmtecnologia.com/en/components/lusco-fusco/): Patches of indigo, cyan and lavender that blend and drift slowly, with a light film grain on top.
- [Onça](https://vibecode.thmtecnologia.com/en/components/onca/): Indigo spots and branches grow on their own like coral or animal skin, and the cursor plants new seeds.
- [Aquarela](https://vibecode.thmtecnologia.com/en/components/aquarela/): A trail of bright, colorful ink that flows and fades behind the mouse, drawn over the whole page.
- [Garoa](https://vibecode.thmtecnologia.com/en/components/garoa/): The photo sits under a sheet of water that ripples with the mouse, with clicks and with raindrops.

---
THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).