Fluid Ink Cursor React component
A background where the pointer paints with ink: drops pool along your path, merge into one another, blend between colours like marbled paper, bleed into the paper's grain at the edges, and slowly spread and fade away.
About the Fluid Ink Cursor component
Fluid Ink Cursor turns the pointer into a brush loaded with ink. Moving across it leaves a stroke of drops that pool and run into each other, blend from one colour into the next like marbled paper, soak into the paper's grain at the edges, and then slowly spread out and fade.
Slow movements leave fat, rich strokes and quick ones leave thin trails. It's a single WebGL shader and only runs while there's ink on the page.
When to use it
Use it behind a hero for art and print studios, stationery and paper brands, calligraphy, tattoo or creative-agency sites, or a playful 404 page.
It's a canvas for play: keep the content on top short and centred so the ink has room around it.
Installation
Add the Fluid Ink Cursor component to your project with the shadcn CLI. It lands in components/fluid-ink-cursor.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/fluid-ink-cursorOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<FluidInkCursor /> accepts 4 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| colors Ink colours; neighbouring drops blend between them like marbled paper. | [string, string, string, string] | ["#1d3fbb", "#0a7f86", "#c2185b", "#1a1a2e"] |
| paper The paper the ink lands on. | string | "#f3efe6" |
| size Drop size in px. | number | 22 |
| life Seconds before a drop has spread out and faded. | number | 2.6 |
- colors
Ink colours; neighbouring drops blend between them like marbled paper.
[string, string, string, string]Default: ["#1d3fbb", "#0a7f86", "#c2185b", "#1a1a2e"] - paper
The paper the ink lands on.
stringDefault: "#f3efe6" - size
Drop size in px.
numberDefault: 22 - life
Seconds before a drop has spread out and faded.
numberDefault: 2.6
npm dependencies
Installed for you by the shadcn CLI.
Fluid Ink Cursor FAQ
- Can I change the ink colours?
- colors takes four colours that neighbouring drops blend between; paper sets the background. One colour four times gives a single-ink look, like sumi.
- How long does the ink stay?
- life is the number of seconds before a drop has spread out and faded (2.6 by default).
- Does it work on phones?
- Yes, it draws under a finger as well. With reduced motion turned on, or without WebGL, it shows the plain paper.
- Can I put content on top?
- Yes. Children render above the ink; give the component a height and lay your content out inside.
