# Floating pill navbar > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The top navigation for Solenne, a fictional home-battery company. At the top of the page it is a full-width, transparent 76px bar with cream text sitting over a dusk-landscape hero. Once the page scrolls past 48px it contracts into a 780 × 56px frosted pill that floats 16px below the viewport edge, switches to dark ink, and drops the wordmark and "Sign in" link so only the mark, the five section links and the orange CTA remain. A soft capsule behind the current section's link slides between links as the reader scrolls (scrollspy), with a 4px orange dot that tucks inside the capsule in the pill state. The detail worth copying: the link group keeps identical padding in both states, so the indicator never has to be re-measured mid-transition. ## Reference behaviour 1. On load the page sits at `scrollY = 72` (the demo nudges itself there after 60ms) so the first frame shows the pill over the sky of the hero; scrolling to the top restores the full bar. 2. **Full state** (scrollY ≤ 48): bar spans the viewport, 76px tall, 40px side padding, no background, 1px bottom hairline `rgba(251,246,238,.22)`, cream text. Left: 28px conic-gradient mark + "Solenne" wordmark (19px/600). Centre: five links. Right: "Sign in" text link then the orange "Get a quote" button. 3. **Pill state** (scrollY > 48): over 420ms with expo-out the bar's width goes 100% → 780px, height 76 → 56px, radius 0 → 999px, padding `0 40px` → `0 8px 0 18px`, the wrapper gains 16px top padding, background goes to `rgba(251,246,238,.58)` with `blur(18px) saturate(1.6)`, text colour cream → ink, and a soft shadow appears. The wordmark and "Sign in" collapse via `max-width → 0` and `opacity → 0`. 4. The active-section capsule (full link height, radius 999px) translates and resizes to the current link over 420ms expo-out. Its fill is `rgba(251,246,238,.16)` in the full state and `rgba(19,32,26,.08)` in the pill. 5. The 4px orange dot sits 9px **below** the capsule in the full state and moves to 3px **inside** its bottom edge in the pill state. 6. The current section is the last one whose top edge is above 40% of the viewport height. At the very bottom of the page the last link (Journal) is forced active. 7. Clicking a link smooth-scrolls to its section (`scroll-behavior:smooth`); the capsule follows as sections pass the 40% line. 8. Hovering a link raises its opacity from .78 to 1. The CTA lifts 1px on hover. 9. Scroll handling is rAF-throttled; there is no work on frames without a scroll event. ## Structure ``` 1280 × 800, page scrolls ┌────────────────────────────────────────────────────────────────────┐ │ ◉ Solenne [Overview] Battery Installers Pricing Journal Sign in (Get a quote →) │ 76 full ├────────────────────────────────────────────────────────────────────┤ │ hero photo 680px tall (dusk gradient, sun, hills, house) │ │ SOLENNE HOME CELL · SERIES 2 │ │ Store the 13.4 KWH · … │ │ afternoon. (156px) body 16px / 1.45 │ ├────────────┬────────────┬────────────┬─────────────────────────────┤ │ 13.4 kWh │ 92 % │ 4,200 │ 15 yr stats strip │ ├────────────┴────────────┴────────────┴─────────────────────────────┤ │ 02 / BATTERY h2 84px … (sections 620px min, 120px top pad) │ └────────────────────────────────────────────────────────────────────┘ pill state (centered, top 16px): ╭──────────────────────────────────────────────────────╮ │ ◉ [Overview] Battery Installers Pricing Journal (Get a quote →) │ 780 × 56 ╰──────────────────────────────────────────────────────╯ ``` - `.nav-wrap` — `position:fixed; inset:0 0 auto 0; display:flex; justify-content:center; pointer-events:none`. Only the bar receives pointer events so the wrapper's padding never blocks the page. - `