Menu Part 2

A "push back" menu: the app page shrinks, tilts and slides right to reveal a menu behind it, on a 470×222 stage with a dark #13131C background (clip to the stage). 4s loop that plays by itself: it opens at 1.0s and closes at 3.0s (times are seconds from the loop start; below, a = seconds since the latest open or close). The loop is seamless: whatever is still settling from the 3.0s close carries on into 0–1s of the next loop.
- Conventions: sizes are px; coordinates are from the stage's top-left unless stated. (x, y) is the top-left corner for rectangles, bars and pills, and the center for circles and icons; y grows downward. Line lengths are between the two end points (round caps add to them); bars that are "N px apart" are measured center to center. Fonts: a sans-serif such as Inter or Segoe UI. A "diagonal gradient" runs from the shape's top-left corner to its bottom-right corner; gradient stops are evenly spaced. Shadows have no offset unless stated; strokes are centered on the path. Fades and the ripple of the tap indicator are linear. All blur and shadowBlur values are in canvas px at this 470×222 size; if you render larger, multiply them by the scale.
- Spring: x(t) = 1 − e^(−ζω₀t)·(cos ω_d t + (ζω₀/ω_d)·sin ω_d t), ω_d = ω₀√(1−ζ²), x(t) = 0 for t < 0. easeOutCubic(k) = 1 − (1 − k)³ with k clamped to 0–1. Open amount p = x(a) when opening and 1 − x(a) when closing, ω₀ = 13, ζ = 0.72. q = p clamped to 0–1.
- Back layer: fill the whole stage with a diagonal gradient #21185A → #0D1F3A.
- Menu (on the back layer, left side): "Home", "Explore", "Library", "Settings" (bold 700, 24px), row i = 0–3 centered at y = 56 + 40·i. Each row: an accent bar 4×18px (radius 2) at (36, y − 9) and the label at x = 52, baseline y + 8. Row 0 is the current page: cyan #38C6FF bar and white #FFFFFF label; others: bar white 35%, label #BDB8E6. Opening: e = easeOutCubic((a − (0.12 + 0.06·i)) / 0.3); closing: e = 1 − easeOutCubic(a / 0.18). Draw the row at opacity e, shifted left by 30·(1 − e) px; skip it when e ≤ 0.
- App screen (the page; the same screen is used in 12): a 390×196px rounded rectangle (radius 22px) with its top-left at (40, 12), fill #1C1B2B. Coordinates in this list are from the screen's top-left; everything inside is clipped to the rounded screen.
  - Top bar: the top 42px, fill #232236. Title: a bar 76×8px (radius 4) #4A4862 centered horizontally, top at y = 17. Avatar dot: circle radius 9px #3A3952 at (362, 21).
  - Hero card: x 20 → 370, y 54, height 56, radius 14px, horizontal gradient #2E2A55 → #1F3550. Inside it: a bar 110×9px #3A3952 at (34, 70) and a bar 70×7px #2F2E45 at (34, 88) (radius = half the height).
  - Three cards: y = 122, height 58px, width 111.3px, 8px apart (gap), starting at x = 20, radius 12px, fill #2A293D. In each, a bar 50×7px (radius 3.5) #3A3952, 12px from the card's left, top at y = 136.
  - Border: 2px, white 8%, around the screen (not clipped), drawn right after its content and before the menu icon.
  - Menu icon centered at (28, 21): three bars 22px long, 3.5px thick, round caps, color #C9C7E0, 7.3px apart. It turns into an ✕ by m (m = easeOutCubic(a / 0.3) when opening, 1 − easeOutCubic(a / 0.3) when closing; each bar rotates about its own center): s = clamp(2m) moves the top and bottom bars to the middle while the middle bar fades out (opacity 1 − s) and shortens to 22 × (1 − 0.6·s); r = clamp(2m − 1) then rotates the top bar +45° × r and the bottom bar −45° × r, both growing to 22 × (1 + 0.12·r).
- Push back: draw the whole screen (fill, content, icon) with these canvas calls, in this order: translate(235, 110), translate(178·p, 0), transform(1, −0.07·q, 0, 1, 0, 0), scale(1 − 0.3·p, 1 − 0.2·p), translate(−235, −110). (So the page shrinks around the point (235, 110), its right side rises a little like a card tilted away, and it slides 178·p px to the right.) Under the screen fill, a shadow rgba(0,0,0, 0.55·q) with canvas shadowBlur 30·q. On top of the screen and its icon, a tint rgba(10,8,30, 0.35·q) in the same rounded shape. The screen may slide past the stage's right edge (it is clipped there).
- Tap indicator (draw it on top, not transformed): a 23px-radius circle, fill white 38%, 3.5px white border, soft dark shadow (black 35%, canvas shadowBlur 10). Time a = seconds relative to each open/close (negative = before). From a = −0.42 to −0.1 it scales 125% → 100% (ease-out cubic) while fading in over the first 0.18s; from −0.1 to 0 it presses down to 80% (linear); from 0 to 0.2 it grows back to 100% (ease-out cubic); its opacity stays 1 until a = 0.12 and fades to 0 by a = 0.37. Ripple: from a = 0 to 0.4 a 3px white ring grows from radius 23px to 52px, opacity 0.7 → 0. Draw the ripple under the circle; the border scales with the circle; the ripple's opacity is not multiplied by the circle's. The fade-in is linear from a = −0.42 to −0.24, and after a = 0.2 the size stays 100%. (With the dark shadow under a 38% white fill the circle reads as a soft grey disc; that is intended.) For opening it taps the menu icon at (68, 33) (stage coordinates, where the icon is before it moves); for closing it taps the pushed-back page at (385, 108).