Examples

# Text over the video: a title card, captions and key badges, drawn the way terminal-clip draws
# them. Captions and cards are compose-only steps: adding or editing them never captures again.
title: Save a project, with captions
browser:
  url: http://localhost:5173        # base for relative goto paths
  viewport: 1280x800
camera: auto
speed: auto                         # a sped-up wait shows a "⏩ 3×" badge
typing: { showKeys: true }          # a badge for each pressed or held key
video:
  captions: { position: bottom, size: 44 }   # terminal-clip's caption style and defaults
script:
  - card: { title: "Acme [bold #8ab4ff]Projects[/]", subtitle: Save a project in ten seconds }
    dur: 2                          # the first step: the video opens on the card
  - goto: /form.html
    caption: The new project form      # a modifier: shown while this step runs
  - caption: Name it                # a step: shown from here until the next caption
  - type: Launch plan
    into: { label: Name }
  - caption: Then save it with Enter
  - press: Enter                    # a "⏎ Enter" badge
    id: save
  - wait: { text: "Saved: Launch plan" }
  - caption: ""                     # ends the caption on screen
  - pause: 1

# Fill a form, open a dialog and save: the milestone 1 actions against a local page.
title: Save a project
browser:
  url: http://localhost:5173        # base for relative goto paths
  viewport: 1280x800                # CSS pixels
  scale: 2                          # device pixel ratio at capture: zoom headroom
camera: auto
speed: { auto: true }               # compress page loads and waits
script:
  - goto: /form.html
  - click: { role: textbox, name: Name }
    id: name
  - type: Launch plan
  - click: Open dialog
    caption: A quick check first
  - wait: { text: Dialog is open }
  - pause: 0.8                      # a freeze in compose, not a wait in capture
  - click: { css: "#dialog-close" }
  - type: { into: { label: Email }, text: dev@example.com }
  - press: Enter
    id: save
  - wait: { text: "Saved: Launch plan" }
    pause: 1.2

# Play a browser game: hold keys, drag and click inside a canvas, and wait on the game's own state.
# Point browser.url at the game's local dev server.
title: Fly the plane
browser:
  url: http://localhost:5173
  viewport: 1280x800
  scale: 2
camera: auto                        # held keys keep the whole page in view
script:
  - goto: /game.html
  - wait: { js: "window.game && game.ready" }   # a JavaScript expression, true when ready
  - hold: ArrowLeft                 # the key stays down for `for` seconds, auto-repeating
    for: 1.5
  - hold: [Shift, w]                # held together: down in order, up in reverse order
    for: 2
    repeat: false                   # one key-down per key, no auto-repeat
  - drag: { css: canvas }           # press, move with the button down, release
    from: [0.5, 0.6]                # fractions of the target's box: [0, 0] is its top left
    to: [0.5, 0.35]
    for: 1                          # seconds the movement takes
  - click: { css: canvas }
    at: [0.75, 0.3]                 # a point inside the canvas instead of near its centre
  - wait: { js: "game.score > 0" }  # the game's state, not a fixed delay
    timeout: 20

# Show made-up data and keep trackers quiet: the page's API answers from the script, analytics fails.
# Mocks and blocks are part of the take: changing them captures again.
title: Projects with mocked data
browser:
  url: http://localhost:5173        # base for relative goto paths
  viewport: 1280x800
capture:
  mocks:
    - url: "**/api/projects"        # any origin; the query string is ignored
      json:
        - { name: Launch plan, owner: dev@example.com }
        - { name: Q4 roadmap, owner: ana@example.com }
    - url: "**/api/me"
      json: { name: Dev, plan: Team }
      delay: 0.6                    # long enough to show the loading state
  block: ["**/analytics/**", "**/*.hotjar.com/**"]
camera: auto
speed: auto
script:
  - goto: /projects.html
  - wait: { text: Q4 roadmap }      # the mocked data is on screen
    pause: 1

# Scroll a long list, hover an item and come back, with explicit camera shots and a speed ramp.
title: Browse the list
browser:
  url: http://localhost:5173
  colorScheme: dark
  frame: { style: macos, address: true }
typing: { wpm: 90 }
cursor: { style: macos, clickRipple: true }
camera:
  mode: follow
  shots:
    - { at: open.act, shot: close, focus: action }
    - { at: back.start, shot: wide, move: smooth }
speed:
  ramps:
    - { during: down, rate: 3 }
video:
  format: wide
  hold: 1.5
script:
  - goto: /list.html?still
  - scroll: { to: { css: "#item-60" } }
    id: down
  - hover: { role: button, name: Open 64 }
    id: open
    hold: 0.8
  - scroll: -1500
    id: back
  - pause: 1

# A vertical clip for Shorts or Reels. The format's safe area keeps the window, the camera and the
# captions clear of the platform's buttons, and a narrow viewport fills it.
title: Create a project, vertical
video:
  format: short                     # 1080x1920; clear: 9 % at the top, 6 % at the sides, 20 % below
browser:
  url: http://localhost:5173
  viewport: 720x1014                # fills the short format's safe area (address bar, no tabs)
  scale: 2
camera: auto                        # zooms in on each action; static keeps the whole page in view
speed: auto
script:
  - goto: /
    caption: Create a project
  - click: New project
  - type: Launch plan
    into: { label: Name }
  - type: { into: { label: Owner email }, text: dev@example.com }
  - click: { role: button, name: Create }
  - wait: { text: "Project created: Launch plan" }
    pause: 1