Fluid Cursor
A spring-lagged blend-mode cursor that trails the pointer and swells over interactive elements.
Move your pointer inside the card
Or me
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/fluid-cursor.json"A leading dot springs after the pointer with a softer smear trailing behind, both
inverting whatever is underneath via mix-blend-mode: difference. It swells over
links, buttons, and anything marked data-cursor. The cursor disables itself on
touch devices and under prefers-reduced-motion, so it never strands users
without a pointer.
Usage
tsx
import { FluidCursor } from "@/components/godui/fluid-cursor";Global — drop it once near the root for a page-wide cursor. Hide the system
cursor with cursor: none where you want it to take over:
tsx
<FluidCursor />Scoped — pass a containerRef (the element must be positioned) to confine it
to one region, e.g. a hero or a card:
tsx
const ref = useRef(null);
<div ref={ref} className="relative cursor-none overflow-hidden">
{/* content */}
<FluidCursor containerRef={ref} />
</div>;Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 18 | Diameter of the leading dot in pixels. |
color | string | "white" | Dot color; white inverts cleanly under blend. |
blend | boolean | true | Invert the backdrop with mix-blend-mode: difference. |
trail | boolean | true | Render the soft lagging smear. |
containerRef | RefObject<HTMLElement | null> | — | Scope the cursor to a positioned element. |
interactiveSelector | string | links, buttons, [data-cursor] | Elements that enlarge the cursor on hover. |