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 four ways to move a composition so the last frame runs into the first with nothing to see.
The short definition
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.
Getting there with footage means trimming until the two ends nearly agree, then hiding the rest. Getting there with generated motion means building 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, because the last frame is not merely close to the first. It is computed from the same inputs.
This page is about the second route, shown with Flield, a 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
It 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 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, and video gives you photographic detail that this tool cannot.
What follows assumes you want the repeat, because that is the case this tool was built for. If you do not, most of it still applies except the part about closing the cycle.
The four motions
Loop, Drift, Wind and Pulse are Flield's names for four ways of moving a composition. The names are the app's own. The idea underneath, motion built from something periodic, is not.
All four below are running live, in this page, on the same composition. Only the kind of movement differs. Each completes one full cycle and starts over, and the point is that you can't tell where.
Loop
Drift
Wind
Pulse
Loop breathes around a closed path and returns where it started. Drift travels one way and wraps into itself. Wind travels and bends as it goes, like a gust crossing the frame. Pulse holds still and swells.
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. Set four seconds and you get a four second file. Drop it into a page and let it repeat.
The 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.
Reroll every, just below it, does something else. That slider says 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.
What moves depends on the layer's texture too. Four of the six shade the grid. For those, a motion moves the field and the pattern follows along.
Streamlines and Weave trace particles instead. Drift and Wind send the particles running along the field. Pulse grows and shrinks their trails. The cycle still closes. Each particle lives for exactly one cycle, then starts again from where it began.
Why these close on their own
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. Each kind of movement is built from something that repeats over that phase. A point traveling 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 isn't matched, it's 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, which matters here. GIF is often dismissed for its 256-color palette, and for photographic content that is fair. This artwork uses three colors. The palette is not the constraint, and a three-color GIF compresses extremely well, because long runs of one color are exactly what its compression was designed for. GIF's real limit is dimensional: the file grows with area faster than a modern codec's does. Which is another way of saying that 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.
On adding MP4
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, which encodes frames natively, plus a small multiplexer to wrap 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. That control matters. 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 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.