Animated backgroundFree

Above the Clouds

A woman in a white dress on a dark hill faces a colossal pale moon over an endless sea of clouds. Only her hair, the dress and the clouds move.

About the film

Duration: 5.0 s loop / 24 fps
Loop: Seamless
Formats: Desktop + mobile
Mood: calm, dreamy, cinematic

Files

cdn.orbital.supply

Desktop film: 1280 × 720 / 2.2 MB
Mobile film: 540 × 960 / 0.8 MB
Desktop poster: 1280 × 720 / 83 KB
Mobile poster: 540 × 960 / 50 KB

Loop check

The last frame matches the first as closely as two frames in a row (0.877 vs 0.858 SSIM).

Use it

Prompt / Claude, Lovable, Cursor

Add a full-screen looping background video behind the hero section ("Above the Clouds" by Orbital Supply).
- Desktop: https://cdn.orbital.supply/tpl-0001/hero.mp4 (1280×720), poster https://cdn.orbital.supply/tpl-0001/hero-poster.jpg
- Screens 640px wide or narrower: https://cdn.orbital.supply/tpl-0001/hero-mobile.mp4 (540×960), poster https://cdn.orbital.supply/tpl-0001/hero-poster-mobile.jpg
- The video is muted, loops, plays inline and autoplays. It covers the whole section (object-fit: cover) and sits behind the content.
- Add a dark gradient from the bottom so the text on top stays readable.
- If the visitor prefers reduced motion, do not play the video: show the poster instead.
- Use these URLs exactly. Do not download, rename or re-host the files.

HTML / drop-in

<video class="bg-video" autoplay muted loop playsinline preload="auto" poster="https://cdn.orbital.supply/tpl-0001/hero-poster.jpg">
  <source src="https://cdn.orbital.supply/tpl-0001/hero-mobile.mp4" type="video/mp4" media="(max-width: 640px)">
  <source src="https://cdn.orbital.supply/tpl-0001/hero.mp4" type="video/mp4">
</video>
<style>
  .bg-video { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
</style>
<script>
  if (matchMedia("(prefers-reduced-motion: reduce)").matches)
    document.querySelectorAll(".bg-video").forEach((v) => { v.removeAttribute("autoplay"); v.pause(); });
</script>

Used in Lune

See the full website built around this film.

Back to backgrounds