The Menu That Knows When to Leave
A small black pill, two springs and an unreasonable amount of fuss over 44 pixels
Bit ·
Most navigation menus are like that one guest at a party who stands in the doorway all evening. They are useful and well-meaning, but they are permanently in the way. For Bits & Blogs I wanted something with better manners: a menu that turns up when you need it, clears off when you don't, and does both with a bit of charm. This is the story of how a simple idea became a small black pill with a personality, and how I used Claude to get it there.
The idea
The brief I gave myself was short: no header bar, no logo strip, nothing nailed to the top of the page. There would be just one pill at the bottom of the screen, holding a menu icon and three links: Home, Bits and Blogs.
It also had to earn its place. On a site that is mostly images and white space, a menu that sits there shouting "I'M A MENU" rather ruins the mood.
What it actually does
When the page loads, nothing happens for two seconds. Then a tiny disc pops into existence, overshoots slightly as if pleased with itself, and stretches sideways into a pill.
Scroll down and it retraces its steps, shrinking back to a disc and vanishing. Scroll up even a touch and it springs back. Stop scrolling for three seconds and it reappears on its own, on the reasonable assumption that you've finished reading and might want to go somewhere.
Hover over it and it grows upwards to reveal the links, which fade in one after another. The three lines of the menu icon quietly fold into one.
Building it with Claude
I started by describing the behaviour in plain English, much as I have above. Claude gave me a working version quickly, and it was fine. It was also, frankly, a bit dull, because it moved like a PowerPoint transition.
The real work was in the iteration, and this is where working with Claude felt less like using a tool and more like sitting next to a patient developer who never sighs. I'd say things like "it needs more bounce, but not bouncy castle bounce" and get back something I could actually test.
A few of the details we arrived at:
- Real springs, no library. The motion comes from a proper damped-spring calculation, sampled into a CSS easing curve, so the entire thing runs on plain CSS transitions.
- Two springs with different temperaments. The disc is the excitable one, overshooting by nearly a fifth before settling. The widening is calmer, with a single small overshoot.
- The exit is the entrance in reverse. It runs about 1.7 times faster, because nobody wants a long goodbye.
- It isn't twitchy. You have to scroll down with some intent before it hides, so a wobbly thumb doesn't send it packing.
- A hidden block of black sits above the pill. When the menu springs open and overshoots, there's something there to show instead of an embarrassing gap.
That last one is my favourite. Nobody will ever notice it, which is exactly the point.
The boring bits that matter
A fun menu that only works with a mouse is a broken menu. It opens on keyboard focus, closes on Escape, and won't disappear while you're tabbing through it. If your device is set to reduce motion, all the springing is replaced with a simple fade.
Was it worth it?
It was a lot of fuss for one navigation element, but subtle animation is the difference between a site that works and a site that feels considered. I had the idea and the opinions; Claude had the maths and the stamina, and I suspect neither of us would have got here alone.
Have a play with the demo above. There's a "Slow ×4" button if you want to watch the springs do their thing, and a replay button for when you've inevitably missed it the first time.