12 best tools for animated mockups (free and paid)

An animated mockup is a short video of your app or website playing on a device screen, usually with the device or the camera moving. To start free, Jitter and Lottielab give you editable 2D device templates in the browser, while Mockpose and Screen Stage put a screenshot on a 3D phone with nothing to install. Rotato is the Mac app I’d pay for when the clip has to look like a product keynote.

I founded Moonb, and most launch weeks at the studio bring at least one request for “the phone, slowly turning, with the new screen on it.” It has to work on the landing page and in the sales deck that same week, and somebody always wants a vertical cut for social on top. So I went through twelve tools that make this kind of clip, looking for the dull details that end up deciding it: what each one costs, what the free tier lets you export (often less than the homepage suggests), where it runs and which file you get at the end.

The twelve tools side by side

Prices and export limits below are what each tool listed in October 2026, on its pricing page or, failing that, its product page.

3D device mockup tools

Six tools that put your screenshot or screen recording on a modeled device and fly a camera around it. Four of them live only in the browser; Screen Stage has a free browser version plus a Mac app, and Rotato is a Mac app first, with a web version in beta.

1. Rotato

If the clip is going on a homepage, this is the one I’d pay for. Drop in a screen recording, pick a device, set a few keyframes on the timeline, and what comes out looks like it was cut from a product event. The web beta helps with the one person on every team who doesn’t own a Mac.

Rotato’s own tutorial shows the web editor’s timeline, with more than one animation block set on a single device.

2. Screen Stage

For a quick social post, the free browser version is plenty. The Mac app is why Screen Stage made my list, though: during a live demo the 3D phone shows your real app running while you use it, so a webinar or a launch stream starts to look like a keynote. If you never demo live, I’m not convinced the app pays for itself.

3. Mockpose

My starting point when the device has to sit over a colored background in Figma or Keynote. Only transparent video is a premium feature, so you get the device as a transparent PNG and drop it on your layout with no cutting out. Everything free comes out at 720p with the watermark on it. I treat that as a test drive and pay before anything goes public.

4. DeviceFrames

It sits between a template library and a proper 3D app, and for plenty of teams that middle is the right place to be. For the purpose of this article, though, the free tier is a problem: stills only. If you want motion, you are paying for the $19 tier from your first export.

5. Previewed

I like the Plus pack for one specific situation: a single launch that needs ten good assets, then nothing for months. You pay once and forget about it. Teams who ship every month will spend less per clip on Pro, or on another tool here.

6. AppLaunchFlow

Think of AppLaunchFlow as a launch kit that happens to include a mockup animator. A solo developer with one app could use the seven-day pass to get the whole store listing done in a week, which is a good use of nine euros. For the moving phone alone, Rotato or Mockpose give you more say over the camera.

2D motion editors with device templates

Two general animation editors in the browser that happen to ship good device templates. Most of their templates are flat: screens slide, scroll and stack inside a frame. At small sizes, in a feed or inside another interface, I find that reads cleaner than a spinning 3D phone.

7. Jitter

The free one I’d hand a product designer. Its templates already move the way interfaces move (taps, scrolls, screens sliding in), so once your frames are in, it looks like your product and not like somebody’s template. There is one Rotating Smartphones template that turns phones in 3D space, but if you want to direct a camera around a modeled device, the first group does that better. I broke down twelve real examples of this kind of motion in my UI animation examples.

The step most mockups need is getting a screen recording inside the frame, and Jitter’s basics lesson on adding and animating videos covers it.

8. Lottielab

Pick Lottielab if the same mockup will also run on your site as a light animation. Lottie is vector, so it stays sharp at whatever size the layout asks for. For a social clip alone, the free MP4 does the job, and our list of free Lottie animation sites has ready-made loaders and icons to put around it.

Mockup and template libraries

With the last four you start from a ready-made scene, say a phone on a desk or a laptop in a dark room, and drop your screen or recording in. Whatever moves is either baked into the template or playing on the screen. You give up control and skip most of the setup.

9. Artboard Studio

Artboard Studio is still going, with a newer app running next to the legacy one. Where I’d reach for it is a case study page, when one scene style has to hold a phone next to packaging and print. For a launch clip where the camera circles the phone, I’d still start in the first group.

10. Placeit

If you need a phone in somebody’s hand for a paid social test by this afternoon, nothing on this list is faster. Look at which device the template uses before you download, because a home button and thick bezels around a brand-new app make the whole ad look dated.

11. Canva Mockups

Canva is the answer when the people editing the mockup aren’t designers. A week after launch, someone in sales can swap the screen recording without asking anybody. The motion is basic, fine for a deck or an internal update and a bit thin for a homepage. The brand kit and template habits that keep those edits on brand are in my guide to using Canva like a pro.

12. ls.graphics animated mockups

The most work on this list, and only worth it if you already spend your days in After Effects. You open the project, replace the screen comp and render. The device looks filmed, and you still have every After Effects tool for type and transitions on top. Without After Effects, skip this one; our After Effects alternatives roundup covers what to use in its place.

Make an animated mockup in 10 minutes

Any of the browser tools above will do. Jitter and Mockpose are the easiest to try, since both export video on the free tier.

1. Record the screen before anything else: 5 to 8 seconds of the real app doing one thing, like a tap or a scroll, at the device’s native resolution and with notifications off.
2. Pick the device your audience holds, an iPhone for a consumer app or a laptop for a B2B dashboard, and make it a current model.
3. Drop the recording on the screen and choose one move, a slow push-in or a short turn. Two moves in eight seconds is usually one too many.
4. Set the background last. A brand color or a soft gradient works on social; for a website hero, export a transparent still or a clean background that matches the page.
5. If you want the device over a photo or a styled backdrop, export it with a transparent background and stack it in an image editor. MyImageUpscaler’s roundup of apps for layering pictures compares ten of them, from Photoshop and Affinity Photo to Photopea and GIMP.
6. Export in the size the placement needs (9:16 for stories and Reels, 16:9 for a website or deck), then watch it where it will actually run before it goes out. For most of these clips that means on a phone, with the sound off.

App store previews follow stricter rules

Don’t upload the turning phone as your App Store app preview. Apple’s guidance says app previews use “footage captured on device,” that “App previews must show only content within the app itself,” and that you shouldn’t “film people interacting with a device.” Each preview can be up to 30 seconds long, with up to three per language, and they autoplay muted on the product page and in search results, per Apple’s App Previews page.

My mockups go on the website and in the deck. App Store Connect gets a clean screen recording with captions. One more line from Apple is worth applying everywhere: transitions shouldn’t imply functionality the app doesn’t have, so if a screen in your mockup is still a concept, say so on it.

A mockup only ever shows one screen moving nicely. Once the launch needs a whole workflow explained, with a voiceover over real data, it’s a product demo video production job; our app demo video examples show what that looks like when it’s done well.