How to Add Device Frames to Your Screen Recordings on Mac

You have recorded a clean screen capture of your app running on an iPhone or iPad. The footage looks good, but when you drop it into a landing page, tweet, or App Store listing, something feels off. Without a device frame wrapping the recording, the video looks like a floating rectangle with no context. Viewers do not immediately understand they are looking at a mobile app, and the professional polish that separates amateur content from polished marketing material is missing.

Adding a device frame solves that problem. It tells your audience exactly what device they are looking at, builds trust, and makes your content look like it belongs next to the best apps on the App Store. In this guide, we will walk through the major approaches to adding device frames to screen recordings on Mac, from the command-line to modern one-click workflows.

Why Device Frames Make Your Recordings Better

Device frames do more than decorate your video. They serve three practical purposes that directly impact how people perceive your app.

Professional appearance. App Store editorial features, top product-hunt launches, and major SaaS landing pages almost always present recordings inside device mockups. When your content matches that standard, viewers subconsciously associate your product with the same level of quality. A naked screen recording looks like a developer screenshot; a framed recording looks like a marketing asset.

Instant context. When someone scrolls past your video on social media, the silhouette of an iPhone or MacBook tells them immediately that this is a mobile app or desktop tool. Without the frame, they need to read the caption or watch several seconds before they understand what the product is. Those seconds matter — you lose attention fast on platforms like X and LinkedIn.

Trust and credibility. A polished device frame signals that you have invested time in your presentation. Indie developers shipping a beta sometimes skip this step, and the result is a tweet thread that looks rough even when the app itself is excellent. Adding the frame closes the gap between how your app works and how people feel about it before they try it.

So how do you actually add a device frame to a screen recording? Let us start with the method most developers encounter first.

The Old Way: FFmpeg Command Line

If you search for "add device frame to video" and you are a developer, you will probably land on an FFmpeg-based workflow. FFmpeg is an incredibly powerful tool for manipulating video, and it can overlay your screen recording on top of a static device frame image. Here is what the command looks like:

ffmpeg -i device_frame.png -i screen_recording.mp4 \
  -filter_complex "
    [1:v]scale=1170:2532[scaled];
    [0:v][scaled]overlay=135:162:
    shortest=1
  " \
  -c:v libx264 -preset slow -crf 18 \
  -c:a aac -b:a 128k \
  -movflags +faststart \
  output_with_frame.mp4

That command scales your recording to fit the screen area of the device frame image, then composites it on top at the correct pixel offset. Even in this simplified version, you need to know the exact pixel dimensions of the screen area and the exact x/y offset where it sits inside the frame image.

In practice, the problems compound quickly:

• You need a high-quality device frame asset. Apple does not provide transparent PNG device frames designed for video compositing. You have to source them from third-party sites or extract them from the Apple Design Resources, then manually measure the screen region.
• No 3D perspective or angles. FFmpeg overlay is a flat 2D composite. If you want an angled, three-dimensional look — the kind you see on most landing pages — you would need to apply perspective transforms, which adds another layer of complexity to the filter chain.
• Different devices mean different commands. Every time you switch from an iPhone to an iPad or MacBook, you need to recalculate the scale, offset, and resolution. There is no reusable template; you are manually adjusting numbers each time.
• No real-time preview. You run the command, wait for it to encode, open the output, realize the offset is two pixels off, and start over. The feedback loop is slow and frustrating.

FFmpeg is the right tool for many video tasks, but compositing a device frame around a recording is not one of them — at least not if you value your time.

Design Tools: Rotato & Similar Apps

A step up from the command line, apps like Rotato, Mockuuups Studio, and similar design tools let you drag a video file into a 3D device mockup scene. You choose the device, import your recording, adjust the angle, and export the result.

These tools solve the biggest FFmpeg problems — they provide beautiful 3D frames, handle the compositing automatically, and give you a visual preview. For many marketing teams, they are a solid choice.

However, for developers recording app demos, they have notable limitations:

• Post-production only. You record your screen with one tool, then import the footage into the mockup app. That means managing two separate applications and keeping track of raw recording files that need processing.
• No real-time recording. You cannot see the device frame while you are recording. This makes it hard to frame your interactions correctly — you might record too much or too little of the screen, and you will not know until you import and preview.
• Limited editing. Most mockup tools are not video editors. If you need to trim, add transitions, or adjust timing, you need yet another application in the pipeline.
• Static scene focus. Many of these apps are designed primarily for still mockup images. Video support is secondary, and you may encounter frame-rate limitations or export quality issues that do not appear when exporting a single image.

If your workflow already includes a separate video editor and you only occasionally need device frames, a tool like Rotato can work. But if you are an app developer who regularly creates demo videos, preview recordings, or marketing content, there is a more streamlined approach.

The Modern Way: SmoothCapture

SmoothCapture is a Mac app built specifically for developers who need to record their apps with professional 3D device frames — and it handles everything in a single workflow. You choose a device frame, record your screen or a connected iOS device, and the frame is rendered in real time as you capture. There is no post-production compositing step.

Here is the full workflow, step by step.

Step 1: Choose Your Device Frame

