How to Turn Product Screenshots into a Demo Animation
Turn static product screenshots into an animated demo in the browser: import the shots, sequence them on a timeline, add captions and focus, export MP4.
By the end of this guide you will have a short product demo video built from static screenshots, exported as an MP4. You need a KinoViz account and a handful of screenshots. Everything here works on the Free plan except the AI assistant, which needs Creator or above.
What you need
- Four to six screenshots showing the flow you want to explain, cropped consistently.
- Each file within your plan's per-import limit: 10 MB Free, 50 MB Creator, 100 MB Pro, 1 GB Studio.
- Twenty to thirty minutes.
Step by step
1. Prepare the screenshots
Capture the screens in the order a user would meet them, at the highest resolution your display allows. Crop them to the same aspect and the same region of the interface — if the window size jumps between shots, the animation reads as a glitch rather than a sequence.
2. Create a project at the right canvas size
Start a new project and pick the canvas that matches the destination: Landscape (1920 × 1080) for a site hero or YouTube, Portrait (1080 × 1920) for Reels and Stories, Square for feed posts. Set the project length with the duration button in the timeline toolbar — fifteen to thirty seconds covers most demos.
3. Import the screenshots
Drag each file onto the canvas; KinoViz creates an image element automatically. To keep them for future projects, upload through the Asset Library → My Assets → Upload instead. Uploaded assets count against your plan's storage quota: 100 MB on Free, 2 GB on Creator, 5 GB on Pro.
4. Lay out and frame each shot
In Design Mode, position and size the first screenshot, then match the others to it. Two habits keep the sequence steady:
- Put each screenshot at the same X, Y, width and height, so consecutive shots register rather than jump.
- Group a screenshot with its backing shape using Ctrl/Cmd+G so they move and scale as one.
5. Sequence the screens on the timeline
Switch to Animation Mode. Each layer has a clip bar in the timeline marking when it is visible — drag its edges so each screenshot occupies only its own segment. Then cross-dissolve between them:
- At the start of a segment, set the layer's opacity to 0.
- A fraction of a second later, set it to 100.
- Reverse the pair at the end of the segment.
Overlapping the fades by two or three tenths of a second gives a soft hand-off instead of a hard cut.
6. Add movement and focus
A completely static screenshot looks like a slide. Two cheap ways to fix that:
- Slow push in. Keyframe scale from about 100 to 104 across the segment. Small is the point — anything larger softens interface text.
- Direct the eye. Place a shape or arrow over the control you are describing, or raise Layer Blur on surrounding elements so the region you care about stays sharp. Both live in the property panel and both are keyframable.
Image filters such as brightness, contrast and saturation are also animatable if you want a screen to brighten as it becomes the subject.
7. Add captions
Add a text element per screen and keep it visible for the whole segment. A TextFX preset from the typewriter category, available on every plan, brings a caption on without manual keyframing. One short line beats a paragraph, especially at phone size.
8. Export
Open the export dialog from the top bar and choose MP4 — it plays on every social platform, in email and in presentations. Set the resolution and frame rate your plan allows and start the render. The render happens in your browser tab, so leave it open.
Tips
- One idea per screen. If a screenshot needs two captions, it is really two screens.
- Hold longer than feels natural. Three seconds on screen is the floor for anything with readable text.
- Match the crop before you animate. Fixing a mismatched crop after you have keyframed the segment means redoing the keyframes.
- Check it muted at phone size. Most viewers will see it small and silent, so the captions have to carry the story.
FAQ
Do I need screen recording software for a product demo?
No. Static screenshots animated on a timeline are often clearer than a screen recording, because you control the pacing and can hold each state for as long as the explanation needs. Screen recordings can also be imported as video elements if you want to mix both approaches.
How long should a product demo animation be?
Fifteen to thirty seconds is a good target for a landing page or social post — roughly four to six screens at three to five seconds each. Set the length with the duration button in the timeline toolbar so the timeline shows only the time you are using.
How do I keep small interface text readable?
Export at the highest resolution your plan allows — 540p short edge on Free, 1080p on Creator, 1920px short edge on Pro and Studio — and crop into the relevant part of the screenshot rather than showing the whole window. Small type shot wide will not survive video compression.
Can the AI assistant build the sequence for me?
The AI Agent can create and animate elements from a plain text description and is marked Beta. It requires Creator or above, because the Free plan has no AI credits. Use it for a first pass, then adjust timing and captions by hand.
Related
- How to Animate an SVG in the Browser
- How to Make a Logo Reveal Animation
- Design Mode — image filters, layer blur and layout
- Animation & Timeline — clip bars, keyframes and TextFX
- AI Generation — what the AI Agent can and cannot do
- Export Formats
- Pricing