velements

Device Mockups

Device mockups: show an app without filming a phone

Updated September 18, 20263 min read

How do you show an app on a phone in a video?

Use a device mockup preset, upload a screenshot, and let the phone, laptop or browser frame animate around it. The result is a clean product shot with no glare, no hand and no camera, exported as MP4 or transparent WebM.

Filming a screen is a fight with reflections. These presets scroll a phone, open a laptop, frame a browser and rotate a tablet around your own screenshots.

Five device mockups presets to start from

Hover any card to play it. Opening one loads it in the editor with every control unlocked.

  • A phone rises into frame and its app feed scrolls endlessly. Rename every card to match your product.

  • A laptop lid swings open to reveal a dashboard of scrolling columns. A clean opener for SaaS and web products.

  • A browser window pops open, the URL types itself and the page blocks load in. Perfect for launches and tutorials.

  • A row of phones glides past a centre focus, showing a different screen on each. Built for app store style showcases.

  • A smartwatch pops in, activity rings fill toward the goal and a headline lands on the face.

All device mockups

How to make one in the browser

  1. 01Open a device mockups presetBrowse the Device Mockups category and open the preset closest to what you need. It loads in the editor with every control unlocked.
  2. 02Make it yoursRewrite the text, set your brand colors and font, adjust easing and duration, and switch the aspect ratio for the platform you are posting to.
  3. 03Export the clipChoose MP4 for a normal track or transparent WebM for an overlay, pick a resolution up to 8K, and the file renders on your own machine.

Which format should you export?

Use MP4 when the clip sits on its own track or fills the frame. Use transparent WebM whenever it has to float over your own footage: the alpha channel is real, so no keying or blend mode is needed.

Format
MP4 H.264 · WebM VP9
Alpha
Transparent WebM
Resolution
720p to 8K
Aspect
16:9 · 9:16 · 1:1 · 4:5
License
Commercial use included

Three tips that make it look intentional

  • Upload a screenshot at the device's aspect ratio so nothing is cropped.
  • One scroll or one rotation per clip; combine them in the edit, not the preset.
  • Keep the device centered for social and offset for wide title frames.

Frequently asked

What should I upload?
A PNG, JPEG or WebP screenshot. It is decoded in your browser and never uploaded to a server.
Are the devices branded?
No. The shapes are generic hardware, so your exports carry no manufacturer trademarks.
  • Shop & Ecommerce

    Product promos: carts, price drops and ratings that sell

    Three beats do most of the work: the price drop, the social proof, and the call to action. An add-to-cart animation, a star rating and a promo code give a viewer the reason, the reassurance and the next step in under ten seconds.

    Read the guide
  • Education & Explainers

    Explainer graphics: quizzes, steps and definitions

    Structure beats decoration. A step sequence shows where the viewer is, a definition card fixes a term, a quiz creates a pause, and a flashcard flip rewards attention. Each one gives the narration something to land on.

    Read the guide
  • 3D Animations

    3D loops: spinning text, logos and isometric scenes

    Yes, for the kind of 3D that video work actually uses: extruded text, spinning logos, rotating coins, cube grids and isometric stacks. These render on a 2D canvas as clean geometry, loop seamlessly and export as MP4 or transparent WebM.

    Read the guide