When you create a new recording in SmoothCapture, you pick the device frame first. The library includes the latest iPhone models (iPhone 15 Pro, iPhone 15, iPhone SE), iPads (iPad Pro, iPad Air, iPad mini), and MacBooks (MacBook Pro, MacBook Air). Each frame is a high-fidelity 3D model with accurate colors, materials, and proportions.

You can choose the device color — Space Black, Natural Titanium, Silver, and so on — and set the viewing angle. Want a straight-on flat view? That works. Prefer an angled perspective that shows the depth of the device? Rotate it to the exact position you want. The frame renders in real time, so you see the final look before you start recording.

Step 2: Record Your App

SmoothCapture supports two recording methods. You can capture your Mac screen directly — useful for recording the iOS Simulator, Android emulator, or any desktop app. You can also connect a physical iPhone or iPad via USB and record the device screen directly, which gives you the smoothest, highest-fidelity footage because it captures at the native device resolution without simulator overhead.

While you record, the 3D device frame is composited live. What you see in the preview window is exactly what the final video will look like. This means you can adjust your app interactions to look natural within the frame — no surprises when you review the footage later.

Step 3: The Recording Automatically Has the 3D Frame

When you stop recording, the video already contains the device frame. There is no import, no compositing step, and no waiting for a render. The file is ready to preview immediately. This is the fundamental difference from every other approach: the frame is part of the recording from the start, not something you add afterward.

Because SmoothCapture renders the frame in real time using GPU acceleration, the quality is consistent across the entire recording. You get smooth 60fps output with no dropped frames, even with complex 3D perspectives.

Step 4: Edit with Timeline and Add Effects

After recording, SmoothCapture includes a built-in timeline editor. You can trim the beginning and end of the recording, cut out mistakes, and adjust the pacing. The editor also supports adding background music, zoom effects, and cursor highlighting — everything you need for a polished demo video without switching to a separate editing application.

If you are creating an App Store preview video, the timeline editor is especially useful for hitting the 15-30 second duration that Apple requires. You can trim precisely and preview the timing before you export.

Step 5: Export in the Right Resolution

SmoothCapture offers export presets tailored to common use cases. Need a 1080p MP4 for Twitter? There is a preset for that. Need the exact resolution Apple requires for an iPhone 15 Pro Max App Store preview? Select the App Store preset and the dimensions are set automatically. You can also export as GIF for documentation, or as a high-bitrate ProRes file for further editing in Final Cut Pro or DaVinci Resolve.

The entire workflow — from choosing a frame to exporting the final video — happens in one application. No file juggling, no command-line incantations, no switching between three different tools.

Comparison: FFmpeg vs Rotato vs SmoothCapture

Here is how the three approaches stack up across the features that matter most for app developers creating demo recordings:

FFmpeg wins on price, but loses everywhere else. Rotato is a strong choice if you only need post-production mockups. SmoothCapture is the best fit if you want the entire recording-to-export pipeline in a single app with real-time device frames.

Tips for Better Device Frame Recordings

Whichever tool you use, these tips will help you create cleaner, more professional device frame recordings.

Clean up the status bar. Before recording, set your device to Do Not Disturb to prevent notification banners from appearing. If you are recording the iOS Simulator, Xcode lets you override the status bar to show a clean time (9:41 AM, the classic Apple screenshot time), full signal bars, and a full battery. These small details make a surprising difference in how polished the final video looks.

Match the device color to your app. If your app has a dark theme, a Space Black or Midnight device frame complements it naturally. Light apps often look best in Silver or Starlight frames. SmoothCapture lets you switch device colors instantly, so try a few options before committing to a recording session.

Angle matters more than you think. A flat, head-on device frame is functional but can look static and uninteresting. A slight 10-15 degree rotation adds depth and visual energy without making the screen content hard to read. For hero sections on landing pages, a more dramatic angle (20-30 degrees) grabs attention. For tutorial content where readability is the priority, keep the angle subtle or go completely flat.

Pay attention to the background. The area around the device frame matters. A solid dark background keeps the focus on the device. A subtle gradient can add dimension. Avoid busy backgrounds that compete with the app content visible on the device screen. SmoothCapture supports custom background colors and gradients, which you can adjust before recording.

Record at native resolution. Always capture your screen or device at its native resolution. Scaling up a low-resolution recording introduces blurriness that is especially noticeable when it sits inside a sharp, high-quality device frame. If you are recording a physical device via USB, SmoothCapture captures at the full device resolution automatically.

Keep interactions deliberate. When recording with a visible device frame, your gestures and navigation should be slightly slower and more intentional than normal usage. Viewers need time to follow what is happening on screen, and the 3D frame adds visual context that makes fast movements harder to track. Pause briefly on important screens so viewers can absorb the interface.

Adding device frames to your screen recordings used to require either command-line expertise or a multi-app workflow. Today, SmoothCapture handles the entire process — recording, framing, editing, and exporting — in a single Mac application. If you are building App Store preview videos, marketing content, or demo recordings for your landing page, the device frame is no longer a post-production afterthought. It is part of the recording itself.