Accordion Part 1

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). 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 little flower picture in 05 (stems sway and petals turn with period 4s); 4s divides 12, so you may also use u instead of T, and 12s → 0s is seamless too (the 12s cycle index k12 is not used). The finger taps at u = 0.5s (this opens the row) and at u = 2.4s (this closes it); 06 also taps at 1.3s (the inner row). Opening value openK(u) = easeIO(seg(0.5, 0.85)) for u < 2.4, else 1 − easeIO(seg(2.4, 2.75)) (0 before 0.5, 0 → 1 over 0.5–0.85, 1 until 2.4, 1 → 0 over 2.4–2.75, 0 from 2.75 to 4.0). Colors: violet #6E5BFF, cyan #38C6FF, pink #FF5CA8, gold #FFD166, mint #3DDBB0; row fill #1C1B2B, open row fill #24213C, title text #E9E8F5, heading text #F4F4F8, body text #B9B7D3 or #C9C7E3, muted #9D9BBB. "violet→cyan" is a horizontal linear gradient from the shape's own left edge (violet) to its right edge (cyan). Text: font stack "Segoe UI Variable Display","Segoe UI",sans-serif, weight and size as given (weights used: 500, 600, 700). x is the left edge unless "right-aligned"; y is the alphabetic baseline. Opacities multiply with the surrounding opacity. mix(A, B, k) = per-channel linear RGB blend, 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 r (at most half the smaller side). Rotations are canvas rotations (positive = clockwise on screen). Easing (k is clamped to 0–1 first): ease = 1−(1−k)³, easeIO = 4k³ for k < 0.5, else 1 − (−2k+2)³/2. lerp(a, b, k) = a + (b−a)·k. clamp(x) = x clamped to 0–1. 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−ζ²) (rises 0 → 1 with an overshoot). For an event 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)). 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. Row card card(x, y, w, h, r, o, edge): rr(x, y, w, h, r) filled mix(#1C1B2B, #24213C, o); then, only if edge > 0, at opacity edge the same rr stroked 2px violet→cyan (from x to x + w) with glow rgba(110,91,255,0.45) blur 10. Chevron chevron(x, y, rot, color, s, lw) (default s = 7, lw = 2.4): translated to (x, y) and rotated by rot, a round-capped, round-joined polyline (−s, −s/2) → (0, s/2) → (s, −s/2) in that color (a "v" pointing down at rot = 0, pointing up at rot = π; at rot = π/2 it points left). "Clipped to the row" = clipped to that row card's own rr (same x, y, w, current h, r). Flower picture scenery(x, y, w, h, r, T) (05 only; center (x, y), size w×h): clipped to rr(x − w/2, y − h/2, w, h, r) and drawn in local coordinates from that rect's top-left; ph = T·π/2. Background: fillRect(0, 0, w, h) with a linear gradient from (0, 0) #183A33 to (w, h) #2E7A63. Then three flowers j = 0, 1, 2 with (a, b, rad, color) = (0.30, 0.55, 0.12, pink), (0.66, 0.40, 0.15, gold), (0.55, 0.75, 0.10, #FF9CCB); for each, sw = sin(ph + j)·0.02h; stem = a line with butt caps, width max(2, 0.03h), color #3DDBB0, from (a·w, h) to (a·w + sw, b·h); five petals p = 0–4 = filled circles of radius 0.5·rad·h in the flower's color, centered at (a·w + sw + cos(an)·0.6·rad·h, b·h + sin(an)·0.6·rad·h) with an = p·2π/5 + 0.2·ph; then the center = a filled circle of radius 0.4·rad·h, #FFF3C4, at (a·w + sw, b·h). In 4s the petals turn exactly one petal step (2π/5) and the sway completes one period, so the picture loops seamlessly.

A three-question FAQ list: tapping the middle question flips its chevron and slides its answer open, pushing the row below down; a second tap closes it again. 
- Rows: x = 40, width 390, header height 40, open extra height 62, corner radius 12. o = openK(u) for the middle row (oi = o for row 1, 0 for rows 0 and 2). Row tops: row 0 at y = 18, row 1 at y = 64, row 2 at y = 110 + 62·o. Each row = card(40, y, 390, 40 + 62·oi, 12, oi, 0) (no edge).
- Row 1 press: pk = pressK(rel to 0.5, 0.03)·pressK(rel to 2.4, 0.03); the whole row 1 (card, question, chevron, answer) is scaled by pk around (235, y + 20) = (235, 84), the center of its header.
- Question text at x = 56, baseline y + 25, 600 15px: "How do I reset my password?", "Can I change my plan later?", "Do you offer refunds?". Color #E9E8F5; row 1 uses mix(#E9E8F5, #FFFFFF, oi).
- Chevron at (408, y + 20), rot = π·oi, s = 7, lw = 2.4; color #9D9BBB (row 1: mix(#9D9BBB, cyan, oi)).
- Answer (row 1, only while oi > 0), clipped to the row: a = seg(oi, 0.4, 1); a divider fillRect(56, y + 40, 358, 1) rgba(255,255,255,0.07) at full opacity; then two lines, 500 14px #B9B7D3 at opacity a, x = 56: "Yes. Open Settings → Plan and pick a new one." at baseline y + 64 − 6·(1 − a) and "The change starts on your next bill." at baseline y + 85 − 6·(1 − a) (they rise 6px into place).
- Taps at (300, 84) at 0.5s and 2.4s (the middle question's header; at 2.4 the row is open but its header is still there).
- Draw order: row 0, row 1 (card, question, chevron, divider, answer lines — all in the pressed frame), row 2, tap indicator (0.5), tap indicator (2.4).