Menu Part 3

Basics: stage 470×222px, background #13131C, all coordinates in px from the stage's top-left, everything clipped to the stage (its two top corners are rounded with radius 40px; the bottom corners are square). The animation is a 12s loop that plays by itself and is seamless. T = seconds since the video start; u = (T + 0.25) mod 12 (the first frame is already 0.25s into the first opening). One tap every second, at every whole u: at even u (0, 2, 4, 6, 8, 10) the view button is tapped and the menu OPENS; at odd u (1, 3, 5, …, 11) a menu row is tapped, that item is PICKED and the menu CLOSES. In video time T: picks at T = 0.75, 2.75, 4.75, 6.75, 8.75, 10.75 and opens at T = 1.75, 3.75, …, 11.75. Items ITEMS = ["Grid", "List", "Board", "Calendar"] with colors IC = [#6E5BFF, #38C6FF, #FF5CA8, #FFD166]. Pick order PICK = [2, 1, 3, 2, 1, 0] (at u = 1, 3, 5, 7, 9, 11), so the view goes Grid → Board → List → Calendar → Board → List → Grid and 12s equals 0s. State S: k = floor(u), m = floor(k/2), dt = u − k; prev = PICK[(m+5) mod 6]; if k is even: open = true, from = to = prev, next = PICK[m]; if k is odd: open = false (the "pick" second), from = prev, to = PICK[m]. Default timings: swap (button label/icon change) = 1 when open, else seg(dt, 0.2, 0.45); active (button "open" look) = ease(dt/0.25) when open, else 1 − ease(seg(dt, 0.15, 0.4)).

The whole menu springs out of its left-middle anchor next to the button with a small overshoot, and shrinks back into it after the pick. 
- Anchor (214, 111). Open: s = springF(16, 0.7)(dt); scale = lerp(0.15, 1, s); opacity clamp(dt/0.08).
- Pick: scale = 1 − 0.85·easeIn(seg(dt, 0.16, 0.4)); opacity 1 − seg(dt, 0.3, 0.42).
- Translate to the anchor, scale, translate back, then draw the panel (with its shadow) and the four rows.