We built it, then deleted it

We put shop signs carrying every project we have shipped down the 3D street on our homepage. It was a good idea that could not survive its own constraints, so it lasted about four hours.

Mainichi6 min read
Copied

In short

  • An idea can be good, well built, and still wrong for the place it is in.
  • Ask what the constraint does to the idea before you build it, not after.
  • Texture, silhouette and light survive a scrim. Words do not.
  • Deleting your own work is cheaper than defending it.

Our homepage travels through a 3D street. The obvious next thought, once that existed, was to make the street ours: shopfronts down the road, each carrying a project we have actually shipped, positioned so you pass the MarbleMazes shop while the copy beside it is talking about MarbleMazes.

It is a genuinely nice idea. The world would reference the work instead of being generic scenery, and it would do it in the most literal way available. We built it in an afternoon.

What we actually built

Seven signs, one per project. Each board carried its title set in our own typeface, drawn to a canvas at runtime rather than shipped as an image, so nothing was added to the payload. Each one was placed by measuring where its section sat on the page and converting that to a position on the road:

js
for (const sign of SIGNS) {
  const node = el.querySelector(sign.anchor)
  if (!node) continue
  // put the shop where the band that talks about it sits on the road
  sign.z = rawTravel(clamp01((node.offsetTop - vh * 0.6) / max)) + sign.off
}

// two nearby sections can put their shops on top of each other,
// so walk the street and push each one back until there is room
SIGNS.sort((a, b) => b.z - a.z)
for (let i = 1; i < SIGNS.length; i += 1) {
  SIGNS[i].z = Math.min(SIGNS[i].z, SIGNS[i - 1].z - 9)
}
The placement was derived from the DOM, so a sign moved when its section moved. This part worked exactly as intended.

It was cheap: four draw calls per sign, no new assets, and it brightened as you drew level with it. By every internal measure it was a success.

Then someone looked at it

You just placed some of the projects in ugly texts on top of the buildings. It looks unpolished, we barely see it, and it seems irrelevant.

The correct review

All three of those are true, and the third is the one that matters. Unpolished can be fixed. Irrelevant cannot, because it is a statement about the idea rather than the execution.

The constraint we had already written down

The 3D world on our homepage sits behind a veil. It exists for one reason: the copy has to stay legible, because the copy is what sells. Its opacity runs to roughly 0.9 over most of the page, and that number is not negotiable, because the alternative is a beautiful site nobody can read.

Now put text behind it, seventeen or more units down a foggy street, at an angle, at a size that scales with distance. It cannot be read. And the only fix available is to make it louder: bigger, brighter, closer. Which is to say, the only way to make the signs work is to make them compete with the copy the veil exists to protect.

That rule is worth more than the feature was. It rules out a whole category of ideas we would otherwise have kept reaching for: labels, captions, floating headings, anything typographic in the scene. Having it written down is the actual return on the afternoon.

Where the effort went instead

We deleted the signs, the texture factory that drew them, the placement pass, and the markup they depended on. Then we spent the same budget on the object that is on screen in every single frame and had been getting no attention at all: the street lantern, which was a sphere on a stick.

It became a chochin turned on a lathe. The pinched ends and the swell through the belly are the whole silhouette, and a lathe buys them for the same cost as a sphere. Getting it to read as lit rather than as a beige object took two failed attempts and then the realisation that the fix was the skin, not the shape: a lathe maps v up the profile, so a vertical gradient lands exactly where it should, hot through the belly and falling away into the ends.

Why write this down

Studios publish the things that worked. That is understandable and it is also why most agency writing is useless: it is a highlight reel, and nobody learns anything from a highlight reel.

The admission worth making is that we had the constraint written down before we started. It is in the code, in a comment, in the module that draws the veil. We built the signs anyway, because the idea was appealing and we did not stop to ask what the constraint would do to it.

That is the mistake worth naming, and it is not a 3D mistake. It is the same one that produces a beautiful hero nobody scrolls past and a clever navigation nobody can use. The question to ask before building is not whether this is a good idea. It is what the constraint you already accepted does to it.

The street is still there, and it is better without them. The lanterns are the part worth looking at.

process3ddesign decisions