Cursor

The @lqv/cursor package lets you record your cursor moving around on the screen. The easiest way to get started is to clone the demo:

The package has the following entrypoints:

npm install @lqv/cursor

yarn add @lqv/cursor

pnpm add @lqv/cursor

`@lqv/cursor`

Move an image along a recorder cursor path.

Takes a single object with the following keys:

align?: string | [number, number]
Alignment of image. Given by a pair [x, y] with 0 <= x, y <= 1, corresponding to the point (100x%, 100y%) of the way along the image. Also accepts aliases "center" for [0.5, 0.5], "top right" for [0, 1], etc.
data: ReplayData<[number, number]>
Cursor data to replay.
end?: number = start + length(data)
When the cursor should disappear.
playback: Playback
Playback to sync with.
start?: number = 0
When the cursor should first appear.
target: HTMLElement
Element to sync with.
info
The cursor's position is stored as a left/top percentage relative to target.offsetParent. Therefore, to display correctly, the aspect ratio of target.offsetParent must remain constant (between recording and replaying), and target.offsetParent must have a nonzero height and width.

Returns an unsubscription function.

Move an image along a recorder cursor path. React version of cursorReplay().

align?: string | [number, number]
Alignment of image. Given by a pair [x, y] with 0 <= x, y <= 1, corresponding to the point (100x%, 100y%) of the way along the image. Also accepts aliases "center" for [0.5, 0.5], "top right" for [0, 1], etc.
data: ReplayData<[number, number]>
Cursor data to replay.
end: number
When the cursor should disappear. Optional, defaults to start + length(data).
src: string
Src of cursor image.
start: number
When the cursor should first appear. Optional, defaults to 0.

Cursor recording plugin. Pass to <RecordingControl>.