Camera, speed and the pointer

The same take, filmed three ways. None of these edits runs the browser again.

The automatic camera#

camera: auto is the default director. It opens on the whole window, zooms in on each action (a run of nearby actions shares one shot), shows the whole page for scrolls and held keys, and ends on the window. The captured page has twice the pixels of its CSS size, so a close-up stays sharp.

camera: static keeps the whole window in view: right for README GIFs and for overlays in an editor.

Explicit shots#

Shots start at markers and override the director. A step can carry its own shot too, for as long as it runs:

title: Create a project, directed
browser:
  url: http://localhost:5173
  viewport: 1280x800
camera:
  mode: auto
  shots:
    - { at: name.start, shot: close, focus: action }
    - { at: create.end, shot: window, move: whip, dur: 1.5 }
speed:
  ramps:
    - { during: saved, rate: 4 }    # the slow save, four times as fast
script:
  - goto: /
  - click: New project
  - type: Launch plan
    into: { label: Name }
    id: name
  - click: Create
    id: create
  - wait: { text: "Project created: Launch plan" }
    id: saved
    pause: 1

• Shot sizes are wide, window, medium, close and detail; focus is the action, the pointer, the page, the window, or { step: create }.
• Moves between shots are cut, smooth, fast and whip.
• camera: follow follows the action; push-in, pull-out and drift move slowly on the window; handheld adds a little shake.

Speed#

• speed: auto compresses what a viewer only waits through (page loads, waits, a target that is not ready) when it lasts over 3 s, with a "⏩ 4×" badge.
• ramps speed up or slow down any marker range, with an eased change of rate. Ramps that touch step from one rate to the next without dropping back to 1×: typing a long program at 2×, 4×, 8×, with the badge counting up. A ramp or step speed inside another plays at its own rate, and pauses and cards inside a ramp still play.
• speed: 1.5 plays the whole clip faster; video.duration: 12 with video.fit: speed finds the rate that makes it 12 s long.

While a clip runs fast, the pointer and the keys stay believable: key sounds thin out above 3×, and the camera does not move.

The pointer#

The pointer is drawn over the page along the path the real pointer took, so it stays crisp at any zoom:

cursor:
  style: windows        # macos, windows, generic or none
  size: 1.5             # 1 is the size of a real pointer on the page
  press: true           # shrinks while the button is down, springs back
  hide: 3               # fade out after resting 3 s; false keeps it on screen
  clickRipple: true

Hover states and tooltips are in the frames, because the real pointer moved there.

Next#

Captions, cards and sound.

Source: docs-src/pages/tutorial/03-camera.md · browser-clip 0.1.0