# Spatial glass windows > **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 A web page that borrows the spatial-computing window language: a reading app called Sill shown as three grey glass windows floating in a softly blurred living room at late-afternoon light. The main window holds an essay set in Newsreader; a vertical tab ornament hangs off its left edge and a pill toolbar ornament straddles its bottom edge. Two side windows (Up next, Highlights) sit further back and turned toward the viewer with `rotateY(±18deg)`. Hover, focus or click a window and it comes forward in Z with a deeper shadow. Every button carries a gaze-like highlight: a 70px soft white spot that follows the pointer inside the button. The detail worth copying: the glass is a dark 82% tint, not a pale frost, so white text stays above 4.5:1 over any part of the room, and a solid `#2F2F34` takes over where `backdrop-filter` is missing. ## Reference behaviour 1. Initial state at 1280×800: the room fills the viewport (warm wall, bright window pane top right, sofa left, plant right, floor from 64% height). The Reading window is in front (`.front`, `translateZ(46px)`), Up next sits left at `translateZ(-160px) rotateY(18deg)`, Highlights sits right at `translateZ(-110px) rotateY(-18deg)`. 2. The Reading window shows a top bar (40px round back button, source line "Sill · Saved from The Lagoon Quarterly", "Page 3 of 8"), a gold kicker "ESSAY · 14 MIN READ", the 44px title "The salt roads of Aveiro", a byline, two paragraphs with one highlighted sentence, and a 3px reading progress bar at 38%. 3. The vertical tab ornament (Library, Reading, Highlights, Search) floats 76px left of the Reading window, vertically centred. Reading is the current tab: a white 48px disc with dark icon. Hovering a tab shows its name in a dark pill 66px to its right, fading in and sliding 4px over 160ms. 4. The toolbar ornament straddles the Reading window's bottom edge (`bottom:-30px`): Aa, a 1px divider, Listen with a three-bar wave and "14:02", Highlight, Saved (pressed, white disc), Share. 5. Hovering any window (or tabbing into it, or pressing on it) moves it forward: Reading to `translateZ(46px)`, Up next to `translateZ(-40px) rotateY(12deg)`, Highlights to `translateZ(0) rotateY(-12deg)`, over 360ms on the sheet spring. Its shadow deepens. A click or focus makes that window the persistent `.front` one; the others go back to rest. 6. Moving the pointer over any button paints a radial white spot (26% alpha at centre, 70px radius) where the pointer is, plus a 10% white fill. Pressing scales the button to 0.96. 7. Listen, Highlight and Saved are toggles (`aria-pressed`). Pressed state is a 90% white fill with `#1D1D21` icon. When Listen is on, its three wave bars animate between 6px and 14px. Each toggle announces its new state through a polite live region ("Reading aloud", "Paused", "Saved to library"). 8. Under each side window a window bar floats 26px below: a 96×6px pill with a 16px close dot to its left. 9. Below 900px wide the 3D stage flattens: windows stack in one column (Reading, Highlights, Up next) 56px apart, the tab ornament hides, the toolbar drops Share and the time label, and the page scrolls over a fixed room. ## Structure ``` 1280 × 800 (perspective 1700px, origin 50% 40%) ┌──────────────────────────────────────────────────────────────────────────┐ │ room: wall gradient · window pane (62%,6%,30%×48%) · sofa · plant · floor │ │ │ │ ┌──────────────────────────────┐ │ │ ┌─────┐│ ◀ source line Page 3/8 │┌─────────┐ │ │ │Up │●│ KICKER ││Highlights│ │ │ │next │●│ The salt roads of Aveiro ││ quote │ │ │ │rows │●│ byline ││ quote │ │ │ │ ×4 │●│ body 18/1.56, 452 max ││ quote │ │ │ └─────┘ │ ─────── progress 38% │└─────────┘ │ │ ○── └───[Aa | ▶ Listen 14:02 ✎ ▣ ⇪]─┘ ○── │ │ │ └──────────────────────────────────────────────────────────────────────────┘ Up next 276×420 @ (30,150) · Reading 540×520 @ (404,72) · Highlights 280×384 @ (964,176) tab ornament: 64px wide column at Reading.left − 76 · toolbar: 60px tall, centred, bottom −30 ``` - `.room` (`aria-hidden`, `position:fixed`): five `` shapes, each blurred 6–10px, over a two-stop wall and floor gradient. - `
`: the perspective container. - `
`: `h2`, count line, four `