The Mockup Generator animates a 3D device showcase from a screenshot. Pick a device, drop in your image or video, keyframe a camera move, render to MP4 with optional alpha channel.
Open the mockup generator
Each board can hold many mockup projects. Click the Mockups tab in the top bar. The current project opens; switch projects from the project dropdown.
Create a new project with + New mockup in the project dropdown.
Device models
Ten built-in models, each with its own 3D geometry, screen aspect, and lighting:
- iPhone — standard 6.1″ frame
- iPhone Pro Max — 6.7″ Pro frame
- iPad — 11″ tablet
- iPad Mini — 8.3″ tablet
- MacBook Air — 13″ laptop
- MacBook Pro — 14″/16″ laptop
- iMac — desktop with stand
- Double iPhone — two phones side-by-side
- Browser — generic browser-window frame
- Grid — 2×2 phone grid for app screen variants
- No device — flat screen, full-canvas, useful for raw renders
Pick the model in the project setup dialog or change later from the project’s properties.
Drop your screen
Drag any image or video element from the canvas onto the device’s screen area. The asset becomes the device’s display content; it can be a static image or a looping video.
Animate the camera
Use the keyframe panel to animate:
- Position — x, y, z (depth)
- Rotation — x, y, z (per-axis tilt)
- Scale — uniform or per-axis
Default keyframes give a gentle float; preset animations apply a richer move in one click.
Depth of field
Toggle DoF on, set focus distance and aperture. Per-frame keyframable, useful for rack-focus pull moves.
Render
Export to MP4 with optional alpha channel (WebM VP9 or MOV ProRes 4444). The resulting clip can be composited over other footage in the Video Editor.
When to use it
- Product launch videos with a device showcase.
- App preview reels for the App Store / Play Store.
- Marketing site hero animations.
- Pitch-deck device shots.
Leave a Reply