Animated UI demos and device mockup videos
An animated UI video presents an interface through selected screens, transitions and camera moves. It helps viewers notice the part of a product that matters. Motionly supports product-focused motion videos that can show an interface in a device frame.
When to use this workflow
Product designers and app teams making a launch visual, portfolio clip or short feature demonstration.
A motion video example
An existing example from our public showcase, included to illustrate the visual style. The storyboard below is a separate sample brief you can adapt. Explore more videos.
What to bring
Choose the screen, device orientation and one interaction. Supply a public URL or approved product visuals. State whether the screen must remain readable or is being used as an atmospheric visual.
A storyboard you can adapt
Establish the interface
Start wide enough to understand the screen and device.
Focus attention
Move toward the active control rather than moving the camera continuously.
Show the state change
Animate the actual interaction and give the result time to register.
Resolve the composition
Pull back or hold on the result so the clip has an intentional ending.
Copy this video brief
Replace the bracketed fields with your product details, then paste the brief into Motionly with your URL.
Create a 15-second UI showcase of [URL/screen]. Show [interaction] in a [desktop/phone] frame. Begin with the whole screen, move toward [control], show [result], then hold. Keep text readable and preserve the real UI. Use restrained motion.
Review before sharing
- Device framing matches the interface aspect ratio.
- Camera motion helps explain the interaction.
- The smallest important label stays readable in the final export.
What this workflow delivers
This produces a video presentation of the interface. It does not rebuild, redesign or deploy a functioning website, and it is not a Figma prototype export.
Choose a supported output format for the destination, then review the rendered video. See current plans and credits before starting a larger production run.
Common questions
Can I mock up my website in a phone?
You can request phone framing for a video. Use a mobile layout when available; shrinking a desktop screen into a phone usually makes the interface difficult to read.
Is this a clickable prototype?
No. The deliverable described here is a rendered video of the interaction.
Make a video for your product
Bring your URL and an adapted brief. Review the result, then refine it in chat.
Related video workflows
More help for your project