Environments, not backdrops
MacBook mockup videos for
website and web app demos
Record your website or web app, drop the video in, and it plays on an open MacBook in art-directed 3D environments, the camera moving round it. An animated laptop mockup without After Effects: the room, its light and the camera are set, so you pick scenes and export an MP4.
Drop your screen recording
It opens in the editor, playing in this scene
MP4 · MOV · WEBM · OR AN IMAGE
Parlor · Orbit
Make it on your computer
The MacBook scenes open in a desktop browser, where you add the recording and export. Copy the link and carry on at your desk.
Drop it to open it in Parlor · Orbit
- $35 a month, cancel any timeor $240 a year · tax included
- Free to make and previewExport the MP4 with Pro
- Commercial use includedClient work, ads, social posts
- No After EffectsChrome, Edge or Safari on a computer
19 MacBook scenes
The laptop is open on a stool, a desk, a chest of drawers, a slope of grass and concrete blocks: five rooms in all. Each scene is one camera move round the open laptop, some at desk height, some from below the screen or above the keyboard.
Who makes it
Made by one designer, scene by scene
I'm Krystof, and I design products in Prague. I made these rooms in Blender the way I'd want to show my own work: real furniture, real light, a camera that moves slowly. Each frame is rendered, not generated, so the light on the keyboard is what it would be.
About Motion Mockups
From a screen recording to an MP4
- 01Record your siteA screen recording of your browser or desktop app works as it is, scrolling and clicking through the pages. So does a Figma prototype video or a still.
- 02Pick scenesLay MacBook scenes from several rooms on one timeline. Your recording plays on through every cut, so one long take of your site runs across all of them.
- 03ExportSave an H.264 MP4 at 30 fps, wide for a website or square for social, at 1080 or 2160. Or a PNG or JPEG still for a hero image.
The details
For a web demo, export wide 16:9 for your landing page, a product video or YouTube, or square and portrait for social posts. Put a walk through several pages on one timeline and it comes out as one MP4, or as a file a scene. Each frame is drawn again from the original renders at the size you export, so small text on the screen stays sharp.
- Scenes
- 19 on the MacBook, in five collections
- Length
- 8 seconds each, at 30 fps. Put any number on one timeline
- Your recording
- MP4, MOV, WebM or MKV, or a PNG, JPEG, WebP or AVIF image. 3500 × 2272 fills the screen
- Export
- H.264 MP4, or a PNG or JPEG still
- Shapes
- Square 1:1, portrait 4:5, vertical 9:16, wide 16:9 and 4:3
- Size
- 1080 or 2160 pixels on the short edge
- Camera
- Fixed per scene, on purpose: you choose scenes, not angles
- Devices
- Apple devices only, and a TV. No Android phones or tablets
- Sound
- None. Add it in your video editor
- Browsers
- Chrome, Edge or Safari on a computer
- Free
- Every scene and edit, with a watermarked 720p preview. No account
- Pro
- Export everything: $35 a month, or $240 a year
Questions
Is there a free MacBook mockup?
You can build the whole video without paying: every MacBook scene takes your recording, and the preview plays with a watermark, no account needed. Exporting the MP4 or a still comes with Pro, $35 a month or $240 a year.
Will a recording of my website fit the screen?
A full-screen recording from a MacBook has the screen's proportions and fills it. A browser window or another monitor's shape is fitted to the screen; open Fit recording to pick the part to show. Hide the browser bar first if you want only the page.
Can I use it for my Mac App Store preview?
Not for the App Preview itself: Apple's guideline 2.3.4 wants previews to show the app, and a device frame is not allowed there. A MacBook video suits your landing page, a launch post, a Product Hunt gallery or an ad.
Do I need After Effects or Blender?
No. Unlike an After Effects laptop template, there is nothing to download: the scenes are rendered, and the editor fits your recording to the screen in Chrome, Edge or Safari on a computer.
Can I use the video for client work?
Yes. Pro includes commercial use, so the videos can go to clients, into ads, onto landing pages and social media without credit. Anything you exported while subscribed is still yours to use once you cancel.
Can I hide the MacBook's notch?
Yes. Switch Notch off in Effects and your recording shows where the camera notch was, so a site's header can run right to the top edge. The switch applies to the whole video, every scene on the timeline.
