# Now playing > **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 now-playing sheet of "Marrow", a music app. There is no image: the 326px album art is a layered CSS gradient (a warm orange-to-plum diagonal with a gold radial at the top-left) with an inline SVG `feTurbulence` grain blended in soft-light at 28%. The same gradient, blurred 48px and darkened, fills the screen behind everything so the UI sits in the record's colour. Below the art: title and artist, a scrubber whose 6px thumb grows to 18px while dragging and whose track thickens, a play/pause button whose SVG path morphs between the two glyphs over 280ms, a thumbless volume slider, and four lines of lyrics that highlight and scroll as playback time passes. Pausing shrinks the art to 86%; playing grows it back with a spring. ## Reference behaviour 1. Initial state: playing. Art at scale 1 with a deep shadow; "Copper Wire / Marrow · Low Tide Radio"; scrubber at 1:08 of 3:34 (31.8%); remaining time "−2:26"; the second lyric line is highlighted, the first dimmed; volume at 62%. 2. Time advances in real time via `requestAnimationFrame` only while playing (no loop when paused). The scrubber, both time labels and `aria-valuenow` update every frame. 3. Lyric lines have timestamps (60, 66, 73, 80 s). The latest line whose time ≤ current is `on` (full ink); earlier lines are `past` (38% ink at 50% opacity); later lines are 38% ink at 70% opacity. When the current line index ≥ 2 the block translates up by `(index − 1) × 23px` so the current line stays second from the top. Colour and position transition over 280ms. 4. Tap play/pause: the glyph morphs (two bars ↔ two triangle halves) over 280ms `cubic-bezier(.32,.72,0,1)`; `aria-label` and `aria-pressed` flip; the art scales to 0.86 (paused) or 1 (playing) over 520ms with the same spring, and its shadow follows. 5. Press on the scrubber: the track grows from 6px to 10px and the thumb from 6px to 18px with a shadow, over 160ms; the position jumps to the pointer. Drag: position follows the pointer (clamped to 0–214 s); time labels update live; playback resumes from the released position. Release: track and thumb return to their rest sizes. 6. With the scrubber focused, ArrowLeft/ArrowRight nudge ±5 s. 7. Drag the volume slider: the filled portion follows (`--v`), no visible thumb. 8. At 3:34 playback stops and the button shows the play glyph; tapping it resumes from the end (the demo does not loop). 9. "Previous", "Next" and "More" are present with press states but do not change the track. ## Structure ``` 390 × 844 ┌────────────────────────────────────────┐ │ (54 status) blurred art fills bg │ │ 60 ▬ grabber 36×5 │ │ ┌────────────────────────────┐ │ │ │ art 326×326, r14 (◎) │ │ gradient + grain │ │ │ │ │ │ MARROW │ │ │ └────────────────────────────┘ │ │ Copper Wire (22/600) (…) │ │ Marrow · Low Tide Radio (16, 66%) │ │ ━━━━━━━━●─────────────────────── │ scrubber 36 tall, track 6 │ 1:08 −2:26 │ │ ◀◀ ( ▌▌ 72 ) ▶▶ │ │ 🔈 ━━━━━━━━━━━━━━━───────── 🔊 │ volume (icons are SVG) │ ───────────────────────────────────────│ hairline │ Salt on the window, the kettle… (past)│ lyrics, 90px window │ Copper wire humming a song… (on) │ │ The tide keeps its hours… │ │ 44 │ └────────────────────────────────────────┘ ``` - `.bgart` (aria-hidden): absolute, `inset:-40px`, the art gradient with `filter: blur(48px) saturate(140%)`, opacity .85, `scale(1.1)`; `::after` darkens top→bottom (15% → 70% of `--bg`). - `.screen`: flex column, `padding: 60px 32px 44px`, class `playing` toggled. - `.art[aria-label]`: `::before` gradient stack, an inline `` (feTurbulence rect, aria-hidden), a wordmark `` bottom-left and a ring glyph top-right. - `.meta`: `

` + `

` and a 40px glass "More" `