npx zenora-ui-registry@latest add ink-reveal-cursor
Ink Reveal Cursor
Hover 388 views•73 uses
Get this component
Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.
npx zenora-ui-registry@latest add ink-reveal-cursorWrites to components/zenora-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.
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
Props
17 propertiesheadlinestringZenora UItopLeftstringSweep across to p…bottomLeftstringModern interface …bottomRightstringLiquid Reveal — 02revealImagestringbrushSizenumber60trailLengthnumber60swirlnumber45splashnumber60backgroundcolor#f4f3eftextColorcolor#0b0b0binkColorcolor#0b0b0brevealFromcolor#fafafarevealTocolor#6f6f74fontFamilystringvar(--font-host-g…textScalenumber100autoPlaybooleantrue