mesh3d turns a metrics page into a Three.js scroll

A page of statistics about a gallery is one of the least promising briefs on the web. Majo Puterka took it anyway and built it in Three.js. The State of the Gallery won awwwards Site of the Day on 22 August with a 7.3, and picked up a Developer Award on the same submission.

The page belongs to mesh3d, a curated index of real-time Three.js work. Its job is to report on itself: what's catalogued, who's making the strongest work in the index, what's at the top today. Most sites publish that as a blog post with three bar charts. This one renders it.

The hero is set like a cover

Two words sit top left. Three more run along the bottom right at the same size. Between them the standfirst floats in the middle of the frame at about a fifth of the scale, in caps, letterspaced wide. One typeface, one light weight, three sizes, and the whole viewport works as a single canvas instead of a column of blocks.

Everything else gets pushed into the corners. SCROLL TO DIVE IN top left, AUDIO OFF top right, SHARE and MADE BY MAJO PUTERKA along the bottom. Four labels, all caps, all small. Nothing sits near the type.

The ground is #08090D, close enough to black to read as black. Over it a green particle field drifts and folds like something lit from underneath. It's the only colour on the page, and it moves slowly enough that you read the headline first.

The picks are glass, not charts

Scroll and the data assembles. Elements fly into position as the scene advances instead of fading up on an intersection observer, which is the tell that you're inside one continuous 3D scene with the sections as camera moves.

The gallery picks are the best part. Each one is a video tile behind a refractive glass material, so the footage underneath bends at the edges the way it would through a real slab. Hover a tile and an oil-slick particle effect runs across it. That's a lot of shader work spent on what is, structurally, a leaderboard.

The judges noticed. Creativity scored 7.83, the highest of the four criteria. Design and content both came in at 7.2, and the Developer Award scored 7.44.

The usability score is the honest number

Usability came last at 7.09, and that's the number a working designer should read.

A scroll-driven WebGL scene charges rent. You can't skim it. You can't send a colleague a link to the part with the numbers. Our capture tool asked the page for four scrolled frames and got one back, because the scroll position here isn't a document position.

For a page built to be watched once and shared, that's a fair trade. For the gallery it's promoting, it would be the wrong one.

What the page is selling

The home page makes the pitch in plain words: "The Three.js web, in one place", 470+ experiences, 230+ makers, a weekly newsletter, acid-yellow buttons on the same near-black ground. The browse page holds 382 sites with filters for tag, maker and technology.

The maker directory is the part that earns the index its authority. Unseen Studio, Lusion, PeachWeb, each shown as a four-up of their actual work instead of a logo and a bio.

So The State of the Gallery is a specimen. A foundry sets its own typeface to prove the drawing holds up. mesh3d renders its own numbers in Three.js to prove the index knows what it's indexing. The award is the receipt.

Why it won

Awwwards juries reward the gap between what a brief deserves and what it got. A stats page deserves a table. This one got a shader, a particle field and a headline set at cover scale.

That gap is the whole argument, and it's worth stealing for the dullest page on your own list.