Accordion Part 2

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 animation is a 4s loop that plays by itself and is seamless (the state at 4.0s equals the state at 0s; u = loop time 0–4 in seconds, and all times below are values of u). The video is 12s = three loops; T = seconds since the video start (0–12), and u = T mod 4. T is used only for the idle motion inside the pictures of 02 (scenery, period 4s); 4 divides 4 and 12, so you may use u instead of T, and 12s → 0s is seamless too. Everything else depends only on u. The finger taps twice in every loop: at u = 0.5s (it opens, or goes to the next step) and at u = 2.4s (it closes, or goes back); everything is back in the start state by 2.95s and rests until 4.0s. Colors: violet #6E5BFF, cyan #38C6FF, mint #3DDBB0 (pink #FF5CA8 and gold #FFD166 appear only inside the flower picture of 02). "violet→cyan from a to b" is a linear gradient with violet at a and cyan at b, in the current drawing frame; a gradient "from point P (color A) to point Q (color B)" is a linear gradient along P→Q; with three colors the stops are at 0, 0.5 and 1. Text: font stack "Segoe UI Variable Display","Segoe UI",sans-serif, weight and size as given (weights used: 500, 600, 700, 800); x is the left edge unless "centered" or "right-aligned"; y is always the alphabetic baseline. "At opacity a" multiplies with the surrounding opacity. mix(A, B, k) = per-channel linear RGB blend (k clamped to 0–1, channels rounded). "Glow" = a canvas shadow (that shadowColor and shadowBlur, no offset). rr(x, y, w, h, r) = rounded rect with top-left (x, y), corner radius max(0, min(r, w/2, h/2)). Lines have butt (flat) caps unless "round caps" is stated. clamp(x) = x limited to 0–1; lerp(a, b, k) = a + (b − a)·k. Easing (k is clamped to 0–1 first): ease = 1 − (1−k)³, easeIO = 4k³ for k < 0.5, else 1 − (−2k+2)³/2, easeBack = 1 + 2.9(k−1)³ + 1.9(k−1)² (0→1, overshooting to about 1.12). seg(x, a, b) = clamp((x − a)/(b − a)); seg(a, b) with two arguments applies it to u. Spring springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)·(cos ω_d t + (ζω₀/ω_d)·sin ω_d t), ω_d = ω₀√(1−ζ²). For a tap at time E: rel = u − E wrapped into −2…+2 (negative before it). Press pressK(a, d) (a = rel to the tap): 1 for a < −0.1 or a > 0.6; for −0.1 ≤ a < 0, 1 − d·(a+0.1)/0.1; for 0 ≤ a ≤ 0.6, 1 − d·(1 − springF(22, 0.45)(a)); the pressed element scales by it around the center that is given. Tap indicator tapMark(x, y, a) (a = rel to the tap; drawn on top of everything): visible only for −0.42 ≤ a < 0.4. A circle of radius 22.575px, fill rgba(215,215,230,0.38) with a soft shadow (black 35%, shadowBlur 10, fill only), then a 3.5px border white 92% (no shadow); fill and border are drawn in the circle's scaled frame, so the border width scales with the circle. Scale: for a < −0.1, lerp(1.25, 1, ease((a+0.42)/0.32)); for −0.1 ≤ a < 0, lerp(1, 0.8, (a+0.1)/0.1); for a ≥ 0, lerp(0.8, 1, ease(a/0.2)). Opacity: clamp((a+0.42)/0.18) before the tap, clamp(1 − (a−0.12)/0.25) after. Ripple (drawn under the circle, not scaled, only for 0 ≤ a < 0.4): a 3px white ring of radius 22.575·(1 + 3.2a) (22.6 → 51.5px), opacity 0.7·(1 − a/0.4) (its own opacity, not multiplied by the circle's opacity); it keeps growing for its full 0.4s. Every animation has two tap indicators, one with a = rel to 0.5 and one with a = rel to 2.4. Open amount openK = easeIO(seg(0.5, 0.85)) for u < 2.4, else 1 − easeIO(seg(2.4, 2.75)) (0 → 1 right at the first tap, 1 → 0 right at the second). Chevron chevron(x, y, rot, color, s, lw): in a frame translated to (x, y) and rotated by rot (canvas rotation, positive = clockwise), a stroked polyline (−s, −s/2) → (0, s/2) → (s, −s/2), line width lw, round caps and joins (it points down at rot = 0 and up at rot = π); here always s = 6, lw = 2.2. Card card(x, y, w, h, r, o): rr(x, y, w, h, r) filled mix(#1C1B2B, #24213C, o) (no border). Check mark check(x, y, s, lw, color) (03 only): a round-capped, round-joined polyline through (−0.30, 0.02) → (−0.09, 0.23) → (0.32, −0.20) × s from (x, y), fully drawn. Picture scenery(x, y, w, h, r, kind, T) (02 only; made-up stand-ins for photos): clipped to rr(x − w/2, y − h/2, w, h, r) (here r = 0, a plain rect), in local coordinates (X, Y) from its top-left (x − w/2, y − h/2), with ph = π·T/2. Kind 0 (sunset mountains, no motion): fillRect(0, 0, w, h) with a vertical gradient from Y = 0 to Y = h: #3B2E86, #7E5BD6, #F3A5C8; a sun disc #FFD8A8 at (0.7w, 0.42h), radius 0.13h; mountains = the filled polygon (0, h), (0.32w, 0.48h), (0.55w, 0.78h), (0.75w, 0.58h), (w, 0.85h), (w, h) in #2A2266. Kind 1 (sea): fillRect with a vertical gradient #1B3F7A (Y = 0) → #38C6FF (Y = h); a disc rgba(255,255,255,0.85) at (0.3w, 0.3h), radius 0.08h; three wave layers m = 0, 1, 2 drawn in that order, filled #2C6FC0, #1F55A0, #173F80: the polygon from (0, h) through (j·w/20, h·(0.62 + 0.12m) + 0.03h·sin(0.9j + ph + m)) for j = 0–20, then (w, h) (the waves move with period 4s). Kind 2 (flowers): fillRect with a linear gradient from (0, 0) #183A33 to (w, h) #2E7A63; three flowers j = 0, 1, 2 with (a, b, rad, color) = (0.3, 0.55, 0.12, pink #FF5CA8), (0.66, 0.4, 0.15, gold #FFD166), (0.55, 0.75, 0.1, #FF9CCB), drawn in that order; for each, sway sw = 0.02h·sin(ph + j); a stem line #3DDBB0, line width max(2, 0.03h), from (a·w, h) to (a·w + sw, b·h); five petals p = 0–4, each a disc of radius 0.5·rad·h filled with the flower's color, centered at (a·w + sw + 0.6·rad·h·cos A, b·h + 0.6·rad·h·sin A) with A = p·2π/5 + 0.2·ph (in 4s each flower turns exactly one petal, so it loops); then a center disc #FFF3C4 of radius 0.4·rad·h at (a·w + sw, b·h).

