Tutorial: from timeline to export

Follow the steps below to finish mockup shots entirely in your browser. Allow enough time for rendering before export and avoid switching tabs.

Open editorBrowse templates

Step-by-step

  1. Pick a model

    Choose phones, tablets, laptops, wearables, or flat graphics from the library. Add to the scene, then refine framing in the viewport.

  2. Animate on the timeline

    Add segments and drag handles to set in/out. Select keys to nudge position and rotation from the bottom bar or the inspector.

  3. Swap screen media

    Each segment can carry its own image or short clip. Drag files onto the device or upload from the right-hand panel.

  4. Export

    Pick resolution and frame rate. For alpha, pick a container that supports transparency and avoid interacting until the job completes.

FAQ

Need something else? Email us via the contact page and we will reply on business days.

Exports look soft—what should I change?

Raise resolution and bitrate when hardware allows. For large displays, prefer a 4K preset and supply high-resolution UI captures.

The tab crashes—how do I debug?

Check network and extensions first, then retry in a fresh Chromium profile. Include browser version and repro steps when contacting support.

Why is my MP4 not transparent?

Most MP4 pipelines omit an alpha channel. Choose an alpha-capable format or composite in post when transparency is required.