# Liquid glass hero layers > **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 of a marketing site for Aubade, an invented light-forecast app for landscape photographers. One scene layer (a dawn sky, three SVG ridge lines, a lake with sun glitter) sits behind exactly three frosted panels: the nav pill, the headline panel and a forecast card. Glass is used only where something floats over the scene; everything else is solid. The detail worth copying is the edge: each panel has a 1.5px conic-gradient rim whose bright arc rotates to face the sun, plus warm and cool 2px inner edges that read as refraction. Move the pointer and the sun moves, the glow follows, and every rim turns toward it. ## Reference behaviour 1. Initial state at 1280×800: sun centred at 68% / 50% of the stage, half-risen behind the far ridge. Nav pill at top, headline panel bottom-left, forecast card top-right, a small dark hint pill bottom-right reading "Move the pointer to move the sun". 2. Pointer move anywhere on the stage: the sun target is the pointer, clamped to x 6–94% and y 18–62% (y 8–62% under 860px). The sun disc and the radial glow ease to it over 600ms with `cubic-bezier(.16,1,.3,1)`. 3. On the same frame, each glass panel recomputes `--a` (the conic start angle) as the angle from the panel centre to the sun, minus 25°, so the brightest arc of its rim faces the light. It also moves its inner specular `--hx/--hy` to the sun's position relative to the panel. 4. The lake glitter (horizontal 1px lines every 6px) is masked to a 60px-wide column under the sun's x, so the reflection walks with the sun. 5. Pointer leaves the stage: sun returns to its default spot. 6. Hover a nav link: a 7% ink wash pill appears behind it in 160ms. Hover the primary button: it darkens to `#0A171C`; press scales it to 0.97. 7. Without `backdrop-filter` support, or with `prefers-reduced-transparency: reduce`, every panel becomes solid `#F7F1E8`. Nothing else changes, and all text still passes. 8. Under 860px the page scrolls vertically, the nav keeps only logo and "Get the app", and the panels stack: headline panel, then forecast card, then the hint pill. The sun defaults to 72% / 14% so it shows above the headline panel. ## Structure ``` 1280 × 800 (scene fills the stage, panels float) ┌───────────────────────────────────────────────────────────────────────┐ │ ╭ nav pill 1120×56, glass ───────────────────────────────────────╮ │ top 22 │ │ ☼ Aubade Forecasts Spots Field notes Pricing Sign in [Get the app] │ │ ╰────────────────────────────────────────────────────────────────╯ │ │ ╭ forecast 300w ─╮ │ top 150 │ ╭ headline panel 600w, glass ────────╮ │ Tomorrow ... │ │ │ │ • Forecasts for 41,000 ... │ ( sun )│ 06:41 to 07:19│ │ │ │ Know the │ │ arc chart 84h │ │ │ │ minute the light 76/0.96 │ /\ /\ │ LIGHT CLOUD FOG│ │ │ │ turns. │ / \/ \ ╰────────────────╯ │ │ │ lede 17/1.55, max 470 │~~~ridges~~~~~~~~~~~~~~~~~~~~~│ │ │ [Plan a morning →] [See a sample] │ lake + glitter column │ │ │ 4.8 from 9,120 · Free for 3 spots │ [hint pill] │ │ ╰────────────────────────────────────╯ bottom 64 │ └───────────────────────────────────────────────────────────────────────┘ content edges: max(16px, 50% − 560px) left and right ``` - `.stage` (div, `position:relative`, `isolation:isolate`, full height, min 640px). - `.scene[aria-hidden]` at `z-index:-1`: sky gradient, `.glow` (radial at `--lx --ly`), `.sunwrap > .sundisc` (84px), an inline SVG of ridges (`viewBox 0 0 1280 460`, `preserveAspectRatio="none"`, bottom 58% of the stage), `.glitter`. - `