# Floating glass tab bar > **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 bottom navigation of "Loam", a plant-care and shop app, in an iOS 26-style Liquid-glass language. A 64px tall capsule floats 16px from each side and 44px from the bottom; it holds four tabs and a translucent "lens" that slides to the selected tab. A separate 64px circular island to its right opens search. Both are blurred glass, so the product cards scrolling under them smear into soft colour; that under-scroll is the whole point of the piece and must be visible in the first frame. The lens does not just translate: it squashes horizontally for the first third of its move, which is what makes it read as liquid. ## Reference behaviour 1. Initial state: "Home" tab selected, lens sits over it. The page is a scrollable list (greeting, a dark green hero card, two product grids, two tip rows) with 140px of bottom padding so the last row can scroll clear of the dock. 2. Scroll the list: cards pass underneath the capsule and island; the glass blurs them (24px blur, 180% saturation). Nothing in the dock moves on scroll. 3. Tap "Shop": the lens translates from column 1 to column 2 over 420ms with `cubic-bezier(.32,.72,0,1)`. During the same 420ms it runs a squash keyframe: `scale(1,1)` → `scale(1.22,.9)` at 35% → `scale(1,1)`. The Shop icon and label turn `--accent` and the icon lifts 1px and scales to 1.06; the previously selected tab returns to `--ink-2`. 4. Tap the same tab again: no movement, but the squash keyframe still replays (feedback). 5. Press-and-hold any tab: it scales to 0.94 over 160ms (`:active`) and returns on release. 6. Tap the search island: it fills with `--accent` and white icon (`aria-pressed="true"`); a 48px white search field slides up from 12px below to sit 120px from the bottom, fading in over 160ms and springing over 420ms; the input receives focus after 60ms. Tap again or press Escape in the field: the field drops away and clears. 7. Keyboard: with focus in the tab list, ArrowLeft/ArrowRight move selection (wrapping) and focus follows; only the selected tab is in the Tab order (roving tabindex). ## Structure ``` 390 × 844 ┌────────────────────────────────────────┐ │ (54px status area, Lounge draws it) │ │ 62 Tuesday 29 September (13/500) │ │ Good morning, Ines (32/700) │ │ ┌────────────────────────────────────┐ │ │ │ hero card 180 min, dark green │ │ │ └────────────────────────────────────┘ │ │ Needs water today See all │ │ ┌───────────────┐ ┌───────────────┐ │ │ │ thumb 120 │ │ thumb 120 │ │ │ │ name / meta │ │ name / meta │ │ │ └───────────────┘ └───────────────┘ │ │ New in the shop Browse │ │ ┌───────────────┐ ┌───────────────┐ │ ← scrolls under the dock │ ... │ │ ┌ search field 48, hidden ─────┐ │ bottom 120 │ ┌──────────────────────────┐ ┌────┐ │ │ │ ◉Home Shop Care You │ │ ⌕ │ │ bottom 44, height 64 │ └──────────────────────────┘ └────┘ │ │ 16 ──── capsule flex 1 ──── 10 ─ 64 16 │ └────────────────────────────────────────┘ ``` - `

`: the only scroll container (`height:100%; overflow-y:auto; padding:62px 16px 140px`). `body` has `overflow:hidden`. - `