All posts

How Droppy animates, and why it matters

Motion is the part of an app you notice least when it is right and most when it is wrong. A panel that snaps open a frame too fast reads as cheap. One that lingers a beat too long reads as sluggish. Get it right and nobody says a word, they just feel that the thing is solid. Droppy lives at the top of your screen and opens and closes dozens of times an hour, so its motion is not decoration. It is most of the product.

I have spent an embarrassing amount of time on it. Here is how it works and, more usefully, the handful of rules I hold to, because they are the reason the notch feels the way it does rather than the specific numbers.

One spring, not a pile of timings

The first rule is that everything moving shares the same physics. Early on, every animation had its own hand-tuned duration and easing curve, and the result was subtle chaos: the panel opened on one feel, the glass caught up on another, a widget inside settled on a third. Nothing was technically wrong and the whole thing felt slightly seasick.

Now there is a single spring system. A spring has two knobs, stiffness and damping, and once you tune one pair that feels right, everything borrows it: the panel, the glass, the widgets, the HUDs. A spring also has a quality no fixed duration can fake. It carries momentum, so it overshoots its target by a hair and settles back, the way a real object with weight does when you set it down.

Fixed timing, stops dead Spring, overshoots and settles
The top dot travels on a fixed timing and stops on a dime. The bottom dot rides the spring, drifting a hair past the mark and easing back. Only the second one looks like it has weight. If Reduce Motion is on, both simply sit still.

Glass morphs, it does not pop

Droppy's surfaces are built from a single piece of live glass, the material I wrote about in the ideas behind Droppy. When a panel changes size, the wrong way to do it is to swap one rectangle for a bigger rectangle and cross-fade. Your eye catches the swap every time. The right way is to treat the glass as one continuous shape that stretches, so the corners round and the edges travel and there is never a second where two versions overlap.

The same idea covers the content. When a widget appears inside the Shelf, it does not fade in over the top. The glass makes room for it first, growing to the new height on the shared spring, and the widget settles into the space that opened. Nothing ever pops into a spot that was not already there to receive it.

The notch grows into a panel as one continuous glass shape, and the two content rows only appear once the space is there to hold them. Nothing fades in over a gap. With Reduce Motion on, this shows the open panel as a still frame.

A cushion under every press

Hover and press are where an interface either feels alive or feels like a wall. When your pointer reaches the notch, it does not just change color. It gives, very slightly, the way a good physical button has a little travel before it clicks. Press down and it cushions inward; let go and it rebounds on the same spring. The movement is a couple of pixels at most. You are not meant to see it so much as to feel that the thing pushed back.

There is a matching rule for what motion is not allowed to do, and I am strict about it: Droppy never nudges, bumps, or recoils to get your attention. No shake when a HUD updates, no bounce to say "look here". Attention-seeking motion is the fastest way to make a tool exhausting, and a thing that lives at the top of your screen all day has to be calm above all else. Motion in Droppy responds to what you do. It never performs at you.

Tap a rule

Everything moving borrows the same spring, so the panel, the glass, and the widgets settle on one shared feel with a little weight to it.

Surfaces stretch as one continuous piece of glass instead of swapping one rectangle for another, and content only appears once the space is there to hold it.

Hover and press give by a pixel or two and rebound on the same spring. Droppy never nudges or bounces to grab your attention.

Turn on Reduce Motion and all of it stops rather than slows. That path is tested as carefully as the animated one, because for many people motion is not delight.

Tap a rule to see the idea behind it. These are the reasons the notch feels the way it does, not the specific numbers.

The rule that outranks all the others

Every animation on this page has been quietly obeying it. If you turn on Reduce Motion in macOS Accessibility settings, all of it stops. Not slows down, stops. Panels appear and disappear instead of traveling, the cushion goes flat, the glass changes size between frames with no in-between. This is not a grudging fallback bolted on at the end. It is a first-class path that gets tested as carefully as the animated one, because for a lot of people motion is not delight, it is nausea or worse, and an app that lives in your peripheral vision all day has no business making anyone feel ill.

It is also, not by accident, the same discipline that keeps Droppy light. Motion that respects the system setting is motion that goes through the system's own tools, and that tends to be the cheap, native, battery-friendly path anyway. If you like this sort of thing, making your Mac feel fast again is the same instinct pointed at the whole machine, and the case against the stock volume HUD is where a lot of this thinking started.

Why any of this is worth the trouble

You could strip every animation out of Droppy and it would do exactly the same things. The files would still land, the music would still play. What you would lose is the sense that the notch is a real place with real weight, and that sense is most of why people keep it open instead of hiding it. Good motion is the difference between a panel that appears and a panel that arrives. It costs a lot of fiddly hours and it is invisible when it works, which is precisely the deal I signed up for.