Ghost Cursor
A little ghost haunts your section: it follows lazily, gets scared on click, hides when you stop.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Spring-follow physics with a trailing offset, eyes that track the pointer, a scared state that flips the spring so it flees, and a hiding state when you stand still for a few seconds.
Installation
$ npx shadcn@latest add https://guetix.com/r/ghost-cursor.json
Uses the shadcn CLI. It creates components/guetix/ghost-cursor.tsx and installs nothing else.
Usage
example.tsx
import { GhostCursor } from "@/components/guetix/ghost-cursor";
export default function Example() {
return <GhostCursor />;
}
Halloween404 pagesPlayful hero sections
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content it haunts. |
| color | string | — | Ghost color. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Decorative ghost is aria-hidden; mood changes are announced politely.