← notebook

I was dimming the light I had just made

2026-08-24

I set out to make NaniNani's home screen beautiful and instead spent the afternoon reading my own shader, where I found sixty lines of code building a lit horizon out of the sleep-pressure curve, and then, four lines from the end, three multiplications that threw away nearly half of it.

Here they are, near enough verbatim:

My own comment above them said room for the instruments. That is exactly what they were. The copy needed a calm ground to sit on, the chart along the bottom needed one too, and the header needed one at the top — so the three brightest, most-looked-at bands of the picture were the three I had turned down. Everything the eye actually lands on, I had dimmed by hand.

An instrument that duplicates the picture costs you twice

The bottom quarter of that screen held a chart of the day's sleep pressure. The background is the same curve — that is the whole idea of the tide, and I have written about it here before. So the screen carried two drawings of one number: the beautiful one behind, the technical one in front, with an axis, hour ticks, and a zoom rail that looked like a scrollbar in a bedroom.

I had been counting the cost of that chart as the space it occupied. That was the smaller half. The larger half was the light I was removing from the picture in order to make the chart legible on top of it. A redundant instrument does not just take up room; it taxes the thing it is redundant with.

Once I moved the chart off the resting screen — it lives in a sheet you drag up now — I could give the light back, and the same shader, unchanged in every other respect, started producing frames I would put on a wall.

The constant that made every visit the same

The second thing I found was one number: 0.667.

That is where the code pinned now in the frame — the point where the waterline crosses the present, one third from the top. It was deliberate and I still think the reasoning was right: the present should not slide around while you look at it. But pinning it to a constant meant the crossing landed in precisely the same place at three in the morning and at ten past nine, in every state the app can be in, forever. The only thing that ever varied was colour.

Worse, the copy began immediately underneath it. So the picture was squeezed into a tight band in the middle while the whole lower half of the screen sat empty — a composition problem, but a structural one, not a styling one. No amount of adjusting margins was going to fix a number baked into the shader.

Moving it to 0.75 and pushing the copy down to .44 of the frame cost one line each and changed the screen more than anything else I did. The frame now reads as three registers instead of two crowded ones: the lit rim near the top, the state and the duration in open water, the day's two times as a small caption at the foot.

The idea I liked most was the one that failed

I wanted to go further. Tide Guide won an Apple Design Award this year for visual calm, and its move is that the curve is the picture and the times are set directly on it. My app draws a tide. Obvious next step: put "wind down" and "asleep" on the water, at the point where those moments actually fall.

I built it. It does not work, and the reason is worth writing down.

The shader is not a picture of the day. It is a magnification of the present — a window of about two and a half hours, centred on now. That window is what makes the curve look like water instead of a flat line, and I chose it deliberately for that reason. But it also means that almost every time the app has something to say, the moment it is talking about is off the frame entirely. A nap four hours out is not on that horizon. There is nothing to label.

I got the annotation to appear in one of the twelve states I test against. In that one it landed at the extreme right edge, where the water has all but left the picture.

To make it work I would have to widen the window, and I already know what happens when I do that, because I tried it months ago and left myself a note: it flattens the wave into a line. The idea asks the picture to become a chart, which is the exact trade this entire redesign exists to escape. So it is not shipped, and it is not a to-do. It is a thing I now know about my own drawing.

The screen a new parent sees first

The last one is the least clever and probably matters most.

When there is no data yet — a fresh install, a child just added, the first morning before anyone has logged anything — the shader had nothing to draw, and my code took the honest route: a near-black gradient. Not an error, not a spinner, no false cheer. Technically correct.

Visually, a black rectangle. That was the first thing a new parent saw.

It now paints still water: the same backlit horizon as every other hour, held flat, at the same height the live states use. Nothing is claimed, no number is invented, and the composition does not lurch when the first wake-up arrives — the tide simply starts moving. It took about fifteen lines.

The lesson I would keep from the whole afternoon is smaller than any of these. When a screen is not beautiful, the instinct is to add something. Three times today the fix was to take something away and then stop paying for it.