Wisp
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.
canvaspro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/wispProps
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | ||
| width | number | 22 | Maximum ribbon thickness in px (reached at peak pointer velocity). The ribbon tapers from here at the head down to zero at the tail. |
| length | number | 32 | Number of samples retained in the trail — longer means a lengthier comet tail that takes more frames to collapse when the pointer stops. |
| speed | number | 1 | Catch-up responsiveness of the glowing head, 0–2. Higher snaps the head to the pointer faster (a shorter, tighter ribbon); lower lets it lag into a long, languid sweep. |
| intensity | number | 1 | 0–1+ master energy: how strongly pointer velocity fattens the ribbon and how bright the head glow burns. |
| colors | [string, string] | a soft-white head over a cool cyan body | [head, body] colors. The head glows toward the first color; the ribbon body is the second and fades to transparent at the tail. Hex only. |
| global | boolean | Attach to the whole viewport instead of the nearest containing element. Off by default — Wisp is scoped to its parent (place it inside a relative container) so it never draws a trail page-wide unless you explicitly opt in. | |
| hideNativeCursor | boolean | false ("augment") | Hide the native system cursor while active. |
| paused | boolean | Freeze the ribbon in place. | |
| idle | boolean | true | Idle autoplay (scoped mode only): after 1.5s with no pointer in the container, a ghost sweeps the ribbon along a seeded Lissajous path — surging and easing so it fattens and thins — fading in at slightly reduced presence. A real pointer takes over instantly. Also runs on touch-only devices. Never under reduced motion; sleeps offscreen. |
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.