Menu Part 1

A menu button whose three bars turn into an ✕, 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. (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−ζ²), and x(t) = 0 for t < 0. easeOutCubic(k) = 1 − (1 − k)³ with k clamped to 0–1.
- Two values drive everything: col (bars gathering, 0–1) and rot (turning into the ✕, 0–1, may overshoot).
  - Opening: col = easeOutCubic(a / 0.18); rot = x(a − 0.12) with ω₀ = 15, ζ = 0.42 (it starts turning just before the bars meet, and overshoots a little).
  - Closing: rot = 1 − x(a) with ω₀ = 17, ζ = 0.6; col = 1 − easeOutCubic((a − 0.16) / 0.18) (the ✕ turns back first, then the bars spread out).
  - q = rot clamped to 0–1.
- Button: a circle, radius 78px, centered at (235, 106) on the stage. Fill #1F1E2E with a violet glow (shadow rgba(110,91,255, 0.7·q), canvas shadowBlur 36·q). On top, the same circle filled with a diagonal gradient violet #6E5BFF (top-left) → cyan #38C6FF (bottom-right) at opacity q. Then a 2px border, white 10%.
- Bars: white, 11px thick, round caps. Bar length 82px × (1 + 0.08·clamp(rot)) for the top and bottom bars. Spacing g = 27px.
  - The whole icon is rotated by 180° × rot around the button center (clockwise).
  - Top bar: centered at y = −g·(1 − col), rotated +45° × rot. Bottom bar: y = +g·(1 − col), rotated −45° × rot. (So when rot = 1 they form an ✕.)
  - Middle bar: y = 0, length 82px × (1 − 0.7·col), opacity 1 − col.
- Tap indicator (draw it on top): 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.) The tap indicator is not clipped. It sits on the button center.