Sunburn

Sunburn produces video and photography campaigns out of Los Angeles for adidas, Nike, Vans, Beats, Nécessaire and Google, working globally from a small permanent team. What a production company sells is not its client list, it is the way the work feels, and most sites in the trade put that behind a grid of stills, a click and a player — three steps before anything moves. The films had to be the site rather than the illustrations in it, playing before anyone asks for them. And getting from one to the next had to be worth doing on its own: the navigation as evidence of the company's eye, not a menu to be got through.

The work sits on a wheel. Eight featured projects, paired so each one faces its opposite across the circle, turning forty-five degrees at a time — click anywhere off a thumbnail, scroll, or swipe. The thumbnails counter-rotate as it goes, so the images stay upright while the wheel moves under them. Hover one and its film plays behind the circle.

The home page works the other way round: it does not wait for a click. Compositions of one, two or four frames, built by the studio in the CMS, replace each other as the cursor travels — a hundred pixels of movement and the screen has changed. All of it is a single link into the work, so there is nothing to read and nothing to find.

The wordmark is sized by the room each page gives it. Full width on the home, half on the wheel, narrowed to leave space for the menu everywhere else. The same letters, never the same size.

The circle is arithmetic, not an image. Eight projects halve into four pairs, a hundred and eighty degrees divide by four, and each thumbnail is placed at its own angle and then rotated back by the same amount so it never tips. The radius is computed from the height of the window and recomputed when that changes, which is why the wheel fills a laptop and a monitor without either being a special case.

Turning it is three inputs and one state. Wheel, click and swipe all resolve to the same forty-five degrees, with a threshold below which a movement counts as noise and a four-hundred-millisecond lock so that one flick of a trackpad turns the wheel once instead of six times. Previews keep their video element rather than remounting it, so a film pauses when you leave it and carries on where it was when you come back.

The header measures itself. A ResizeObserver reads the wordmark once its width has finished animating, publishes the result as a CSS variable the rest of the layout reads, and uses the same number to slide the header away when the page scrolls down. Nothing is hard-coded, so the name can change size from one route to the next without anything below it needing to know.