Quiet Loop

A first-screen block with a muted, looping video behind the text. The poster frame paints first and the video is fetched after it, so the first thing on screen is a still image and a readable headline rather than a spinner. If the connection is slow, if the file fails, or if the visitor has reduced motion turned on, the poster stays and nothing else happens.

It comes as an Astro component with the headline, sub-line and two buttons as props. Between the video and the text there is a scrim layer with its opacity and gradient direction exposed as variables, because every clip needs a different amount of it. There are ffmpeg commands in the readme for getting an MP4 and WebM pair down to a sensible size, and a twelve-second test loop so you can see it working before you have your own footage.

You need a video: ten to fifteen seconds, no cuts, nothing that reads as stock footage. Without one this is the wrong thing to buy — Cover Plate or Set in Lead will serve you better. It is also wrong if most of your traffic is on metered mobile data. Even a well-encoded loop is a megabyte or two, and no amount of care changes that.