# Camera Moves for UI and Product Videos: Zoom, Dolly, Pan, Orbit and 8 More


A camera move is how a product video tells the viewer where to look. The most useful ones for UI videos are a **zoom** or **push in** to point at something, a **tracking** glide from one feature to the next, a **pan** or **tilt** to explore a long screen, and an **orbit** or **turntable** to show a product off. Use one move per shot, keep it slow enough that any text on screen stays readable, and save the dramatic moves (whip pans, spins, fly-throughs) for launch trailers.

Below are twelve moves with a five-second example of each. Every clip was made in [Lumora](/) (our tool) from one screenshot of a sample invoicing app; the name under each clip is the camera's name in Lumora.

## Why move the camera at all?

On a static screen, the viewer's eye wanders. A camera move gives it a path: closer means "this matters", a glide means "and now this", pulling back means "here's the whole picture". That's the same language film uses, and viewers read it without thinking.

On screenshots, the camera is also what makes the image a video. Without it you have a slideshow.

## The basics: zoom, dolly, pan and tilt

The National Film Board of Canada's [glossary of camera moves](https://blog.nfb.ca/?p=1797) defines the classics simply: a **pan** "swivels sideways", a **tilt** is "a vertical pan", a **dolly** is a wheeled platform that lets the camera glide towards or away from the subject, and a **zoom** uses the lens to create the illusion of movement. In a UI video they do different jobs.

<div class="clip-grid">
<figure>
<video src="https://lumora.video/blog-media/camera-moves-for-ui-videos/zoom.mp4" poster="https://lumora.video/blog-media/camera-moves-for-ui-videos/zoom.jpg" width="640" height="360" muted loop playsinline controls preload="none" data-autoplay></video>
<figcaption><b>Zoom (punch in).</b> The flat screen scales up towards one point. Lumora: Flat camera with a zoom-in.</figcaption>
</figure>
<figure>
<video src="https://lumora.video/blog-media/camera-moves-for-ui-videos/dolly.mp4" poster="https://lumora.video/blog-media/camera-moves-for-ui-videos/dolly.jpg" width="640" height="360" muted loop playsinline controls preload="none" data-autoplay></video>
<figcaption><b>Dolly in (push in).</b> The camera travels towards a tilted screen, so the perspective changes. Lumora: Dolly in.</figcaption>
</figure>
<figure>
<video src="https://lumora.video/blog-media/camera-moves-for-ui-videos/pan.mp4" poster="https://lumora.video/blog-media/camera-moves-for-ui-videos/pan.jpg" width="640" height="360" muted loop playsinline controls preload="none" data-autoplay></video>
<figcaption><b>Tilt (pan down).</b> Close up at the top of the screen, then down it. Lumora: Pan down.</figcaption>
</figure>
<figure>
<video src="https://lumora.video/blog-media/camera-moves-for-ui-videos/whip.mp4" poster="https://lumora.video/blog-media/camera-moves-for-ui-videos/whip.jpg" width="640" height="360" muted loop playsinline controls preload="none" data-autoplay></video>
<figcaption><b>Whip pan.</b> Holds, then snaps across to the next area. Lumora: Whip pan.</figcaption>
</figure>
</div>

### Zoom: "look here"

A zoom scales the picture towards a point, with no change in angle. It's the move screen recorders add automatically on clicks, and the clearest way to say "this button". Use it in tutorials and walkthroughs, where viewers need to see exactly what's clicked. Keep zooms between about 1.5x and 2x; past that, small UIs get blurry and viewers lose track of where on the screen they are.

The NFB's note on the **crash zoom**, a very fast zoom, applies here too: "use with caution". A snap zoom works once, on a beat. Five of them in a row make people dizzy.

### Dolly in: "come closer"

A dolly moves the camera itself. On a screen shown at an angle, that means the perspective shifts as the camera travels: near parts grow faster than far ones. It feels more physical and more cinematic than a zoom. Use a slow push in on the opening shot, and a pull back (dolly out) to reveal the whole screen before the end card.

