How to make a looping animated background

Not every moving background has to loop. Plenty run once, or play long enough that nobody reaches the end. But if yours does repeat, the cut is the part people notice. This page is about six ways to move a composition so the last frame runs into the first with nothing to see.

What makes a loop seamless

A loop is seamless when the last frame and the first frame are the same. Play it on repeat and there is no moment where the picture jumps.

Two ways to get there:

With footage: Trim until the two ends nearly agree, then hide the rest.
With generated motion: Build the movement out of something that comes back round on its own. A circle. A wave. Anything that repeats.

The second kind cannot have a seam. The last frame is not merely close to the first. It is computed from the same inputs.

This page takes the second route, using Flield, a seamless background generator that runs in the browser. Every panel below is drawn live by the same code the app uses. Where a name is Flield's own rather than the general term, it says so.

When a loop is worth it

A loop earns its keep when a background repeats often and stays on screen:

A hero section someone scrolls past slowly.
A card sitting in a list.
A texture behind a form.

A cut every few seconds in the corner of the eye is the kind of thing people feel before they can name it.

It matters less than you might think in other places:

A short intro that plays once and stops has no seam to hide.
Motion tied to scrolling never repeats on its own clock.
A long ambient clip may loop so rarely that a soft crossfade is a perfectly good answer. Video also gives you photographic detail that this tool cannot.

The rest of this page assumes you want the repeat, which is the case this tool was built for. If you do not, most of it still applies apart from closing the cycle.

The six motions

Loop, Drift, Wind, Pulse, Ripple and Tide are Flield's names for six ways of moving a composition. The idea underneath, motion built from something periodic, is not the app's own.

All six below are running live on the same composition. Only the kind of movement differs.

Loop

Drift

Wind

Pulse

Ripple

Tide

Each panel runs one full cycle and starts again. The point is that you cannot tell where.

Loop: Breathes around a closed path and returns where it started, the two layers turning opposite ways.
Drift: Travels one way and wraps into itself.
Wind: Holds its ground while a gust bends it and fine detail streams through.
Pulse: Holds still and swells.
Ripple: Drops rain on the surface and lets the rings cross.
Tide: Bends each layer around the other layer's ridges, then lets go.

How long a cycle lasts

A loop needs a length as well as a shape. Pick a Motion and a Speed slider appears under it. It sets how long one cycle runs, from one second up to sixteen.

An export uses that same number. A GIF records whole cycles, so four seconds gives a four second file.

Depth, Direction, Collide and Reroll every

Depth: How far the motion goes, from a quarter of its usual reach to twice it.
Direction: Runs the cycle backwards. It is how Drift and Wind travel against the flow without the still changing.
Collide: Makes the two layers push on each other while they move.
Reroll every: How often Auto-randomize throws the composition away and builds a new one. Speed says how fast the one you have moves. Most backgrounds want one of these and not the other, so they are two separate sliders.

Each layer tab also has a Motion of its own, so one layer can loop while the other drifts.

The Speed slider starts at one second rather than lower. A cycle is one change of brightness across the whole frame, and one a second stays well under the three that WCAG 2.3.1 allows. Worth keeping in mind for whatever you build with the file, too.

What moves in each texture

That depends on the layer's texture.

The four shaded textures: Loop, Drift and Wind move the field, and the pattern follows along. Pulse and Ripple leave the field alone and swing the density over it. Tide bends each layer's field with the other layer's.
Streamlines and Weave: These two trace particles. Drift and Wind send the particles running along the field. Pulse grows and shrinks their trails. Ripple bends them as its rings pass. Tide sweeps them along the other layer's ridges.

The cycle closes either way. Each particle lives for exactly one cycle, then starts again from where it began.

Why generated motion loops without a cut

The usual way to loop a recording is to trim until the ends nearly agree, then crossfade over what is left. That works, and for a lot of footage it is the only option. The seam does not go away though. It gets softened.

