Tooladoo Free online tools for your files

Animated Device Mockup Video: MP4, WebM, GIF (Beta)

Make a looping 3D device animation from a screenshot or a screen recording: float, spin, swing, reveal or zoom.

Opens: PNG, JPEG, WebP, HEIC, AVIF, GIF, MP4, MOV, WebM, MKV
Saves: PNG, JPEG, WebP, MP4, WebM, MOV, GIF

Create mockup

Screenshot or screen recording
Choose a file… or drop it here
.png, .jpg, .jpeg, .webp, .heic, .heif, .hif, .avif, .gif, .mp4, .mov, .m4v, .webm, .mkv · up to 200 MB
    Replace file

    An image (PNG, JPEG, WebP, HEIC, AVIF, or the first frame of a GIF) or a video (MP4, MOV, M4V, WebM, MKV, up to 5 minutes; the first 15 seconds are used).

    Options
    Device
    Output
    Angle
    Animation

    Transparent works with PNG, WebP, WebM, MOV, the website bundle and GIF (not JPEG or MP4).

    A hex colour, for example #1e293b or #f5f0e8.

    The short side in pixels: 1080p is 1920 × 1080 in 16:9. 4K (3840 px long side) is for pictures; GIFs are at most 480p.

    MP4 plays everywhere but can't be transparent. For a transparent video on a website, choose “Website: WebM + MOV”: WebM plays in Chrome, Edge and Firefox, the HEVC MOV in Safari, and you get the HTML to use both. GIFs are up to 10 seconds.

    Automatic: the length of your video (up to 15 seconds), or a length that suits the animation for a picture.

    Fill crops what doesn't fit (tall screenshots keep their top). Fit shows everything with black bars.

    Automatic turns the phone or tablet sideways for wide screenshots and videos.

    More options

    A soft studio reflection over the screen, as in product photos. Choose None to keep the screenshot's colours untouched.

    GIFs always use 20 fps.

    GIF transparency is all-or-nothing per pixel, so transparent GIFs leave out the soft shadow and blend the device's edges into this colour. Use your page's background colour for clean edges.

    Your files are deleted after processing.

    Turn a screenshot or a screen recording into a short 3D device animation: a phone floating in place, a tablet on a turntable, a laptop opening its lid, a monitor swinging into view. The result is an MP4 that plays in any browser or feed (1080p, or 720p, 480p or 360p for smaller files), or WebM, MOV, a WebM + MOV pair for websites, or GIF.

    How to make an animated mockup

    1. Upload a screenshot, or a screen recording in MP4, MOV, WebM or MKV.
    2. Choose the device and the animation:
      • Float: a gentle bob and wiggle.
      • Turntable: one full turn, showing the sides and the back.
      • Swing: turns left and right.
      • Reveal: turns into view and switches the screen on; a laptop opens its lid.
      • Slow zoom: the camera moves slowly towards the device.
    3. Choose the length. Automatic uses the length of your video (up to 15 seconds), or a length that suits the animation when you upload a picture.
    4. Choose the file type and download the video and its poster image.

    Loops and screen recordings

    Float, Turntable and Swing end exactly where they start, with no repeated frame at the seam, so they loop smoothly on a web page. The screen recording plays in real time on the device's screen: a shorter clip loops, a longer one is cut at the animation's length. Sound is not included.

    Which file type

    • MP4 (H.264) for websites, social media and presentations. It can't be transparent.
    • WebM (VP9) is smaller, and can have a transparent background in Chrome, Edge and Firefox. Safari shows it without transparency.
    • MOV (HEVC) is small and, with a transparent background, carries an alpha layer that Safari shows. Other browsers may not play HEVC.
    • Website: WebM + MOV makes both files from the same frames plus the HTML to embed them: Safari plays the MOV, Chrome, Edge and Firefox the WebM, all with transparency.
    • GIF for places that only take images: at most 480p, 20 frames per second, up to 10 seconds. Transparent GIFs have hard edges, so the soft shadow is left out and the edges are blended into a colour of your choice.

    More about what this tool reads and writes: 3D Device Mockup Generator.

    More with 3D Device Mockup Generator

    • Bulk Image Resizer

      Resize, crop and compress one photo or hundreds at once: JPEG, PNG, WebP, HEIC, GIF, BMP and TIFF, with a target file size.

    • Image Compressor

      Make JPEG, PNG and WebP pictures smaller in KB without changing their size in pixels: by quality, to a target size, or with no quality loss at all.

    • Image Cropper

      Crop one picture or a whole batch to the same area or an exact shape, keeping the format, the quality and even the animation of GIFs.

    • Image Converter

      Convert pictures between more than 30 formats, from HEIC, AVIF, JPEG XL, PSD, SVG and camera RAW to JPG, PNG, WebP, AVIF, GIF or ICO, one file or hundreds.