Pointer Highlight

Draws an outline around a phrase on scroll, then glides a pointer icon to its corner.

Every component ships with reduced motion built in.

Installation

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

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

A hero headline with one highlighted phrase, a subtitle and two buttons.

New · Review mode for design teams

Pin comments to any element, resolve them in context, and ship without the screenshot ping-pong.

Prop	Type	Default
`children*` The phrase to frame	`React.ReactNode`	`—`
`rectangleClassName` Classes for the drawn outline (border colour, width, radius, fill)	`string`	`—`
`pointerClassName` Classes for the pointer icon (colour, size)	`string`	`—`
`once` Play only the first time the phrase enters the viewport	`boolean`	`true`

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

Reduced motion: The outline and pointer are shown in their final place as soon as the phrase is on screen, with no drawing or glide.
Keyboard: Decorative — nothing to operate.
Screen readers: The text is read normally; the outline and pointer icon are aria-hidden.