Nothing is trimmed here. The motion is a parameter, not a recording. Every frame comes from a phase value between 0 and 1, and each kind of movement is built from something that repeats over that phase. A point travelling a circle. A lattice that wraps at a fixed interval. A sine wave.

When phase reaches 1 the inputs are identical to phase 0, so the frames are identical too. The loop is not matched. It is guaranteed.

That is the same argument as the seamless tile, one dimension over. There, mirroring makes the left edge equal the right. Here, periodicity makes the last frame equal the first.

Which file format to use

This is where most guides wave a hand, so here is the actual answer, including where this tool is the wrong one.

First, consider not using a video at all

If the background is a texture rather than a scene, the right file is a small seamless tile that CSS repeats, not a full-width anything. A 512 by 512 animated tile covers a 4K hero for a fraction of the bytes. It scales to any viewport for free. It needs no <video> element, no autoplay policy, no poster frame and no fallback. It is both the cheaper answer and the one with less to go wrong.

.hero {
  background-image: url("tile.gif");
  background-repeat: repeat;
  background-size: 256px 256px;
}

When you do need one large moving image

A composition that doesn't tile, or motion that has to cross the whole frame, needs a single large file. The honest comparison:

Format	Good for	The catch
GIF	Tiles, hover states, anything up to a few hundred pixels square	Compression is decades old, so it grows quickly with dimensions. Fine at 512, heavy at 1920.
MP4 (H.264)	Full-width hero backgrounds, where it plays everywhere including iOS	Built for photographic video. Flat color and hard edges are its worst case, so it needs a generous bitrate to avoid haze around edges.
WebM (VP9)	Handles flat color and sharp edges better than H.264 at the same bitrate	Patchier support on Apple devices, which is exactly where a hero background most needs to work.

One correction to the usual advice. GIF is often dismissed for its 256-color palette, and for photographic content that is fair. This artwork uses three colors, so the palette is not the constraint. A three-color GIF compresses extremely well, because long runs of one color are what its compression was built for.

GIF's real limit is dimensional. The file grows with area faster than a modern codec's does. So if you keep the image small and repeat it, GIF is not a compromise at all.

Flield exports animated GIF today. MP4 is the format under consideration.

Using a video background

<video autoplay muted loop playsinline poster="first-frame.png">
  <source src="background.mp4" type="video/mp4">
</video>

All four attributes are load-bearing. Without muted and playsinline, mobile browsers refuse to autoplay or take the video fullscreen. The poster covers the gap before the first frame decodes. It is also what someone sees if their browser or their data saver declines to play video at all.

Respect prefers-reduced-motion. A moving background is decoration, and for some people it is a genuine problem rather than a preference. Flield honours it too: a link carrying a motion opens still rather than playing itself. Serve the poster frame instead, which the exports here make easy: a still PNG of the same composition is one more export from the same settings.

Why there is no MP4 export yet

Flield runs entirely in the browser, with no server, no build step, and one vendored dependency. Any new export has to hold that line.

That rules out the usual answer, which is to ship a WebAssembly build of FFmpeg. Tens of megabytes for one more format is not a trade this tool should make.

The viable route is the browser's own WebCodecs API. It encodes frames natively, and a small multiplexer wraps them into a file. That keeps the addition to one more vendored script, about the size of the GIF encoder already here.

It also gives exact control over every frame. A frame duration that is even slightly off is the one thing that would break a loop which is otherwise guaranteed.

If you'd find that useful, say so on the issue tracker. It is the clearest signal for what gets built next.

Try it

Open Flield, free with no signup, and pick a Motion in the General tab. It plays on the canvas straight away. That is exactly what an export records. The Speed slider under it sets how long a cycle runs.

For the rest: the guide covers the export controls. The flow field explainer covers the six textures moving underneath. The tiling page covers making it repeat.

Flield is free for noncommercial use under the PolyForm Noncommercial License.