Captions on screen recordings

Do not cover the demo. A screen recording already has chrome — menus, buttons, URLs, a cursor. Speech captions are a second chrome. If they sit on the control you are teaching, the mute viewer can read the sentence and still cannot see the click.

The job is a split. Auto captions transcribe the voiceover. An authored overlay names the button when the voiceover is late or the UI type is too small. Mixing those into one lower-third is how a SaaS tutorial becomes a white card on a white settings page.

This is not a talking-head problem. The face is optional. The pixels that matter are the ones you recorded. Treat them as sacred, then place type in the leftover.

Two chromes on one frame

A 9:16 or 16:9 screen capture is a picture of an interface. That interface has its own safe areas: a left nav, a top bar, a cookie banner, a floating chat widget, a red "record" pill you forgot to crop. Platform chrome (TikTok's rail, Shorts' Subscribe) may sit on top of that. You are laying three layers: the app you demo, the caption you burn, the player the viewer uses.

Default caption position is bottom-centre. Default demo composition is "the interesting control is in the lower half," because that is where primary buttons live in most web apps. Collision is the default, not a bad day.

Paper and Ink families add a card. On a screen recording the card is a second window. It will cover the very panel you zoomed into. Classic's stroke is thinner and still sits on the pixels. Halo's ring is mass on the menu. None of these families know what a "Save" button is.

Variable frame rate is common on OS screen recorders. If captions start tight and finish late, that is a clock bug, not a placement bug. Conform, then caption. Different page; it will wreck this one if you ignore it.

Cursor motion is the other moving object. A caption that is readable and on the cursor path is a caption the viewer tracks instead of the click. Park type off the cursor's neighbourhood for the duration of the gesture.

Park the speech off the demo

Before you caption, decide which rectangle is the lesson.

If the lesson is a settings toggle in the lower third, captions cannot live there. Use Classic Top, Paper Top, Ink Top, or Halo Top — Caption Studio ships a top variant in those families. Headline already defaults to the top; it is a title, not a transcript, so keep speech in a top subtitle family rather than Bebas-ing every sentence.

If the lesson is a top nav, do the reverse: bottom captions, and crop the recording so the nav is not in the platform's top chrome as well. A Safari toolbar plus TikTok's search plus a Headline caption is three headers.

If the lesson is a full-screen modal, you may not have a quiet band. Then the recording has to give you one: letterbox the capture inside 9:16 (app in the centre, black or branded rails), and put captions in the rail you added. That is a composition choice in the capture, not a caption-style choice after. Trying to squeeze Classic onto a full-bleed IDE is how you cover the line of code the video exists to show.

Zoomed recordings (OS zoom, editor punch-in) change the collision every few seconds. A static bottom caption that was clear on the wide shot lands on the zoomed button. Either hold the caption in a band you never zoom into, or split cues so a zoomed segment uses the opposite edge. That is editorial. Auto captions will not follow the zoom.

16:9 tutorials on YouTube long-form can use a quieter lower-third because the player chrome is outside the picture. The same file cropped to 9:16 for a Short is a new collision map. Recaption the vertical, do not "scale the captions with the crop."

The safe area of the destination app is additional. A top caption that clears your demo can still sit under a Shorts search control. Check the export in the player, not only against the app you recorded.

Overlay names the click

Speech captions follow the voice. They will not say "the green button, lower right" unless the speaker said that. Speakers often say "this" while clicking. "This" is a useless caption on mute.

When the mute viewer needs a label the voice did not give, write it. Add a text overlay burns one authored line — top, centre, or bottom — for the whole clip. Timed text overlays if the label has to change with the click. That is not transcription. Do not send a silent stretch of clicking to add captions to a video and hope the generator types the menu name. There was no speech. You will get a blank or a hallucination of room noise.

A good split on a 40-second product demo:

Voiceover transcribed in Classic Top, off the UI.
A timed overlay on the control: "Billing → Invoices," in Inter or the Ink face, small, with a box, next to the click, not on it.
No karaoke. Snap on a screen recording punches type on the dataset. Reveal types a sentence onto a table. Both steal the demo.

If there is no voiceover — just clicks and a music bed — skip auto captions. Author the labels. Music is not speech. The captioner is not a UI detector.

165 language codes still apply when there is a voice. A Spanish voiceover of an English product UI is a caption in Spanish and overlays in whatever language the viewer needs to hit the (English) menu. That can mean Spanish speech captions plus English button labels. Two languages, two tools. Not one es-ES pass.

Cursor, zoom, and reading speed

Screen recordings run hot on reading speed. Speakers explain while they click, faster than a first-time user can read and search the UI. A cue timed 1:1 with that patter will flash. Split. Hold. It is acceptable for the caption to lag the click by a beat if the alternative is a paragraph on the button. The click is the picture. The caption is the sentence.

Reading speed on a demo is slower than on a talking-head because the eye is busy. Budget fewer words per second. Cut the voiceover, or cut the caption. Do not shrink the font to keep up.

Credits: each clip is a caption render at 1× (21 basic looks) or 2× (9 dynamic). Dynamic animation on a screen recording is usually the wrong spend. Preview if you insist. Paper Sheer can help when you must caption over a light UI and a solid card would hide too much; check contrast on this screenshot, not on the picker.

The AI caption generator is the speech burn. Use it on the voice. Use overlays on the chrome. Watch the export at the size of the phone the viewer has, with the destination UI on, because that is three chromes and you only controlled two.

If a control is unreadable in the recording, recapture. Captions will not sharpen a 12px label. They will cover it.

Caption the demo in Versely.

FAQ

Should screen recordings use Paper for contrast?

Only if the card does not sit on the lesson. A white card on a white settings page hides the toggle. Classic Top or a letterboxed rail is usually cleaner.

Can auto captions label buttons I click?

No. They transcribe speech. If you did not say the menu path, write an overlay.

Why do my tutorial captions drift by the end?

Screen recorders often capture variable frame rate. Conform to a constant fps, then recaption. A style change will not flatten a slope.