Looping videos: how brands make clips that never seem to end

A looping video is a short clip built to repeat forever without anyone seeing where it restarts. For brands it is one of the most useful formats there is: one file can run behind a website headline, on a screen by the till, under a song on Spotify or behind a live stream's holding card. The craft is simple to state. Make the last frame lead straight into the first, keep the motion slow and continuous, and never put a one-off event in the clip, because anything that happens once becomes a marker of the restart.

Where brands use a looping video

Loops suit any place where people arrive at a random moment and stay for an unknown time. Nobody starts watching a shop window at second zero, so a story with a beginning and an end is the wrong shape. A loop has no beginning, which is exactly the point.

Each of these places has its own rules about size and sound. Video backgrounds on websites covers the web case in detail, and ambient video backgrounds deals with the long, calm loops that run on screens and streams.

What makes a loop feel endless

Technically, a loop only needs its end to meet its start. Perceptually, it needs more. People notice repetition through landmarks: the moment a bright patch passes a corner, the frame where a shape enters, a flicker of grain that always lands in the same place. Remove the landmarks and a twelve second clip can feel like it goes on for hours.

• Continuous motion. Drifts, rotations and slow pans that never stop. Stopping and starting creates a beat the eye can count.
• Whole cycles. Everything that moves completes a whole number of turns or passes in the length of the clip, so it ends exactly where it began.
• Several layers at related speeds. A background that cycles once and a highlight that cycles twice disguise each other's repetition.
• No single events. No flash, cut, logo sting or object that appears once. If it happens once, it marks the restart.
• Still words. Text that animates in will animate in again every loop. In a looping video, let the words simply be there.

The frame level detail of a clean join, including the duplicated last frame that causes most stutters, is in seamless loop video.

How long should a looping video be

Length depends on speed and on how long people will look. A loop that someone glances at for three seconds can be short. A loop that plays on a wall all afternoon needs to be long enough, and slow enough, that the repeat never becomes obvious. Longer clips mean bigger files, so balance the two.

How long should a video loop be works through this trade off placement by placement, with file sizes in mind.

How to make a looping video from a design

1. 1

   Start from the place it will play

   Pick the exact size first: 1920×1080 for a landscape screen or hero, 1080×1920 for stories, Reels and portrait screens, 1080×1350 for a feed post.

2. 2

   Choose one moving layer

   Usually the background. A moving gradient or material is ideal, because it has no edges to give the loop away.

3. 3

   Keep the words still and calm

   Place text where the background is quietest. If it must animate, keep the motion inside the background instead.

4. 4

   Set the length to whole cycles

   Make sure every movement completes a whole number of cycles in the clip, so the last frame flows into the first.

5. 5

   Export as video, then watch it loop

   Export MP4, or WebM for the web, and play it on repeat at full size for at least a minute. Fix whatever you notice twice.

This is where Gradiently fits. Every Mark is a living gradient and material background that already moves, so with Pro a design built on it exports as a seamless loop of 5 to 30 seconds without you animating anything. Because no two Marks look alike, the loop in your window will not be the same stock background as the shop next door.

Putting a looping video on a website

Browsers only autoplay video that is muted, and phones need playsinline to keep it in the page. Add a poster image so something appears before the video loads, and offer the smaller WebM first with MP4 as the fallback.

<video class="hero-loop" autoplay muted loop playsinline
       poster="hero-first-frame.jpg" width="1920" height="1080">
  <source src="hero-loop.webm" type="video/webm">
  <source src="hero-loop.mp4" type="video/mp4">
</video>

<style>
  @media (prefers-reduced-motion: reduce) {
    .hero-loop { display: none; }
    .hero { background: url(hero-first-frame.jpg) center / cover; }
  }
</style>

That last rule matters. Some people find constant motion distracting or physically uncomfortable, and their operating system tells the browser so. Prefers reduced motion explains how to honour it properly.