Free React Custom Cursor Components

Custom cursors are the most polarising effect in web design, done lazily they are an irritant, done well they give a site a signature. These thirteen draw from instruments rather than blobs: a drafting arm, a plumb line, a measuring tape, registration marks, a galvanometer needle, a quill stroke. All of them keep the native cursor functional, deactivate on touch devices, and disable under prefers-reduced-motion, so the flourish never costs anyone the ability to click.

13 components · MIT licensed · installable with the shadcn CLI

Drafting Arm

A drafting-machine arm bolted to the viewport corner reaches the pointer, two hairline links solved by real IK, joint discs, and spring lag. React page companion on Tailwind tokens.

Echo Rings

Every click drops a stone in the page, concentric hairline rings ripple out from the point and dissolve, with a soft accent pulse at the center. Sonar for the UI.

Glyph Wake

The pointer leaves a wake of mono glyphs, characters condense along the path, hold for a breath, and evaporate. Typography as vapor trail.

Goo Cursor Trail

A chain of accent blobs chases the cursor through an SVG goo filter, merging, stretching, splitting like liquid ink. Touch devices get an autonomous lava-lamp drift.

Ink Comet

The cursor tows a comet of ink, a canvas particle tail that thickens with speed, sheds droplets on hard turns, and dries to nothing when you stop.

Measure Tape

Hold and drag to pull a live measuring tape, a ticked hairline from drag origin to pointer with a mono px readout and angle that evaporates on release. A drafting instrument as play.

Orbit Satellites

Two or three tiny satellites orbit the pointer on offset periods, trailing slightly on fast moves and tightening formation over links and buttons, affordance as gravity.

Plumb Line

A surveyor's plumb bob hangs from the pointer on a hairline string, true damped pendulum physics, a live degree readout, and a PLUMB reward for holding still. React + Tailwind tokens.

Pointer Galvanometer

A docked galvanometer meters the pointer, a ballistic needle kicks across a graduated arc with cursor speed, a primary peak-hold tick decays behind it. React + Tailwind tokens.

Quill Stroke

The pointer becomes a broad-nib quill, one continuous ink ribbon whose width swells and thins with speed and stroke direction, drying from the tail. Calligraphy physics, not confetti.

Registration Marks

A printer's registration mark rides the pointer, its ink plates drift out of register with velocity and snap back into one crisp mark at rest. React cursor toy on Tailwind tokens.

Ripple Grid

The page hides a dot lattice that only motion reveals, dots surface near the pointer while movement pumps rings of brightness rippling outward through the grid before it sleeps again.

Survey Crosshair

Full-viewport drafting crosshair, hairline axes track the pointer with mono coordinate readouts in the margins, and hovering targets snaps brackets around them.