Agent cursorPro

The agent's pointer over a live or recorded screen, with an action label and click rings.

Markdown

On this page

ProA recorded shopping run: the cursor glides, labels each action and rings each click.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/agent-cursor

Usage

tsx

import { AgentCursor } from "@/components/ui/chatcn/pro/agent-cursor"

<div className="relative aspect-[16/10]">
  <img src={frame.src} alt="" className="size-full" />
  <AgentCursor x={0.74} y={0.68} action={{ id: step.id, kind: "click", label: "Click Add to cart" }} />
</div>

Place it inside any positioned box that holds the screen; it fills the box and ignores the pointer. Points are fractions of the screen, so it survives resizes. A new point starts a glide from wherever the cursor is, so fast agents never make it jump. Each new click, by id, plays one ring once the cursor lands.

Examples

Click to move

ProClick anywhere on the page, then again mid glide: it turns from where it is.

States

ProActive, typing, idle, and a label that flips near the edge.

Props

Prop	Type	Notes
`x`, `y`	`number`	Pointer tip, 0 to 1 from the top left
`action`	`{ id?, kind, label }`	Kinds: click, type, select, scroll, navigate, key, hover, drag, wait
`state`	`"active" \| "idle" \| "hidden"`	Idle dims the cursor and folds the label
`name`	`string`	Set before the action in the label
`idleLabel`	`string`	Label while idle
`trail`	`boolean`	Fading tail behind each glide. Default true
`speed`	`number`	Glide speed multiplier. Default 1
`announce`	`boolean`	Polite announcement per action. Default true
`onArrive`	`() => void`	Called when the cursor lands

Accessibility

The drawing is hidden from assistive tech; each new action is announced once in a polite live region, as name and label.
In forced colors the pointer and label take system colors.

Motion

Glides on a quadratic arc with a quick lift and a long settle, 280 to 720 ms by distance. Never teleports.
The label follows on a critically damped spring, so it lags a little and never overshoots.
The ring plays once per click when the cursor lands: transform and opacity, 520 ms.
Reduced motion: the cursor jumps with a 160 ms fade and the ring only fades.