3D Mockup Generator
3D mockup generator: a phone with your screen, filmed by a camera that pushes in and pulls back, in true perspective with a studio sheen and depth of field.
What makes a mockup 3D?
A 3D mockup shows the device in perspective. It turns away from you, its far edge shrinks, and you see a side as well as a face. Here each pixel's ray is cast from a camera onto the phone's plane, so you get the foreshortening of a real perspective projection instead of a flat picture skewed into shape.
Thickness gives the phone a body. Its side follows the phone's own outline, rounded corners and all, because the card takes its shape from the transparent picture Device Mockup draws.
How to make a 3D phone mockup
Start from a phone screenshot or a screen recording. The Dolly preset moves the camera back and then in again while the phone turns a little, with Shine at 0.5, Depth of field at 0.5 and Thickness at 0.04.
Template changes the move. The Tilt template rocks the phone top to bottom, like a phone tipped in your hand, and Orbit spins it all the way round. The Tilt slider sets how many degrees it turns, Speed how fast it goes, and Size how tall it stands.
Shine is a studio light's sheen: a band that slides across the screen as the phone turns toward the light. Shadow sets the shade underneath, and Backdrop the color behind.
Settings for a 16:9 promo, a 3D laptop and a see-through clip
A phone screenshot makes a tall frame. For a widescreen promo, choose 16:9 in Settings, and the capture stays whole in the middle with the phone keeping all of it. Raise the Motion Template's Size to about 0.8 for a bigger phone, since the camera pulling back makes it smaller for part of the loop.
Switch Device in Device Mockup to Laptop, Tablet or Watch and the same move films that device. Thickness follows the outline, so a laptop's slab includes the base.
To put a moving phone over a web page, tick No backdrop in Motion Template and save as WebM with transparency or Animated PNG. The depth of field blurs the phone's edge into the transparency with no dark fringe.
How does the depth of field work?
Focus stays where the phone starts. As the camera pulls back the phone goes soft, and it sharpens again on the way in. Depth of field sets how strong that is, and at 0 everything stays sharp.
The blur samples 24 points on a spiral spaced by the golden angle. That fills the disc evenly and doesn't leave rings. Each sample is weighted by its opacity, which is why the phone's edge blurs cleanly into the background.
Why does my 3D mockup jump when the clip loops?
Every template here comes back to its start after 6 seconds at Speed 1, or 6 divided by Speed in general: 3 seconds at Speed 2, 12 at Speed 0.5. For a still screenshot the export's Duration starts at 5 seconds. That stops the move a second early, and the GIF jumps back.
Set Duration in the recording settings to the loop's length, or a whole multiple of it. If you're after swaying, carousel or full-spin loops of a screenshot, those are on the Video Effects hub.
Saving the 3D mockup
Use MP4 for social posts and slides. A GIF of this move has a hard time: the sheen and blur create thousands of in-between colors that a GIF frame has to squeeze into 256, and its longer side tops out at 960 pixels. If you only need a still of the phone, the Phone Mockup Generator draws it flat.