The front page of michaelz.dev is a painting: four gods around a hooded guard, with a matrix rain falling through the hood. Behind it there's a second page, a live solar system of my public services. The brief for today was one sentence: put a tear in fabric and time inside the hood, where you can see the planets spinning, and let a click on it take you through. And don't break the login, because the hood is the login.
Drawing on a painting that moves
The painting is a CSS background set to cover. That means it's scaled and cropped differently on every screen: on a wide monitor you lose the top and bottom, on a tall window you lose the sides. Anything that has to sit on the painted art, like the rain inside the hood, can't use screen coordinates. It would drift off the hood the moment the window changed shape.
The page already solves this for the rain and the god glows. Every painted feature is stored as a fraction of the original image (the hood opening is at roughly 50% across and 32% down) and mapped through the exact same cover arithmetic the browser uses. The tear does the same. Its shape, and the outline of the face cavity it's clipped to, were traced from the painting's pixels with a coordinate grid laid over a crop, not guessed by eye. I'd learned that one before: a map you draw by hand passes its own check.
Three mock-ups before one line of the site changed
Everything started as still mock-ups, drawn into the real page at screenshot time without touching the site. The first version was a rip in the open sky beside the guard. It looked like a saw blade: too regular, washed out by an oversized sun. The second was a proper ragged tear, slow wobble plus fine fraying, with the guard standing in front of it. It worked, and I moved it anyway: inside the hood, above the rain.
That turned out to be the best version, for a reason nobody planned. With the tear in the face and drawn above the rain, the code rain now pours out of the rift. A dense starfield with a faint violet and blue nebula fills it, the two gods' colours, and the planets orbit slowly inside. They're the real public services, lit when they answer and hollow when they don't. A probe result older than fifteen minutes counts as "don't know" and shows hollow, never lit.
Stills are cheap. The second idea is usually the one you'll still like in a month.
Not breaking the login
The hood is one big button: click it and the sign-in emerges. Putting a second clickable thing inside the first is how you end up with a login that only works if you aim carefully.
So the tear is its own small link, stacked just above the hood button and only as large as the rip plus a little room for its glow. Click the rift and you go through; click anywhere else on the hood and you sign in, exactly as before. A keyboard reaches them as two separate stops. While the sign-in is open the rift hides. All of it is tested by asking the browser what element sits under a given point, not by eyeballing a screenshot.
On a phone, the face is hidden behind the stacked service cards, so there the rift moves to the hood's crown, just above the header. Same link, same planets.
A budget written by a broken phone
The day before, a different visual change had worked perfectly in every desktop test and broken every card on my phone: GPU-promoted glow layers that a phone's browser couldn't afford. Headless browsers can't see that kind of failure, so the tear was built to a budget instead:
- One small canvas, sized to the rip, not the screen, at a capped pixel density.
- The stars, nebula and glowing edge drawn once to an offscreen layer; each frame only redraws five planets and a dozen twinkling stars, about 24 times a second.
- Paused while the tab is hidden or the sign-in is open.
- No CSS filters, no blur, no
will-change.
The solar-system page got the same treatment. Its old background redrew every star on every frame; now a much richer field, with a faint Milky Way band, is painted once, and only a small set twinkles. It's prettier and cheaper at the same time.
Clicking the rift opens a circle of space out of it that swallows the gods, and you arrive in the solar system. It worked on the phone, and that was the test that counted.
What I'd take from this
- Anchor art-bound elements to the art, not the screen, and derive the coordinates from the pixels.
- Mock it in stills before building, and be willing to move it after you've seen it.
- Nested click targets need explicit geometry: make the inner one small, and test what's under the pointer, not what the screenshot looks like.
- Set a rendering budget, because headless tests can't see a phone's GPU. Draw static layers once; animate as little as you can get away with.
- Unknown is hollow, never lit. Even a decorative planet shouldn't claim a service is up on stale data.
Comments