### Pan and tilt: "explore this"

A pan swings sideways across a wide screen; a tilt moves up or down a tall one. They're the natural moves for long things: a landing page, a feed, a settings list, a wide table. Move at a steady speed and stop on the part you want people to read.

### Whip pan: "and now, something else"

A whip pan is a pan so fast the picture blurs. It works as a transition between two areas of the product, and it gives a launch trailer energy. It doesn't work in a tutorial, where viewers need to keep their place.

## Moves that follow the story: tracking and feature tour

<div class="clip-grid">
<figure>
<video src="https://lumora.video/blog-media/camera-moves-for-ui-videos/track.mp4" poster="https://lumora.video/blog-media/camera-moves-for-ui-videos/track.jpg" width="640" height="360" muted loop playsinline controls preload="none" data-autoplay></video>
<figcaption><b>Tracking.</b> The camera stays close and glides from callout to callout. Lumora: Feature tour.</figcaption>
</figure>
<figure>
<video src="https://lumora.video/blog-media/camera-moves-for-ui-videos/float.mp4" poster="https://lumora.video/blog-media/camera-moves-for-ui-videos/float.jpg" width="640" height="360" muted loop playsinline controls preload="none" data-autoplay></video>
<figcaption><b>Float.</b> A gentle hover with almost no travel, like a keynote stage. Lumora: Float.</figcaption>
</figure>
</div>

In film, tracking means the camera moves along with the subject. In a UI video, the "subject" is the viewer's attention: the camera stays close and glides from the first feature to the second to the third, so each one reads up close and the transitions explain how they connect. This is the most useful move for a SaaS demo, because it's the story of the video in camera form.

**Float** is the opposite: the camera barely moves. It's the right choice when the UI itself is busy (animations, a recording with lots happening), or when the tone should be calm. A float still beats a dead-still frame, which can look like the video froze.

## Showcase moves: orbit, turntable, crane and spin

These treat the screen as an object in 3D space. They're great in launch trailers and hero sections, where the goal is "this looks good" rather than "here is how it works".

<div class="clip-grid">
<figure>
<video src="https://lumora.video/blog-media/camera-moves-for-ui-videos/orbit.mp4" poster="https://lumora.video/blog-media/camera-moves-for-ui-videos/orbit.jpg" width="640" height="360" muted loop playsinline controls preload="none" data-autoplay></video>
<figcaption><b>Orbit.</b> The camera circles the screen while moving closer. Lumora: Orbit.</figcaption>
</figure>
<figure>
<video src="https://lumora.video/blog-media/camera-moves-for-ui-videos/turntable.mp4" poster="https://lumora.video/blog-media/camera-moves-for-ui-videos/turntable.jpg" width="640" height="360" muted loop playsinline controls preload="none" data-autoplay></video>
<figcaption><b>Turntable.</b> The screen turns at a steady speed, like a product on a stand. Lumora: Turntable.</figcaption>
</figure>
<figure>
<video src="https://lumora.video/blog-media/camera-moves-for-ui-videos/crane.mp4" poster="https://lumora.video/blog-media/camera-moves-for-ui-videos/crane.jpg" width="640" height="360" muted loop playsinline controls preload="none" data-autoplay></video>
<figcaption><b>Crane.</b> Starts high above the screen and comes down to a low angle. Lumora: Crane.</figcaption>
</figure>
<figure>
<video src="https://lumora.video/blog-media/camera-moves-for-ui-videos/spin.mp4" poster="https://lumora.video/blog-media/camera-moves-for-ui-videos/spin.jpg" width="640" height="360" muted loop playsinline controls preload="none" data-autoplay></video>
<figcaption><b>Hero spin.</b> A phone (here a generic Android frame) starts edge-on and spins to face the viewer. Lumora: Hero spin.</figcaption>
</figure>
</div>

