shadcn index

GhostCursor

PreviousNext

Semi-transparent ghost cursor that smoothly follows the real cursor with a trailing effect.

Docs
react-bitscomponent

Preview

Loading preview…
GhostCursor/GhostCursor.css
.ghost-cursor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ghost-cursor > canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

Installation

npx shadcn@latest add @react-bits/GhostCursor-TS-CSS

Usage

import { GhostCursorTSCSS } from "@/components/GhostCursor-TS-CSS"
<GhostCursorTSCSS />