Spark UI
Ink Reveal Cursor

Customize

Headline
Top Text
Bottom Left
Bottom Right
Hidden Image
Ink Amount
60
Trail Length
60
Swirl
45
Splash
60
Background
Text Color
Ink Color
Chrome Light
Chrome Dark
Font
Text Scale
100%
Auto Play

Ink Reveal Cursor

Hover
388 views•73 uses

Props

17 properties
headlinestringSPARK UI
The big word on the page, repainted in chrome inside the ink.
topLeftstringMove to spill the…
Small text at the top left; a line break splits it.
bottomLeftstringAnimated componen…
Small text at the bottom left.
bottomRightstringInk Reveal — 01
Small text at the bottom right.
revealImagestring
Optional picture shown inside the ink, behind the chrome headline.
brushSizenumber60
How much ink pours out of the pointer.
trailLengthnumber60
How long the ink lasts before it thins away.
swirlnumber45
How much the fluid curls into eddies.
splashnumber60
How hard pointer movement throws the ink.
backgroundcolor#f4f3ef
Page colour.
textColorcolor#0b0b0b
Colour of the page text.
inkColorcolor#0b0b0b
Colour of the ink.
revealFromcolor#fafafa
Light tone of the chrome headline inside the ink.
revealTocolor#6f6f74
Dark tone of the chrome headline inside the ink.
fontFamilystringvar(--font-host-g…
Typeface for the page.
textScalenumber100
Relative size of the text.
autoPlaybooleantrue
Paints a path on its own until the pointer moves.

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add ink-reveal-cursor

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

A page that hides a second one under ink: move the pointer and ink pours into a real fluid simulation, swirling, curling and spreading as it drifts, with a chrome version of the headline showing inside. Stop, and the ink slowly thins away.

KEY FEATURES

  • ·A GPU fluid solver (advection, vorticity confinement, pressure projection) moves the ink, adapted from Pavel Dobryakov's MIT-licensed WebGL Fluid Simulation
  • ·Pointer movement pushes both velocity and ink into the fluid, with extra splats along long jumps so fast strokes stay continuous
  • ·The ink density is cut at a threshold into a crisp edge, so the fluid reads as solid ink rather than smoke
  • ·Inside the ink the headline is repainted in chrome, lined up with the real type and dragged slightly by the flow
  • ·Swirl, splash, amount and trail length update live, and the simulation pauses while off screen