A faint ghost that trails the pointer on a spring, leans into its motion, looks where it is going and leaves a fading afterimage.
Chapter 3 · 12 min read
The house on Alder Lane
Nobody had lived there since the winter of 1988, yet the porch light came on every night at nine.
npx shadcn@latest add https://hyperblur.dev/r/cursor-ghost.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cursor-ghost.tsx.
import { CursorGhost } from "@/components/hyperblur/cursor-ghost"
<CursorGhost className="h-80"><h2>The house on Alder Lane</h2></CursorGhost>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#e8ecff" | Ghost body and glow color. |
| size | number | 56 | Ghost height in pixels. |
| opacity | number | 0.62 | Opacity of the ghost body. Afterimages are fainter. |
| stiffness | number | 60 | Spring stiffness. Higher values follow the pointer more tightly. |
| damping | number | 9 | Spring damping. Lower values overshoot and wobble more. |
| trail | number | 6 | Number of afterimages kept behind the ghost, from 0 to 16. |
| idle | boolean | true | Play a slow scripted path while the pointer is away. The effect hands over to the real pointer when it enters and eases back when it leaves. |
| children | ReactNode | Content rendered inside the stage. The stage fills its parent, so give the parent a height. |