How to make a vertical 9:16 demo from a Mac app

You recorded a clean demo of your Mac app. It looks great on a laptop. Then someone asks for a vertical version for Reels, Shorts, TikTok or a LinkedIn post, and you drop the video into a 9:16 frame. The window shrinks to a thin strip in the middle, the text is unreadable, and the button you're showing off is a smudge.

This is a geometry problem, and it has a few honest solutions. Here's what works, what doesn't and why, and then how DemoTake renders a vertical version from the same take as your landscape one.

#Why a Mac window looks tiny in vertical video

A 9:16 video is watched on a phone screen roughly 390 points wide. A typical Mac window is 1,200 to 1,600 points wide. If you fit the whole window into that width, everything shrinks to about a quarter of its size: 13-point body text lands near 3.5 points. Nobody can read that, and a vertical feed doesn't give viewers time to squint.

So the question isn't "how do I fit the window?" It's "which part of the window does the viewer need to see right now?"

#Three ways to put a wide window into a tall frame

A following crop is what editors do by hand with keyframes: they move a crop box to follow the cursor, zoom in on the field being typed into, and pull back when the screen changes. It works well, and it takes a long time. It also has to be redone every time the recording changes.

#Make a Mac app readable on a phone: a checklist

Some of the best fixes happen before you press record:

• Make the window narrower. Many apps reflow when they get narrow: sidebars collapse, forms stack. A window closer to square gives a vertical crop much more to work with.
• Make the text bigger. Zoom in on the web app, raise the editor's font size, or use your app's own text size setting. It costs nothing and helps both formats.
• Keep the action near the middle. If the key button sits in the far top-right corner, a vertical crop has to travel there and back.
• Use a bigger pointer. A cursor sized for a laptop disappears on a phone.
• Keep captions short. One line, a few words. Long captions wrap into a block that covers the app.
• Leave room for the platform. Vertical feeds lay their own buttons, names and captions over the bottom and the right side of the video. Keep the important UI and your captions clear of those areas, and watch the export on a real phone before posting.
• Hold on the result. The final screen is the payoff. Give it a second or two longer than feels necessary.

#How DemoTake renders 9:16 from the same take

In DemoTake, a recording is a take made of scenes, and exports never change the take. You don't record a separate vertical version: you pick the outputs you want, and each one is rendered from the same footage and the same edits.

What changes per format is the layout and the camera. DemoTake plans them for each output:

• When the shapes are close, such as a 16:10 window in a 16:9 video, it fits the whole window in the frame.
• When they are very different, such as a wide window in a 9:16 frame, it doesn't squeeze the whole window into a sliver. It frames a window about half as wide as the source instead. For a typical 16:10 window, that is roughly a 4:5 frame in the middle of the vertical canvas.
• The camera follows the action. In reframed outputs like 9:16 and 1:1, the crop follows the pointer sideways with smoothing, even in wide shots. On top of that, the same intent-aware zooms apply: they move in on story beats such as form entry and results, not on every click.
• The pointer and captions are drawn at render time. The presentation pointer is synthesized from the recorded clicks, so it stays sharp at any size and moves smoothly. Captions wrap to fit the narrower frame.

Because the camera is planned rather than keyframed by hand, it stays correct when you edit. Trim a scene, retake one, or shorten the waits, and the vertical output follows. See Camera and pointer and Framing and Fit to Content for the details.

#Check the vertical version before you export

The editor previews any format. Open the Preview Format menu in the player controls and choose 9:16. Then check the things that usually go wrong in vertical:

1. Pointer size. On the Setup tab of the inspector, raise Pointer › Size. The Highlight ring helps too.
2. Camera. If a shot is wrong, select the event on the timeline and change its Camera in the inspector, or tell the command bar what you want, for example "don't zoom on typing". Press ⌘L to focus it.
3. Captions. The Captions tab has Show in exports, Add at Playhead and Generate, which writes captions from your scene intents. Shorten any that wrap to three lines. See Captions.
4. Length. Vertical viewers are impatient. "Make it 30 seconds and remove waits over 1 s" in the command bar is a good first pass. Pacing and waits explains what DemoTake protects when it shortens.

Every change is an ordinary edit you can undo, and it applies to every format at once.

#How to export 16:9 and 9:16 at the same time

Press ⌘E or click Export. The sheet shows a tile per format: 16:9 (1920×1080 MP4), 9:16 (1080×1920 MP4), 4:3, 1:1, GIF, Screenshots, Reviewer Pack and Guide. Select 16:9 and 9:16, then click Export 2 Outputs. Each video is checked before it's marked ready. See Formats and sizes.

If an agent or a script does the exporting, it's one call or one command:

{ "take_id": "take_01j…", "formats": ["16:9", "9:16"], "wait": true }

demotake export take_01j… --format 16:9,9:16

You can also ask for both formats up front: take_create accepts "outputs": ["16:9", "9:16"], and so does a demotake.json spec. Let your coding agent record the demo shows that flow end to end.

#iOS Simulator demos get a phone frame in 9:16

If you record an iOS app from the Simulator, the vertical output is the natural home for it. For iOS Simulator takes, DemoTake fits the whole device screen instead of reframing it, because half a phone is never the right shot. It also draws a plain phone frame around the screen in 9:16 exports.

Agents set the same thing with edit_apply and device_frame{mode}. How to record an iOS Simulator demo with touch indicators covers recording the device itself.

#The short version

Don't squeeze a wide window into a tall frame. Narrow the window, raise the text size, keep the action central, and let a camera that follows the action choose the crop. Then export both shapes from one recording, so the vertical version never drifts out of date.

Download DemoTake and try the 9:16 preview on a take you already have.