brain function collapseA weekend on one bar
I spent last week speedrunning the release of aloud.sh — the kind of week where every animation is a transition: all 0.2s you promise to come back to. This weekend, I finally got to spend more time on the interaction design.
The thing I’m building for the next release is the capture bar: a small pill that appears when you take a screenshot, already listening, so you can say or type what is wrong with what you just captured. There are two important moments: how the bar shows up, and how it leaves. Showing up only has to attract your attention. Leaving has to explain what happened to the note.
The arrival
This one landed almost immediately and I liked it straight away. The motion has two jobs: put your eye on the note, and say that the mic is already open — start talking, or start typing, the bar is listening either way.
So the bar arrives with an empty slot and the shot makes the trip itself, out of the screen edge at nearly three times its resting size, over on an arc, and down into the slot. Almost all of the work here is orchestration. The bar and the flight leave on the same frame, but the shot is on a completely different path with a completely different easing, and scale trails position the whole way — it stays big a beat longer than it stays low, so the last third reads as docking rather than deflating. Seat and live, at the end, are the beats nobody consciously sees and everybody misses.
Then you press Return
Return keeps the note, the voice and the shot together, and the bar leaves. Three attempts at what leaving should look like, in the order I made them. Same bar, same keystroke, same 560 pixels.
Pocketed
First idea, and the plainest reading of feedback: animate the bar out. Everything that was scaffolding fades, the bar folds left onto the thumbnail, and the small case that is left drops back out through the edge it came in from — the arrival, run backwards.
I like the movement and I don’t think it earns its half second. It confirms the bar is gone, which you could see for yourself, and says nothing about where the note went. Pocketing something is exactly that: fast, tidy, and no help at all when you go looking for it later.
Filed
So: be literal about it. The shot travels right along the bar into the Inbox chip while the bar’s own frame closes onto that chip, keeping its padding, until the frame is the destination. Then the chip takes the hit and the whole thing goes. That last blink is the point — without something arriving, nothing was delivered.
This is the hard one to orchestrate. The press has to register first, then the note, the meter, the mic and the key all have to clear the stage, so that by the time anything travels there are only two objects left in the frame: the capture, and where it is going. Unapologetically skeuomorphic, probably too much ceremony for something you do twenty times a day, and still the only one of the three that names the destination.
Pulse
Then the other direction entirely: the least that still counts as an answer. Nothing crosses the bar. The key lights, a hairline of light sweeps across the pill towards the Inbox and takes the note with it, the bar accepts the press as a small squash — and then, in the quiet after all of that has stopped, the chip blinks once on its own.
That blink is Filed’s one good idea with none of Filed’s freight. Nothing travels, so nothing has to be choreographed around the thing that is travelling, and the bar still names where the note went. It is the one you would stop noticing, and it is the one I expect to ship.
Notes
Pulse is the one I expect to ship, and it only got there by borrowing. Pocketed showed that movement on its own says nothing; Filed showed that naming the destination is the entire job; Pulse is the smallest thing that does the second without paying for the first. It still wants polish. So do the other two, and they may never get it.
What decides all three is orchestration rather than any single curve, which is why every bench prints the timeline it ran on. Hover a bar to see which beat it is.
The arrival has two windows in it, which is the part I’m still turning over. The toast and the bar are separate always-on-top panels and the bar is shown last, so the flying thumbnail would land behind the pill. I think the second window goes away entirely and the bar owns the flight — it costs half a second of the bar sitting over the Dock, which is a cheaper problem than a handoff between two windows at the exact frame they coincide.
Every bench here remounts its bar between runs rather than resetting one in place, which is also roughly what the app will do: the bar is a window, and a window that has finished its animation is easier to throw away than to talk back into position.
All three, at once
Press play. A quarter speed if you want to see the seams.