Screen recordingPro

A stage for product demos: a scripted cursor that moves, clicks and types over the real UI, with click rings, key press overlays and play, pause and loop.

Markdown

On this page

ProA scripted system cursor clicks the composer, types, presses Enter and opens the tool call, over a live chat.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/screen-recording

Usage

tsx

import { ScreenRecording } from "@/components/ui/chatcn/pro/screen-recording"
import { recording } from "@/lib/chatcn-pro-recording"

const demo = recording()
  .moveTo("[data-slot=prompt-input-textarea]")
  .click()
  .type("Why did checkout slow down?")
  .press("Enter")
  .wait(2000)
  .build()

<ScreenRecording script={demo} onReset={resetChat}>
  <BrowserFrame>{chat}</BrowserFrame>
</ScreenRecording>

Clicks and typing reach the real components: the click lands on the element under the cursor, typing goes through the native value setter so controlled inputs update, and key presses are real keydown events.

Examples

Shortcuts

ProCmd K in the keystroke overlay opens the command list, and the cursor picks a command.

Timeline

Step	Does
`moveTo(target, { duration? })`	Glides the cursor. Target is a selector, `{ x, y }` in stage fractions, or a resolver
`click(target?)`	Optional move, then a ring and a real click
`type(text, { perChar?, target? })`	Types into the focused field, 45 ms per character by default
`press(...keys)`	Shows the keys and sends a keydown, for example `press("Meta", "K")`
`wait(ms)`	Holds
`call(fn)`	Runs your code, for example to start a scripted stream

Props

Prop	Type	Notes
`script`	`RecordingScript`	From `recording().build()`
`playing`, `autoPlay`, `onPlayingChange`		Controlled, or autoplay once on screen
`loop`, `loopDelay`	`boolean`, `number`	Default true, 1600 ms
`onReset`	`() => void`	Put your UI back before each run
`cursorStart`	`{ x, y }`	Stage fractions
`controls`	`boolean`	Play, pause and progress. Default true
`interactive`	`boolean`	Click and type into the UI. Default true
`label`	`string`	Names the demo in control labels

Keyboard

Key	Action
`Enter`, `Space` on the control	Play, pause or replay

Accessibility

Any demo that loops longer than 5 s has a pause control (WCAG 2.2.2). It stays visible on touch and while paused.
A real click inside the stage pauses the script and hands the UI to the visitor.
Cursor, rings and key overlay are aria-hidden; progress is a labeled progressbar.
The script pauses while the stage is off screen.

Motion

The cursor glides with an in-out curve over 350 to 900 ms by distance, since it moves across the screen. Clicks press it to 0.9 and send out a 420 ms ring.
Key overlays rise in over 180 ms.
Under reduced motion the cursor jumps between keyframes and holds each for 400 ms, rings fade without growing, and text appears at once.