Captions, cards and sound

Text over the video and the keyboard sound, drawn and played the way terminal-clip does, so both tools' clips cut together.

Captions and title cards#

A card step freezes the page under a full-frame title. A caption step shows text until the next caption; a caption on another step shows while that step runs. Key badges show each pressed key:

typing: { showKeys: true }
video:
  captions: { position: bottom, size: 44 }
script:
  - card: { title: "Acme [bold #8ab4ff]Projects[/]", subtitle: Save a project in ten seconds }
    dur: 2
  - goto: /form.html
    caption: The new project form
  - caption: Name it
  - type: Launch plan
    into: { label: Name }
  - caption: Then save it with Enter
  - press: Enter
  - wait: { text: "Saved: Launch plan" }
  - caption: ""

Captions, cards and badges are compose-only: adding or editing them never captures again. [bold], [#8ab4ff] and the other tags are terminal-clip's text markup.

Sound#

The MP4 carries terminal-clip's keyboard sound, at the times the keys were really typed: each typed or pressed key, and a held key going down and, softer, coming up.

typing:
  sound: wav            # wav (a recorded key), mechanical, soft or none
  volume: 0.8
cursor:
  clickSound: true      # a mouse click for clicks and drags (off by default); or a volume, 0–1

• Keys 35 ms apart or closer make one sound, and while the clip runs at 3× or faster only Enter and shortcuts sound.
• frames writes the track as audio.wav beside the PNGs, for a video editor.
• --sound none on any command turns the keyboard off.

Next#

The studio: tune all of this by eye, and pick elements with a click.

Source: docs-src/pages/tutorial/04-text-and-sound.md · browser-clip 0.1.0