Drop in a URL. Get a demo video that looks finished.
StudioFrame puts any website or prototype inside a phone or browser frame, on a background you choose, and records it. No timeline, no exporting from a video editor. It's free.
Three steps. No editing software.
The frame, the background, and the shadow are part of the recording. What you see on screen is the file you get.
Paste a URL
Localhost, staging, production, or a Figma prototype link. If it opens in a browser, it opens in StudioFrame.
Frame it
Phone or browser window, in any color. Pick a pattern or drop in an image, then set the shadow and vignette.
Record
A countdown, then it captures the window with system audio, your mic, and your camera if you want them. Hold Z to zoom in on the cursor.
What's in the box
One focused tool. Every control here exists because a demo video needed it.
Device frames
A phone and a browser window in any color. Scale them up or down and match the frame to the design instead of the other way around.
Patterns and images
Mesh, Aurora, Blueprint, Grid, Dots, Noise, and a dozen more. Scale, rotate, and fade each one, or use an image of your own.
Shadow and vignette
A drop shadow you can size, blur, and recolor. A vignette that pulls the eye toward the center of the frame.
Color sampling
An eyedropper for the background, the frame, and the shadow, so the whole scene can pick up a brand color from the prototype itself.
Camera and microphone
Put yourself in a picture-in-picture bubble and talk over the demo. Or leave both off and let the interface do the talking.
Zoom while recording
Hold Z to zoom in on the cursor and show a detail. Let go to pull back out. It's part of the recording, not a post effect.
Built-in editor
Trim the ends, add speed and zoom effects on a simple timeline, scrub through the result, then export. Most recordings never need anything else.
MP4 out
The Mac app exports MP4 with FFmpeg built in. The browser version saves WebM. Either one drops straight into Slack, Notion, a deck, or a case study.
Video compressor Mac app
Shrink any MP4, MOV, or WebM to fit an upload limit. Pick smaller, balanced, or best quality and choose a file. That's the whole tool.
On your Mac, or in a tab
Same app, same controls. The desktop version adds the parts that need a real file system and FFmpeg.
Mac app
- Every framing, pattern, and recording feature
- MP4 export, FFmpeg bundled
- Video compressor for existing files
- Import MOV recordings from QuickTime
- Launch QuickTime straight from the app
- Automatic updates
In the browser
- Every framing, pattern, and recording feature
- Records with the browser's own screen capture
- Saves WebM files to your downloads
- Works in Chrome and Edge on Windows and Linux too
- No MP4 conversion or compressor
- No QuickTime or MOV import
Free. No account, no license key.
StudioFrame used to be a paid app. It isn't anymore. Download it, use it for client work, and put the videos wherever you like. There's no watermark.
Questions
Yes. There's no trial, no paid tier, and no feature behind a sign-up. The Mac app doesn't even ask for an account. The browser version asks you to sign in with Google or an email link, and that's the only account involved.
The current build is for Apple silicon only. On an Intel Mac, use the browser version in Chrome. It has the same framing and recording tools and saves WebM.
Not a desktop app. The browser version works in Chrome and Edge on Windows, since recording uses the browser's own screen capture.
Anything that loads in a browser: localhost, a staging server, production, or a Figma prototype link. Some sites refuse to load inside another page. Those won't work in the frame.
The Mac app converts recordings to MP4 automatically, with FFmpeg bundled so there's nothing to install. The browser version saves WebM, which Slack, Notion, and most browsers play directly.
They stay on your machine. StudioFrame records locally and never uploads your video anywhere.
Yes. No watermark, no attribution required. Portfolios, case studies, client decks, social posts, all fine.