Chroma Halo

Ink colour. Thin ink shows this colour and dense ink deepens towards black, the way real ink does on paper. In smoke mode the same hue is used in lighter tones.

Ink stains light pages like real ink on paper. Smoke is its counterpart for dark pages: the same fluid, drawn as soft light smoke in the ink's hue. Auto picks one from the background behind the component and follows theme changes.

Background of the component. Leave it transparent to lay the cursor over your own page.

Brush radius in pixels, measured where the ink falls to half strength.

How hard the pointer pushes the fluid. Higher values throw the ink further ahead of the cursor.

How much ink each movement lays down. Higher values reach the deep core sooner.

Seconds for the ink to fade almost completely once the pointer moves on.

Seconds the fluid keeps moving after it is pushed.

Softens the ink, in pixels.

Overall strength of the ink.

Resolution of the fluid simulation. The ink is soft by nature, so medium is enough for almost every page.

Until the pointer arrives, and again after it leaves, an invisible cursor wanders around and paints on its own.

Speed of that invisible cursor.

Seconds after the pointer leaves before the invisible cursor takes over again.

Let the pointer and touch paint. The component listens on the window, so content laid over it still stirs the ink.

Freezes the fluid. Reduced-motion users never get the invisible cursor.

Imperative controls: drop ink at a point with an optional push (in pixels from the top-left corner), or clear the canvas.

Content rendered above the ink, such as a hero.

Classes for the root element. It fills its parent, with a 320px minimum height.