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, auto-disabled on coarse pointers and 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.
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. Children stay interactive; settles to a static centered spotlight on touch pointers and 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, auto-disabled on coarse pointers.
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`, auto-disabled on coarse pointers, and scales up over [data-cursor-target] elements.
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. Scoped to its container by default, auto-disabled on coarse pointers, and reduced to a quiet motion-free dot under reduced motion.