- **Orbit (arc):** the camera circles the subject. It shows depth and makes a flat screenshot feel like a physical product. Slow orbits look premium; fast ones look like a screensaver.
- **Turntable:** the subject turns instead of the camera, at a constant speed. Because it doesn't ease in and out, it reads as a calm product display. Good under a headline.
- **Crane:** the NFB describes craning as "raising or lowering the camera". Coming down from a top-down view to a low angle gives an opening shot scale.
- **Hero spin:** the keynote move for phone apps. Use it once, at the start, then let the app do the talking.

One caution for iOS and Mac apps: Apple's [marketing guidelines for App Store apps](https://developer.apple.com/app-store/marketing/guidelines) don't allow "animating, flipping, or spinning" Apple product images, tilting them, or "rendering in 3D or creating any simulation of an Apple product". In video, Apple allows an establishing shot of the whole device, then panning and zooming to your app. So keep spins, orbits and turntables to generic or Android frames, or to the app screen on its own, and show iPhones, iPads and Macs straight on.

## Big moves: fly-through and isometric drift

<div class="clip-grid">
<figure>
<video src="https://lumora.video/blog-media/camera-moves-for-ui-videos/fly.mp4" poster="https://lumora.video/blog-media/camera-moves-for-ui-videos/fly.jpg" width="640" height="360" muted loop playsinline controls preload="none" data-autoplay></video>
<figcaption><b>Fly-through.</b> Flies straight into the UI and back out. Lumora: Fly-through.</figcaption>
</figure>
<figure>
<video src="https://lumora.video/blog-media/camera-moves-for-ui-videos/iso.mp4" poster="https://lumora.video/blog-media/camera-moves-for-ui-videos/iso.jpg" width="640" height="360" muted loop playsinline controls preload="none" data-autoplay></video>
<figcaption><b>Isometric drift.</b> A fixed isometric angle that drifts across the UI. Lumora: Isometric.</figcaption>
</figure>
</div>

A **fly-through** dives into the screen, which makes a strong transition into a detail or into the next scene. An **isometric drift** holds the "product shot on a table" angle and slides across it; it suits technical products, dashboards and developer tools, where it reads as a blueprint.

## Which camera move should you use?

| You want the viewer to… | Use | Avoid |
|---|---|---|
| See exactly what's clicked | Zoom | Orbit, spin |
| Feel the product is premium | Slow dolly in, orbit, turntable | Whip pan |
| Follow three features in order | Tracking (feature tour) | Several unrelated moves |
| Explore a long page or feed | Tilt / pan down | Fly-through |
| Feel launch-day energy | Whip pan, fly-through, hero spin | Float |
| Read a lot of text | Float, or no move while the text is up | Any fast move |

## Rules that make any move look better

1. **One move per shot.** A shot that pushes in, then orbits, then whips reads as a demo of the camera, not of the product.
2. **Ease in and out.** Real cameras accelerate and slow down. Linear motion looks mechanical, except in a turntable, where the steadiness is the point.
3. **Settle before text.** Start the callout when the move ends. Reading moving text is hard.
4. **Cut on the beat.** If the video has music, end moves on beats and cut between shots on the strongest ones.
5. **Mind the resolution.** Every zoom reveals the pixels underneath. Capture at 2x if you can; see [how to make a demo video from screenshots](/blog/demo-video-from-screenshots).
6. **Be kind to sensitive viewers.** Large or fast motion can bother people with vestibular disorders. On your own site, [respect `prefers-reduced-motion`](https://web.dev/articles/prefers-reduced-motion) by showing a still poster instead of an autoplaying video; our [landing page hero video guide](/blog/landing-page-hero-video) has the code.

## How to add camera moves in Lumora

Every look in Lumora starts with a camera move, and the camera list has 18 of them, including all twelve above. Pick one, and its keyframes appear on the timeline, timed to your video's length. Drag a keyframe to change when the camera gets there, select it to change the angle and distance, or add callouts and let the Feature tour camera glide between them on its own. The same moves work on screenshots, screen recordings and phone or desktop app frames, and you can [try them free](/) with a template.
