Pointerstable

TrailingCursor

A dot pinned to the pointer and a ring that lags, grows and recolours.

Customize

Looklayers and colours

Preset palettepreset

Variantvariant

Override dot colourdotColor

Override ring fillringColor

Override ring borderringBorderColor

Blend modemixBlendMode

Size and motionring states and easing

Dot size6 pxdotSize

Ring size34 pxringSize

Ring on hover52 pxringHoverSize

Ring when pressed26 pxringPressSize

Ease0.160ease

Hide the native cursorhideNativeCursor

TSX

import { TrailingCursor } from "zerogravity"

<TrailingCursor />

Generated from the controls above. Only props that differ from their defaults are shown.

12 documented props on TrailingCursor
Property	Type	Default	Description
`preset`	`"amber" \| "cyan" \| "violet" \| "emerald" \| "rose" \| "mono"`	`"amber"`	Preset palette.
`variant`	`"dot-ring" \| "ring-only" \| "dot-only"`	`"dot-ring"`	Variant.
`dotColor`	`string \| null`	`null`	Override dot colour.
`ringColor`	`string \| null`	`null`	Override ring fill.
`ringBorderColor`	`string \| null`	`null`	Override ring border.
`mixBlendMode`	`"normal" \| "difference" \| "exclusion" \| "screen"`	`"normal"`	Blend mode.
`dotSize`	`number`	`6`	Dot size. Range 2 to 24 px.
`ringSize`	`number`	`34`	Ring size. Range 10 to 120 px.
`ringHoverSize`	`number`	`52`	Ring on hover. Range 10 to 160 px.
`ringPressSize`	`number`	`26`	Ring when pressed. Range 6 to 120 px.
`ease`	`number`	`0.16`	Ease. Range 0.02 to 1.
`hideNativeCursor`	`boolean`	`true`	Hide the native cursor.

0 external runtime dependencies

Ships with nothing but React.