An "Expand all" pill opens three recipe rows one after another; it turns into "Collapse all", and tapping it again closes the rows in reverse order. 
- Rows i = 0–2 (made-up): "Overview" / "A quick soup for cold evenings.", "Ingredients" / "Carrots, ginger, onion, stock.", "Steps" / "Cook 20 min, then blend smooth.". Open amount o_i = easeIO(seg(0.55 + 0.12i, 0.85 + 0.12i)) for u < 2.4 (opens 0.55–0.85, 0.67–0.97, 0.79–1.09); from 2.4, o_i = 1 − easeIO(seg(2.45 + 0.1·(2 − i), 2.75 + 0.1·(2 − i))) (row 2 closes 2.45–2.75, row 1 2.55–2.85, row 0 2.65–2.95).
- Pill button, center (380, 27), scaled around it by pk = pressK(rel to 0.5, 0.08) × pressK(rel to 2.4, 0.08); in that scaled frame (the fill, the border and the labels all scale): rr(328, 14, 104, 26, 13) filled rgba(110,91,255,0.22), then the same shape stroked 1.5px rgba(160,150,255,0.5). Labels (700 13px #D6D1FF) centered at (380, 32): "Expand all" at opacity 1 − lb and "Collapse all" at opacity lb, lb = seg(0.5, 0.6) for u < 2.4, else 1 − seg(2.4, 2.5) (they cross-fade right at each tap).
- "Recipe" (800 19px #F4F4F8) at (40, 33).
- Rows stack from y = 46: row i is at x = 40, width 390, height 30 + 24·o_i; the next row starts 5px below it (closed: y = 46, 81, 116; all open: 46–100, 105–159, 164–218). For each row: card(40, y, 390, 30 + 24·o_i, 10, o_i); title (600 14.5px #E9E8F5) at (54, y + 20); chevron(410, y + 15, π·o_i, mix(#9D9BBB, cyan, o_i)); if o_i > 0.001, clipped to rr(40, y, 390, 30 + 24·o_i, 10): the body text (500 13.5px #B9B7D3) at (54, y + 42), opacity seg(o_i, 0.4, 1).
- Taps at (380, 27) at 0.5s and at 2.4s.
- Draw order: pill (fill, border, labels), "Recipe", rows 0, 1, 2 (card, title, chevron, body), the two tap indicators.