Same App, Three Motion Styles: Real Animated Mockup Exports

A sunlit desk, a night workstation and a hardware reveal tell different stories, even when the app stays the same. We put Fieldnotes, an original fictional planning app, into three Screenhance templates and exported each one from the Visual Editor.

The videos below are the actual MP4 downloads. The library cards use Screenhance’s standard demo artwork; this comparison replaces it with the same Fieldnotes overview, using wide and portrait layouts. The interface is still artwork. Its buttons and progress bar do not animate independently.

Compare the three results

These are a creative comparison, not a speed benchmark. The hardware, framing, screen crop and canvas shape differ. Keeping the app’s content, palette and eight-second duration consistent makes those creative differences easier to see.

1. Sunlit Duo: give the product a place

Use the Duo Sunlit Desk template · Download this MP4

The oak surface and natural light establish context immediately. The camera moves slowly enough that the overview remains the subject. It is a useful starting point when the surrounding page is already doing the explaining and the visual needs to feel settled.

This photo scene has one editable wide screen. It does not fold. For a moving hinge and separate outer-cover image, use the Duo folding walkthrough.

2. Night MacBook: change the atmosphere

Use the Night Workstation template · Download this MP4

The warm lamp and blue window provide contrast around a quiet interface. The camera arc adds a little movement without lifting the laptop off its desk. This treatment suits a desktop product hero where the setting is part of the mood.

The lid position and lighting belong to the photograph. You can replace and crop the screenshot and tune the layer’s motion. Choose the connected 3D laptop in the MacBook guide if you want an opening lid instead.

3. iPhone 18: hardware first, then the screen

Use the Silver Screen Reveal template · Download this MP4

The opening focuses on the silver finish and wide camera housing. The phone then turns toward the app and holds before returning to its opening pose. Use this when the device reveal earns its time; a reader who needs an immediate explanation may be better served by the sunlit scene.

This is Screenhance’s original illustrative iPhone 18 Pro model. The screenshot remains replaceable. In Mockups → Device film, choose Hardware to screen and adjust the duration. A slower reveal needs enough screen time to repay the wait.

Make the comparison yours

Use the same meaningful product state across the three templates. Prepare a wide screenshot for Duo and MacBook and a portrait version for iPhone. Keep the main task visible in each crop; uploading a desktop page does not automatically create its mobile layout.

Watch each export at the size it will occupy on your page. Check the opening, the moment the screen is most readable, and the loop boundary. The most dramatic move is not automatically the most useful one.

These files were exported in Chrome at 1× with an eight-second loop. Animated exports require Pro. Inspect the file measurements and hashes, or compare formats in our GIF versus MP4 export test.

Put motion where it helps

Use a clear poster, explicit playback controls and reserved video dimensions. These examples load on demand and do not autoplay. That keeps the static product image available before playback and avoids making visitors watch motion to understand the page.

Browse all animated device mockup templates, including folding phones, laptop reveals, tablets and multi-screen compositions.