All posts

Dynamic Glass: the look of Droppy

Every notch app runs into the same problem first. It has to put something at the very top of your screen, in a strip that already belongs to your wallpaper, your menu bar, and whatever window sits behind it. The obvious answer is a panel, a solid rectangle you draw on top. I built it that way at first, and it almost always looks wrong. It reads like a sticker pressed onto the display, a flat box floating over a scene it has nothing to do with.

So Droppy is not made of panels. It is made of glass, one continuous piece of it, on top of Apple's Liquid Glass material. That sounds like a finish added at the end, but it is closer to the opposite. The point is a surface that reacts to what is around it instead of sitting on top of everything, and getting that reaction right is most of the work. Here is what Dynamic Glass actually means, and why a notch app has to be built from it.

Why a solid box always looks wrong

The strip along the top of your screen is never really empty. There is wallpaper up there, often the brightest part of a photo, plus window edges and the menu bar. Drop a solid rectangle into that and your eye reads it as a foreign object, because it has one fixed color and a hard edge that ignore everything behind them. The wallpaper has depth and light. The rectangle has neither.

The deeper trouble is that no single color is ever right. A light gray glares against a dark wallpaper. A dark gray punches a hole in a bright one. Whatever you pick is wrong against half the backgrounds people use, and that mismatch is what makes a panel look pasted on. Glass skips the argument, because it has no fixed color of its own to defend. It borrows the one behind it.

Tap a state

With no fixed color of its own, the glass borrows whatever is behind it, and a slow, faint reflection drifts across to show the surface is live rather than a frozen screenshot.

TranslucentBorrows the colorSlow live drift

The moment it has to carry labels, a faint smoke layer settles under the content, holding just enough contrast to keep the text readable over a bright or busy scene.

Faint smokeFloor of contrastAlmost invisible

With nowhere else on screen to hide behind, the glass samples the backdrop and tints itself from the scene, sitting inside the wallpaper instead of on top of it.

Samples the backdropTints to matchJoins the scene

One continuous piece of glass reacting to each situation, never a fixed panel drawn on top.

One piece of glass, not a stack of boxes

When you open the notch, what grows out of it is a single surface. Not a media box stacked on a shelf box stacked on a row of buttons, but one piece of glass with everything inside it. Seams are how an interface gives itself away, and the moment you see where one rectangle ends and the next begins, the illusion is gone.

The glass is translucent, so it picks up what is behind and below it: the wallpaper, the top of a window, the color of whatever you are looking at. It stays live, not a screenshot blurred once and frozen, which is why a slow band of light drifts across it as things shift underneath. That drift is the surface telling you the depth is real.

Being one shape also lets it move like one. When a panel resizes, the glass stretches as a single piece instead of swapping a small rectangle for a bigger one, so the corners stay round and no two versions overlap. I wrote about that motion in how Droppy animates, but the material is what makes it possible. You cannot morph a stack of boxes, only one continuous surface.

Droppy's glass is translucent, so the wallpaper glow behind it shows through as a faint tint, and a soft reflection drifts across to show a live surface rather than a flat fill. With Reduce Motion on, the sheen and the glow hold still.

A little smoke, so you can still read it

Translucency comes with an obvious cost. A surface you can see through is one your text competes with, and over a bright photo or a white window, thin white type on clear glass simply vanishes. A material that looks good and cannot be read is a failure, not a style.

So the glass carries a faint smoke layer under the content. It is a whisper of tint, enough to hold a floor of contrast beneath the text so labels and controls stay readable whatever is behind them, and no more. The temptation is to reach for it every time legibility gets hard and slowly turn the glass back into the gray box you were avoiding. The tint has to work while staying almost invisible, which is a narrower target than it sounds.

Clear glass, the text fights the scene The same glass with a little smoke
The same glass and the same text over the same bright wallpaper. On the left the type washes out against the scene. On the right a faint smoke layer under the content holds just enough contrast to keep it readable.

The test I use. Put Droppy over the brightest, busiest wallpaper I can find, then over a plain black one, and read every label on both without touching a setting. If the smoke looks like a panel on the black wallpaper it is too heavy, and if a single word is hard to read on the bright one it is too light. The right amount is the amount you never notice.

On the Lock Screen, it joins the scene

The Lock Screen is the hardest test, because there is nothing else on screen to hide behind. It is your wallpaper, the clock, and whatever Droppy is showing. A solid panel there would look like a notification someone forgot to clear.

So on the Lock Screen the glass samples the backdrop and tints itself from the scene behind it instead of drawing itself on top. Droppy reads as part of the picture, a pane of glass laid into the wallpaper and catching its light. If a lock screen that earns its keep before you log in sounds worth having, there is a whole piece on that.

9:41 Wednesday, July 1
On the Lock Screen there is nowhere to hide, so the glass samples the wallpaper behind it and tints itself to match. It sits inside the picture instead of on top of it.

Glass is easy to overdo

Here is the honest part. Glass is the easiest material to overdo. Once you have a surface that can shimmer and tint, every problem starts to look like it wants more of that, and saying yes is how you ruin it. Reflections on everything. Tint cranked up until it is a panel again. A shine that sweeps so often you watch it instead of your work. Each of those looks impressive in a screenshot and is tiring to live with.

So most of the craft is subtraction. The reflection is slow and faint on purpose. The tint is the least I can get away with. The glass is allowed to react, then asked to settle down and get out of the way. That restraint is the whole discipline, the same one behind every other decision in Droppy. Good glass is glass you see straight through to your work, and mostly forget is there.