sea-bed.webm / sea-bed.mp4

The sky under the sea. This clip is sampled as the sea floor by the hero shader: the water refracts it, the caustics light and shade it, and the two glass stars magnify it as they pass over. It is never displayed directly — the <video> element on the home page is transparent and exists only so the GPU has something to upload a frame from.

Source Clouds Formation Changes in the Sky
Author Viktoria B.
Platform Pexels
Licence Pexels License — commercial use permitted, modification permitted, attribution not required
Original 1920x1080, 30fps, 12.0s, 7.0 MB h264

Attribution is not required by the licence. It is recorded here anyway, because a studio that publishes its own byte counts should be able to say where every asset came from.

What was done to it

Run in ffmpeg, once, by hand — this is not a build step, and the encoded files are committed:

  1. Made to loop seamlessly. The last two seconds are cross-faded over the first two, and the result is the crossfade followed by seconds 2 to 10. The output therefore begins and ends on the same frame, so there is no cut.
  2. Slowed 2.6x, to 24fps. The original is a normal timelapse and reads as weather on fast-forward. The hero is meant to be nearly still until a visitor disturbs it, and a background moving at its own pace the whole time fights that. At this speed it is a drift.
  3. Desaturated to 0.45 and very slightly darkened. The rest of the grade is done live in the shader, where it can be tuned without re-encoding — and where it has to happen anyway, because the headline sits on top of this and the crush that keeps it at 8:1 is a function of the water as well as the film.
ffmpeg -i clouds.mp4 -filter_complex "
  [0:v]trim=0:2,setpts=PTS-STARTPTS[head];
  [0:v]trim=2:10,setpts=PTS-STARTPTS[body];
  [0:v]trim=10:12,setpts=PTS-STARTPTS[tail];
  [tail][head]blend=all_expr='A*(1-(T/2))+B*(T/2)'[mix];
  [mix][body]concat=n=2:v=1:a=0[loop];
  [loop]setpts=2.6*PTS,fps=24,eq=saturation=0.45:contrast=1.06:brightness=-0.06,
        format=yuv420p[v]" -map "[v]" -an -c:v libx264 -crf 18 -preset slow loop-master.mp4

ffmpeg -i loop-master.mp4 -c:v libvpx-vp9 -b:v 0 -crf 36 -row-mt 1 \
  -tile-columns 2 -g 240 -pix_fmt yuv420p -an sea-bed.webm
ffmpeg -i loop-master.mp4 -c:v libx264 -crf 27 -preset slow -profile:v high \
  -pix_fmt yuv420p -movflags +faststart -g 240 -an sea-bed.mp4