Target Cursor

A cursor follow animation with 4 corners that lock onto targets.

Default

While this page is open the cursor covers the whole viewport, and the native cursor is hidden. Hover the boxes to lock the corners onto them. It is restored when you leave the page, and nothing renders on touch devices.

Hover Below.

THIS

FEELS

QUITE

SNAPPY!

Customize

Spin Duration2s

Hover Duration0.2s

Hide Default CursorEnable Parallax

Cursor Color

Cursor Color On Target

API Reference

TargetCursor

Prop	Type	Default	Description
`targetSelector`	`string`	`".cursor-target"`	CSS selector for elements that should trigger the cursor targeting effect.
`spinDuration`	`number`	`2`	Duration in seconds for the cursor's spinning animation when not targeting.
`hideDefaultCursor`	`boolean`	`true`	Whether to hide the default browser cursor when the component is active.
`hoverDuration`	`number`	`0.2`	Duration in seconds for the transition when the cursor locks onto a target.
`parallaxOn`	`boolean`	`true`	Enables a subtle parallax effect on the corners when moving over a target.
`cursorColor`	`string`	`'#ffffff'`	Color of the cursor dot and corner brackets at rest.
`cursorColorOnTarget`	`string`	`undefined`	Optional color the cursor smoothly transitions to while locked onto a target.

Accessibility

Keyboard shortcuts and ARIA behavior.

Hiding the native cursor is optional, set hideDefaultCursor to false to keep it. The overlay ignores pointer events and is not rendered on touch devices.
Keyboard focus is not tracked, so the lock-on only reflects the pointer.

Swarm Cursor Bell Toggle