How to make a motion background (6 ways, ranked by effort)

Most "how to make a motion background" guides start with software you need to install. This one starts with a method that runs on this page. Here are all six, ranked from least to most effort — pick your row, jump to the section.

Method 1 — Make one right now, in your browser

The demo below is a real motion background: a clip pre-rendered into image frames that scrub as you scroll inside the frame. Change the text and colors, or upload your own clip — then copy the embed code or download a self-contained HTML file. Free, no signup.

Upload limits, so you know before you pick a file: max 100 MB video, first 100 seconds used, capped at 350 scroll frames (a full 100 s upload is sampled at 3.5 fps). Short clips keep more of their motion. For the full-size version of this tool — with more styles and presets — use the free motion background maker.

Method 2 — Generate one with AI from a prompt

If you don't have footage and don't want stock, describe the background you want and let AI build it. In the Scrollytelling editor this happens automatically when you create a story (and you can regenerate with your own prompt). Honest print: this route runs in the editor and uses credits — it's the one method on this page that isn't free-forever.

The pipeline is three steps: a still image is generated first, an image-to-video model animates it into a 20-second clip, and the clip is split into scroll frames. From our own product data over the last 30 days on Scrollytelling (549 motion backgrounds generated):

• Hero still-image render time: median 5.3 s, p90 10.4 s.
• Image-to-video render time: median 35.9 s, p90 46.6 s.
• Total AI time for one motion background (still + video): median 41.5 s, p90 72.4 s.

Reliability, same window: the video step succeeded on the first attempt 549/549 times; stills were 99.3% first-attempt. In practice you type a sentence, and well under two minutes later a finished motion background is scrubbing behind your headline.

Create a story in the editor to try it — the first one is free.

The prompt recipe: what 549 real prompts actually say

Because every AI motion background on Scrollytelling starts from a text prompt, we can measure the vocabulary of backgrounds people actually ship. Across the 549 motion-background prompts from the last 30 days, the words that dominate:

The camera grammar is even more lopsided: "dolly-in" appears in 94.5% of prompts (519/549), "push" in 52.8% (290), "parallax" 6.0% (33), "orbit" 2.6% (14) — and 53% (291) explicitly demand "no cuts". Mood-wise, 52.5% of prompts are dark-mood versus 8.2% explicitly light/bright — a 6.4:1 dark bias (38.4% specify neither).

Assemble those numbers into a sentence and you get a template you can paste into any image-to-video tool:

Slow dolly-in through [your scene], smooth continuous camera push, volumetric light, fine dust particles drifting, subtle motion, dark moody atmosphere, cinematic, no cuts.

Why these words work: "slow" and "subtle" keep the motion from fighting your foreground text; "dolly-in" and "no cuts" give one continuous move that scrubs cleanly on scroll; "volumetric light" and "particles" add depth that survives compression. The full breakdown — models, render times, failure modes, and the complete word table — is in our study of 549 AI-generated motion backgrounds.

Method 3 — Film or upload your own clip

You don't need a drone or a gimbal — you need the same thing the prompt data keeps asking for: one slow, continuous camera move. Hold your phone steady and walk slowly toward your subject (a hand-held dolly-in), or lock it off and let the scene move — steam, water, traffic, leaves. Avoid cuts, whip-pans and shaky footage: a scroll-scrubbed background plays your clip forward and backward, and any jitter reads twice.

1. Shoot 10–20 seconds

   One move, one direction, no cuts. Landscape orientation for desktop-first pages.

2. Trim to the good part

   Remember the limits: max 100 MB video, first 100 seconds used, capped at 350 scroll frames — a shorter clip means more frames per second of footage, so scrubbing feels smoother.

3. Upload it

   Drop it into the maker (no signup) or into the editor as your story's hero background, and the frames are extracted for you.

Method 4 — Write it in CSS or canvas

For some backgrounds, code beats video: a moving gradient or a particle field costs a few kilobytes instead of megabytes of frames, scales to any resolution, and never shows compression artifacts. The trade-off is that everything must be describable mathematically — gradients, noise, particles, waves. Here's a complete animated-gradient background:

.motion-bg {
  position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(120deg, #0b0b10, #312e81, #0e7490, #0b0b10);
  background-size: 300% 300%;
  animation: drift 18s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

Add a <canvas> with a few dozen slowly drifting dots and you've hand-coded the "fine dust particles" that half of all AI prompts ask for. Respect prefers-reduced-motion, and keep it slow — the 96.7% of prompts that say "slow" are right.

Don't write code? The no-code equivalent of this method is our widgets: scroll video for scrubbed backgrounds and video background for autoplay loops — both free to customize and embed.

Method 5 — Canva, After Effects, or stock loops

The classic route, and for some jobs still the right one. As of August 2026: Canva and CapCut both pitch animating elements over a background and exporting an MP4 in a few clicks; After Effects remains the ceiling for broadcast-quality loops (particles, plugins, exact loop points) at the cost of a subscription and a real learning curve; and the stock route is enormous — Storyblocks alone advertises over 110,000 animated background clips, with Pixabay and Videezy offering thousands free. There are also single-purpose browser tools: Krumzi, for instance, advertises free looping gradient MP4s with no signup — though gradients appear to be all it offers.

When this method wins: you need an MP4 file — for a video edit, a stream overlay, a presentation, worship projection software — rather than a web page background. When it loses: on the web, a big looping MP4 is heavy, ignores the reader, and still needs code to sit behind your content. We compared every tool in this category in our background animation software roundup.

Method 6 — Start from a template with the background already wired

The zero-decision route: open a page where a motion background is already doing its job, and swap in your content. Every Scrollytelling template is a real, finished story — most open with a motion background hero — and the motion backgrounds gallery collects real generated backgrounds you can preview and build on. A few, straight from the product:

Hover or tap a tile to play it. Pick a template, and the background — frames, scrub wiring, mobile behavior — is already done.

Which method should you pick?

Frequently asked questions