How to Make an Animated Device Mockup Video (MP4)

This is not a social zoom

Tools like Shots.so animate a mockup by zooming a layout or playing a preset on a glass card. That is a real job. It is not a cinematic device move. ScreenLive’s motion is a camera around a 3D device: yaw, pitch, roll, zoom, FOV, pan, and on laptops a lid angle. If you wanted a punch-in on a tweet graphic, Shots is closer. If you want the phone to turn, this is the studio.

What you'll need

• A screenshot or a short clip of the UI
• A desktop browser with WebGL and WebCodecs (for MP4 export)
• Ten to twenty minutes the first time; less once you know the presets

Step 1 — Start from a still that already looks finished

Pick a frame (iPhone, MacBook, Browser, …) and drop the media. Apply a Look or a Starter so the first frame is a photograph. Motion is a delta off that pose. A move on a bad still is a bad video.

Orbit phone, Desk Mac, and the other Starters already include a move. You can replace it. You can also start from a still Look and add motion yourself.

Step 2 — Pick a named camera move

Motion in the dock is eleven named moves, in two families so they can share a shot without fighting.

Device moves (how the subject sits): Orbit ease, Dutch settle, Rise up, Overhead, Fold up. Camera / lens moves (where the lens is): Push in, Pull back, Scan across, Top to bottom, Out and back, Flat truck.

Orbit ease is the default on a new iPhone project: a 64° yaw through the look with a small pitch lift, three keys, smooth easing, and it returns to the start so a loop cuts. At 0.6 strength rather than full, so the first export shows that the file is alive without throwing the phone on its side.

Push in is the close-up. Pull back is the establishing shot. Fold up is MacBook-only. Out and back is the breathing loop for a homepage background.

Step 3 — Edit the keys (they are not a black box)

A preset writes keyframes on the selected shot’s span. The diamond on a slider keys that property at the playhead. REC records as you drag. Copy, paste, nudge, and delete in the lane. Double-click a key to change easing.

The timeline is a list of shots. Each shot owns its media, a headline or logo, and the keys inside its own span. Add a second shot if you want a still then a move, or a phone then a laptop. That is not Mokoo’s shared timeline with taps. It is enough for a short launch clip.

Trim the shot if six seconds is too long. The encoder is frame-exact. A loop for a site hero is often four to eight seconds of Orbit ease or Out and back.

Step 4 — Motion blur, then export MP4 or WebM

Motion blur is a 180° shutter when it is on — the same way a camera would. Turn it on for orbits. Turn it off if you need every UI pixel sharp in every frame.

Export MP4 or WebM. Free Export is 720p with a screenlive.app watermark. $1 once removes the mark and goes to 4K. Capture is still a PNG; it will not give you the movie.

Encoding runs in this browser with WebCodecs (mediabunny muxes the file). There is no cloud queue. A long 4K clip is a workout for the machine, not for a server.

The eleven moves, in plain language

• Orbit ease — a 64° yaw through the look with a small pitch lift. The default on a new iPhone. Loops.
• Push in — dolly toward the UI. Use it to land on a feature.
• Pull back — the establishing shot. Default energy on Desk Mac.
• Dutch settle — starts rolled, eases to level.
• Scan across / Flat truck — lateral pass. Scan is eased; Flat truck is linear and wider.
• Top to bottom — a slow reveal down the screen.
• Rise up — comes up off the desk.
• Overhead — a high three-quarter that settles down.
• Out and back — a breathing loop for a site hero.
• Fold up — lid 105° to 0°. Hinged devices only.

Shots, duration, and the encoder

The timeline is a list of shots you can add, reorder, rename, trim, and delete. A shot holds media, a headline, or a logo — and owns the keys inside its own span. Two shots is a still then a move, or a phone then a laptop. That is enough for a six-second launch clip. It is not a feature-film NLE.

Free Export is 720p with a screenlive.app watermark. $1 once unlocks clean 4K. MP4 is the usual share file. WebM is the usual transparent-background cousin when you need to composite later. Capture is a PNG of the current viewport; it will not save the movie.

A loop for a homepage is often four to eight seconds. Longer than that, and the orbit starts to feel like a turntable. Trim the shot rather than slowing the move until it dies.

When to stay with Rotato or Mokoo

Rotato’s Mac app is still the deeper desktop motion desk, with template packs at $79–$199 (verify on rotato.app/pricing). Mokoo is a browser animation studio with a shared timeline, screen taps, and USB Mirror at $12/month Pro (verify on mokoo.app). ScreenLive is the $1 cinematic clip in a tab, including on Windows, with files that stay here.

A hybrid is common: Rotato on the Mac at work, ScreenLive in a Windows browser, Shots for the social still. Do not buy this studio expecting After Effects or USB live capture.

Soft next step

Open Studio, pick a frame, apply Orbit ease or Pull back, and export a short MP4. If you only needed a still, the iPhone and MacBook how-tos stop before this page.

Related how-tos

• How to Make an iPhone Mockup in the Browser (No Photoshop)
• How to Make a MacBook Mockup from a Website Screenshot
• A Mockup Generator That Does Not Upload Your Screenshots