Whyweshippedaherovideoinsteadofaheroimage

Hero images are the default. They load fast, they're easy to art-direct, and you can swap them per campaign without rebuilding anything. They also do a terrible job of communicating atmosphere. A photograph holds the reader's attention for as long as their eye takes to register it. Then the scroll continues.

A loop is different. Six seconds of texture — light moving across a wall, type assembling itself, a hand mid-gesture — gives the visitor something to settle into. The page becomes a place instead of a flyer. The reader doesn't even notice why they paused; they just paused.

There's a real cost. The video is heavier than the image, and lazy hosting will tank Core Web Vitals if you're not careful. We mitigate the obvious way: a poster image loads first (fast, decoded inline), the video starts playing as soon as it's buffered, and a webm fallback hits browsers that can't handle the encode size. The visitor sees a still hero in 200 ms and a moving one a half-second later.

“A hero image proves the page loaded. A hero loop proves the page is worth a second look.”

What you put in the loop matters more than the fact that it loops. Stock cinematography reads as exactly that. The clip on onyxcreative.asia is a six-second still life of work-in-progress: textures, type, the studio's own workspace. It's a self-portrait at one frame per second of attention.

When the loop ends, the reader has already decided whether to keep scrolling. If we did the work right, the rest of the homepage doesn't have to convince anyone of anything — it just has to deliver on the temperature the hero set.