Fondo animadoGratis

Above the Clouds

Una mujer con un vestido blanco, en una colina oscura, frente a una luna pálida y colosal sobre un mar infinito de nubes. Solo se mueven su pelo, el vestido y las nubes.

Sobre el vídeo

Duración: loop de 5,0 s / 24 fps
Loop: Sin corte
Formatos: Escritorio + móvil
Ambiente: sereno, onírico, cinematográfico

Archivos

cdn.orbital.supply

Vídeo de escritorio: 1280 × 720 / 2,2 MB
Vídeo para móvil: 540 × 960 / 0,8 MB
Póster de escritorio: 1280 × 720 / 83 KB
Póster para móvil: 540 × 960 / 50 KB

Control del loop

El último fotograma coincide con el primero tanto como dos fotogramas seguidos (0,877 frente a 0,858 SSIM).

Úsalo

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 / listo para pegar

<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>

Usado en Lune

Mira la web completa construida en torno a este vídeo.

Volver a los fondos