A studio for careful software

The prompt

Create a header with Tailwind CSS that starts tall and compacts on scroll. At rest the bar is roughly 88 pixels tall with a transparent background, a large wordmark, spaced-out links in slightly larger text and an outline call-to-action. Once the page has scrolled past 40 pixels it becomes 60 pixels tall with a white background, a hairline bottom border, a soft shadow, a smaller wordmark and a filled dark button, all handled by class toggles on a single container with transition utilities on height, padding, background and shadow. Add a thin reading-progress line pinned to the bottom edge of the header, filling in neutral-900 as the page scrolls. Include a page of placeholder blocks below so the behaviour is visible. Then add JavaScript that toggles the compact classes past the threshold using a passive scroll listener, and updates the progress line width from the scroll ratio.

Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? Open the Tailwind source.