Notch
I needed a tool to generate retro pixel gradients for a project so I asked Claude to build me one. After a dozen prompts it worked. It had a canvas on the left and a control panel on the right and I was happy with it. But after using it for a while the side panel started feeling like it was in the way. I wanted the controls to be less obtrusive. So I browsed a bit and ended up with the idea of putting everything inside a notch.
Below are the details I spent most of my time polishing.
Expand / collapse
The first version Claude gave me snapped open instantly. I wanted the notch to overshoot slightly when it opens and then settle into place. Play it at slow speed and you can notice the panel pushing past its final size before easing back.
Tab switching
When you switch tabs the indicator slides between positions instead of teleporting. The content crossfades with a subtle vertical shift so your eye naturally tracks the direction of the change.
Title morph
When the preset changes the title doesn't just swap text. It blurs out for a moment then resolves into the new name. Quick enough to seem instantaneous but slow enough to mask the change underneath.
Rapid randomize
Click the shuffle icon as fast as you can. Each press clears the previous transition before starting a new one so no matter how fast you click the title always morphs cleanly.
Pin and shuffle
The yellow dot next to each slider pins that parameter. Click the shuffle icon and everything else randomizes while pinned values stay locked. It's how you explore variations without losing what you already like.
Content height
Since each tab has a different amount of content the container height needs to adjust to fit whatever is in view. When you switch between them the notch animates its height on the same physics as everything else so it looks continuous instead of jumping between sizes.
Interrupt tolerance
Click to expand then immediately click to collapse before it finishes to see how it handles interrupting the animation midway. It took a few rounds with Claude to get this right but now the physics just reverse naturally, no stutter.
Concave ears
The concave cutouts on each side of the notch are done with a CSS mask. As it expands they stay anchored to the top corners. Play it at slow speed and you can see them hold their shape throughout the transition.
Spring physics
Two numbers control how the notch moves. One makes it snappier, the other controls how much it bounces. Play it at 0.25x to watch the overshoot and settle.
The whole sequence
Everything together. Expand, switch tabs, shuffle, pin, collapse. Every transition shares the same physics so the notch comes across as one continuous object.
Before polish
This is what Claude produced on the first pass. Everything works and every button does what it should. But the transitions are instant, the content teleports between states, and nothing has weight.
I don't think the point of AI is getting things right on the first attempt. I think it's buying you time to craft experiences you wouldn't have been able to build otherwise.