Following Pointer

Swaps the cursor for an arrow and a name tag that trail the pointer inside a region.

1.7 KB gzipped
Deps: motion/react
Reduced-motion safe
Base UI & Radix compatible

Q3 launch board

Move your mouse around the canvas to see a teammate's cursor.

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/following-pointer.json

Adds components/velora/following-pointer.tsx, installs motion.

Examples

Blog grid

A grid of post cards where hovering shows a "Read post" tag.

Shipping motion that respects reduced-motion users

Sep 18, 2026 · 6 min read

Why our components weigh less than 3 KB

Sep 4, 2026 · 4 min read

Theming a whole library with seven CSS variables

Aug 21, 2026 · 8 min read

Props

Prop	Type	Default
`label` Content of the name tag next to the arrow; leave empty for an arrow only	`React.ReactNode`	`—`
`color` Any CSS colour for the arrow and tag	`string`	`"var(--brand)"`
`children*`	`React.ReactNode`	`—`

Also accepts every <div> attribute, forwarded to the root element.

Accessibility

Reduced motion: The arrow and tag track the pointer 1:1 with no spring, and appear and hide without a scale or fade.
Keyboard: Decorative — nothing to operate.
Screen readers: The arrow and tag are aria-hidden; the wrapped content is read and focused as normal.