Ghost Cursor

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

Default

Move the pointer over the stage to leave a smoky trail. It reacts to the parent element, so it only follows the pointer inside the area it is placed in. Color, trail, bloom and fade are wired to the controls underneath.

Boo!

Customize

Color

Trail Length50

Inertia0.5

Grain Intensity0.05

Bloom Strength0.1

Bloom Radius1

Bloom Threshold0.03

Brightness2

Fade Delay (ms)1000

Fade Duration (ms)1500

API Reference

GhostCursor

Prop	Type	Default	Description
`trailLength`	`number`	`50`	Number of points stored for the cursor trail (longer = longer smear).
`inertia`	`number`	`0.5`	Velocity retention when the pointer stops. Higher values make the cursor glide longer.
`grainIntensity`	`number`	`0.05`	Strength of the film grain post-processing pass.
`bloomStrength`	`number`	`0.1`	UnrealBloom effect strength.
`bloomRadius`	`number`	`1.0`	UnrealBloom radius controlling spread of glow.
`bloomThreshold`	`number`	`0.025`	UnrealBloom threshold; lower includes more pixels in bloom.
`brightness`	`number`	`1`	Final brightness multiplier applied to the effect color.
`color`	`string`	`'#B497CF'`	Base color of the ghost cursor effect.
`mixBlendMode`	`string`	`'screen'`	CSS mix-blend-mode used when compositing with page content.
`edgeIntensity`	`number`	`0`	Darkening near edges of the canvas. 0 = none, 1 = strongest.
`maxDevicePixelRatio`	`number`	`0.5`	Upper cap for devicePixelRatio to control render cost on high-DPR displays.
`targetPixels`	`number`	`auto (~1.3e6 desktop, ~0.9e6 touch)`	Pixel budget. Resolution is dynamically scaled to keep total pixel count under this budget.
`fadeDelayMs`	`number`	`auto (1000 desktop, 500 touch)`	Idle delay before the trail starts to fade after pointer leaves/stops.
`fadeDurationMs`	`number`	`auto (1500 desktop, 1000 touch)`	Duration of the trail fade-out once the delay has elapsed.
`zIndex`	`number`	`10`	z-index applied to the canvas for layering above/below content.

Accessibility

Keyboard shortcuts and ARIA behavior.

Purely decorative and non-interactive (pointer-events: none). It does not replace the system cursor.

Fade Content Glare Hover