Background video

Full motion specification

How the movement works

Use it on hero sections for travel, hotels, restaurants or recruiting, where atmosphere and motion say more than one photo.

1. 01A 511 × 168 viewport. Background footage (sky, clouds, mountains, sea) fills the hero, with a still headline (28 px, white) and button on top. The footage loops every 4.7 s (twice per 9.4 s pack cycle).
2. 02Clouds: the far layer repeats every 170 px and moves 170 px right per 4.7 s (about 36 px/s); the near layer repeats every 340 px and moves 340 px per 4.7 s (about 72 px/s). The mountains stay still.
3. 03Sea: three waves (y = 118, 130, 146; amplitude 2.5–3 px; wavelength 90, 60, 120 px); only the middle one runs the other way and moves two wavelengths per 4.7 s (the other two move one wavelength to the right).
4. 04For legibility, a 12% navy layer covers the footage, a gradient darkens the left 300 px (opacity 0.45 → 0), and the headline has a shadow (10 px blur).
5. 05A playing badge (pause, muted) sits at the bottom right. On a real site the video uses autoplay, muted, loop and playsinline.