Video + imageMotion studio01App launches
Give your launch a leading role.
Turn screenshots and screen recordings into an animated device story. Build camera moves, add music, and export a film or a still from Motion.
Make a launch video
3D device mockup generator
3D device mockups.
Made to move.
Your screens. Beautifully in focus. Create product videos and images, right in your browser.
Dual PerspectiveMotion studio
3D Floating StageMotion studio
Sub-pixel DetailEditor studio
Studio StagingEditor studio
Clean CanvasEditor studio
From your first screenshot to your next launch.Find your studio
Give your design a place in the real world.
- iPhoneiOS Flagship
- AndroidMaterial Design
- iPadTablet View
- MacBookStudio Glass
- Displays5K Retina
One product.
Every possibility.
A launch film. A homepage hero. The post that gets noticed.
Give every product moment the presentation it deserves.
Use the left and right arrow keys to explore, or Home and End to jump to the first and last example.
Video + imageMotion studioImageImage editorVideo + imageMotion studioImageImage editorApp launches, example 1 of 4.
Two studios. One creative toolkit.
What are you making?
Choose the workspace that fits the way you want to show up.
Make it move.
MotionFor videos and images. Turn screenshots and recordings into animated 3D device scenes, then take your favorite frames with you.
- Camera moves & scene transitions
- Timeline, music & sound
- Video & still-image exports
Make it a still.
EditorFor images only. Bring your interface into a considered composition for your website, pitch deck, or next portfolio piece.
- Device, angle & lighting controls
- Backgrounds & materials
- High-resolution image exports
From screen to scene
Your work.
With a little
perspective.
How to create a 3D device mockup: start with your product, direct the scene, and export for the place it will be seen.
Explore the creative controls
01
Start with your screen.
Choose a device that fits your product, then upload a screenshot. In Motion, you can also use a screen recording to show the interface in action.
A clear source image makes the difference. Match the device orientation and keep important UI away from the edges.
02
Find your perspective.
Rotate the device, compose the camera, and balance the background and lighting. Make a quiet product portrait or a dramatic close-up.
For animation, use Motion to build a sequence of scenes and camera moves around your product's strongest features.
03
Give it somewhere to go.
Export an image for your website or presentation. In Motion, finish the timeline with music and export a video plus still images for your launch.
Choose the aspect ratio for the destination: landscape for a website, portrait for a mobile feed, or square for a campaign.
The difference is
in the dimension.
A flat screenshot shows an interface. A 3D device mockup gives it context, scale, and a point of view.
Find an angle that says more.
Frame a full device, get close to a feature, or build a scene around several screens. In Motion, connect those perspectives with animated camera movement.
Give your interface some presence.
Shape the lighting, reflections, and device finish. Use contrast to separate the screen from its surroundings and keep your product easy to read.
Make the whole scene yours.
Choose a background, adjust the framing, and leave space for your message. Build a consistent visual language across a website, launch film, and social campaign.
Finish in the format you need.
Use the Editor for still images and transparent PNGs. Use Motion for video and PNG, JPEG, or WebP frames. Select your output size in the workspace.
For the next thing you ship
A good product
deserves a great debut.
Explore the tools with a free account. Choose a paid plan when you need more room to create and export.
Explore the plansPaid plans from $5/month
USD, billed monthly
Or take a look inside Motion USD, billed monthly
Frequently asked questions
A few things
worth knowing.
Questions about creating 3D device mockups with Mockship.
Need custom 3D setups?Our studios support custom imports, device color matching, and 4K exports.
What is a 3D device mockup generator?
A 3D device mockup generator places your screenshot or screen recording inside a digital phone, tablet, laptop, or monitor. You can change the camera angle, lighting, background, and device appearance to present your interface with depth. Mockship brings this workflow into your browser for product images and animated launch content.
Should I use Motion or the Editor?
Choose Motion when you want videos and images: animated device scenes, camera movement, a timeline, music, and still-frame exports in one workspace. Choose the Editor when you only need images, such as a website hero, portfolio render, presentation slide, or transparent PNG mockup.
Can I use my own screenshots and screen recordings?
Yes. Upload your own product screenshots to replace the device screen. For a screen recording or an animated presentation, open Motion and add your media to a device scene. Use a clear source image or recording that matches the device screen shape as closely as possible.
Which devices can I use for a mockup?
Mockship includes phone, tablet, laptop, and monitor options, including iPhone, Android, iPad, and MacBook models. Choose a device in your workspace, then customize its screen and composition. The model selection can differ between Motion and the Editor.
Can I export a transparent PNG or a still image?
Yes. The Editor supports image exports including transparent PNGs for use in websites, slides, and design tools. Motion also exports still frames as PNG, JPEG, or WebP. Available resolution and export options depend on the workspace, your plan, and browser support.
Do I need to know Blender or install 3D software?
No. Mockship provides ready-to-use devices and visual controls in your browser. Select a model, add your screen, and adjust the composition. Motion adds scene and timeline controls for animation. A browser with hardware acceleration helps the 3D preview run smoothly.
Can I try Mockship before choosing a paid plan?
Yes. Create an account to use the creative tools and try the eligible exports included in the Free plan. Paid plans provide larger monthly export allowances and additional export options. Visit the pricing page for current limits, formats, and billing details.