Cursor click

A cursor glides in along a gentle curve and clicks the spot — a press and a ripple — then a tooltip pops beside it. For walkthroughs over screen recordings.

annotate/cursor
Annotate
callout
Overlay with alpha
3 s (1.5–12 s)

Cursor click at 16:9 — Playing live with volito/browser, the engine a render uses. Each tab lays the item out again for that shape, not a crop. The graphic is transparent; the grey stands in for your footage.

Render it

npx volito render annotate/cursor --prop label="Click Export" --out cursor.mov

That writes ProRes 4444 with alpha, ready to drop over footage. The same item in another shape, brand or format:

volito render annotate/cursor --aspect 9:16 --style cobalt --out cursor-9x16.mov
volito render annotate/cursor --format mp4 --out cursor.mp4
volito still annotate/cursor --t 1.5 --out cursor.png
volito info annotate/cursor     # every prop and part
volito add annotate/cursor      # copy its source into ./motion to edit

From Node:

import { findItem, renderVideo } from "volito";

await renderVideo(findItem("annotate/cursor"), { props: { label: "Click Export" }, out: "cursor.mov" });

Or ask an agent with the MCP server connected: “Render the Volito cursor click (annotate/cursor) in 9:16, in our brand.”

Props

Set each with --prop name=value, or all at once with --props and a JSON object.

Prop	Type	Default	Takes
`x` Click across (%)	number	58	0 – 100
`y` Click down (%)	number	46	0 – 100
`fromX` Start across (%)	number	86	0 – 100
`fromY` Start down (%)	number	86	0 – 100
`label` Tooltip	text	Click Export	≤ 28 chars
`size`	choice	normal	normal \| large
`color` Colour empty: the brand's colour	color	—	—

Parts

Each part takes any move, ease or idle: --motion cursor.in=pop.

Part	What it is
`cursor`	the cursor and ripple
`label`	the tooltip

Tags: cursor, click, pointer, walkthrough, tutorial

Cursor click

Render it

Props

Parts

More in Annotate

Arrow

Circle it

Spotlight

Focus lock

Highlight

Stamp