Cursors
React Cursor Effect Components
Custom cursors, trailing followers, magnetic dots, and spotlight effects for React. Each is a self-contained TypeScript file styled with Tailwind that installs by copy-paste or CLI. They disable themselves under prefers-reduced-motion and clean up their listeners on unmount.
A cursor spark trail: stardust sheds off the pointer white, falls under gravity while dimming through silver to a transparent fade, and fast strokes throw proportionally more — with the occasional heavy spark that bounces once on an invisible floor. Scoped to its container by default, idles on its own when untouched, and turns off under reduced motion.
Scripted multiplayer cursors over any content: named pointers glide on curved, slightly overshooting springs to percent or [data-cohort] targets, then click with ripples, drag selections, type comment bubbles and float emoji reactions — concurrently and on loop. Pauses politely when a real pointer enters, sleeps offscreen, and parks at first targets under reduced motion.
A WebGL fluid-simulation cursor trail: pointer strokes inject ink into a curl-noise-advected flow field (ping-pong framebuffers) that swirls, marbles, and slowly dissipates, paling as it disperses. Deep ultramarine on a transparent canvas, scoped to its container, coarse-pointer- and reduced-motion-safe; clicks stack heavier blots and it idles on its own when untouched.
Letterpress image trail: pointer travel stamps a pile of proofs that land with a settle, a seeded tilt, a registration double and an ink-spread shadow, then fade and desaturate like aging paper. Clicks stack larger proofs, a seeded ghost path keeps printing when idle, and an imperative stamp(x, y) handle; reduced motion rests on a static corner pile.
A spotlight cursor: wraps any content, dims the surface, and cuts a soft radial light that spring-follows the pointer to reveal what's beneath — ringed by a faint warm falloff and flaring brighter on press (rapid presses stack). Children stay interactive; idles on its own when untouched, and settles to a static centered spotlight under reduced motion.
A target-bracket cursor: four neutral corner brackets with bright white inner edges ride the pointer, then snap to frame any element matching a selector with an overshoot-then-bite clamp, a single white spark at each corner on contact, and a soft hairline frame while locked. Scoped or global, never follows coarse pointers; idles on its own when untouched, touring the targets.
A spring-smoothed cursor follower: a soft bead of light that stretches into a teardrop at speed, brightening to white in motion and settling neutral at rest. Scoped to its container by default, opt into page-wide with `global`, never follows coarse pointers, scales up over [data-cursor-target] elements, and idles on its own when untouched.
A ribbon-trail cursor: a smooth, tapering comet ribbon chases the pointer with eased catch-up, fattening on fast strokes and thinning to nothing at the tail beneath a soft glowing head. Collapses gracefully and pauses when the pointer stops; idles on its own when untouched. Scoped to its container by default, auto-disabled on coarse pointers, and reduced to a quiet motion-free dot under reduced motion.