Carousel 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 bottom corners are square). The animation is a 4s loop that plays by itself and is seamless (u = loop time 0–4 in seconds, the state at 4.0s equals the state at 0s); the video is 12s = three loops, T = seconds since the video start (0–12), u = T mod 4. T is used in two places: (1) the 12s cycle index k12 = floor((T mod 12)/4) (0, 1, 2 = which of the three loops) chooses which pages are turned, so the whole 12s is one round trip and 12s → 0s is seamless; (2) the small idle motion in the pictures (waves and flowers, period 4s, see pageArt). Pages are turned twice per loop, at u = 0.5 and u = 2.3. Pager pager(mode) (used by all six; four pages 0–3): SEQ = [0, 1, 2, 3, 2, 1, 0]; second = (u ≥ 2.3); s = 2·k12 + (1 if second else 0) (0–5); T0 = 2.3 if second else 0.5; from = SEQ[s], to = SEQ[s+1], dir = sign(to − from) (so T 0–4: 0→1 then 1→2; T 4–8: 2→3 then 3→2; T 8–12: 2→1 then 1→0); d = easeIO(seg(T0 + 0.1, T0 + 0.45)); R = T0 + 0.5; prog = easeIO(seg(T0 + 0.03, T0 + 0.5)) in mode "tap" (04 only), and in mode "drag" (the others) prog = 0.4·d for u < R, else 0.4 + 0.6·springF(15, 0.68)(u − R) (the finger drags the page 40% of the way, lifts at R and a spring carries it the rest, overshooting about 3% of a page; it has settled long before the next turn); p = from + (to − from)·prog (the current page position, fractional; it can go slightly past the target during the overshoot, and all formulas use it as it is). Both gestures of the current loop, G = [g₀, g₁]: for j = 0, 1 (with c = k12): from = SEQ[2c + j], to = SEQ[2c + j + 1], dir = sign(to − from), T0 = 0.5 (j = 0) or 2.3 (j = 1), R = T0 + 0.5, d = easeIO(seg(T0 + 0.1, T0 + 0.45)), finger x fx = 330 − 150·d when dir > 0 (it slides right → left), 140 + 150·d when dir < 0 (left → right). Both are evaluated every frame, so each finger can approach, press and lift normally. Fingers use both gestures every frame: pagerHolds(y, dx) = for each g in G, holdMark(g.fx + dx, y, g.T0, g.R) (drag fingers; dx = 0 unless given); pagerTaps(xf, y) = for each g in G, tapMark(xf(g), y, rel to g.T0) (tap fingers; xf(g) = the x that gesture taps). Colors: violet #6E5BFF, cyan #38C6FF, pink #FF5CA8, gold #FFD166, mint #3DDBB0. "violet→cyan" is a horizontal linear gradient from the shape's own left edge (violet) to its right edge (cyan), unless other end points are given; grad(stops) = a linear gradient with its color stops evenly spaced (0, 0.5, 1 for three colors). Text: font stack "Segoe UI Variable Display","Segoe UI",sans-serif, weight and size as given (weights used: 600, 700, 800); x is the left edge unless "centered" or "right-aligned"; y is the alphabetic baseline unless "baseline middle" is stated. Caption caption(i, x, y, a) = the page name TITLES[i] ("Mountains", "Ocean", "Garden", "City" for i = 0–3) in 800 18px #FFFFFF at that x/baseline, opacity a (default 1). Opacities multiply with the surrounding opacity. mix(A, B, k) = per-channel linear RGB blend, rounded. rr(x, y, w, h, r) = rounded rect with top-left (x, y), corner radius r (at least 0, at most half the smaller side). 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), since = u − E wrapped into 0…4. 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. Hold indicator holdMark(x, y, T0, T1) (a finger that presses at T0 and lifts at T1; (x, y) is given every frame, so it moves with a drag; a = rel to T0, b = since T1): while T0 ≤ u < T1 it has opacity 1 and scale lerp(0.8, 0.86, ease(a/0.2)) (0.86 after 0.2s); else if b < 0.4 (after the lift): opacity clamp(1 − (b−0.12)/0.25), scale lerp(0.86, 1, ease(b/0.2)); else if −0.42 ≤ a < 0 it approaches exactly like the tap indicator before its tap; otherwise it is hidden. Same circle as the tap indicator. Its ripple is the same as the tap's and depends only on a: it is drawn whenever u ≥ T0 and 0 ≤ a < 0.4. Page dots pageDots(x, y, n, p, r, gap, pill, gradOn) (defaults r = 4, gap = 14, pill = 0, gradOn off): widths wᵢ = 2r + pill·max(0, 1 − |p − i|); total = Σwᵢ + gap·(n − 1); the first dot starts at x − total/2 and each next one starts gap px after the previous one's right edge; aᵢ = max(0, 1 − |p − i|); dot i = rr(left, y − r, wᵢ, 2r, r) filled mix(#3A3852, #FFFFFF, aᵢ) (just #3A3852 when aᵢ ≤ 0.01); then, only when gradOn and aᵢ > 0.5, the same rr filled violet→cyan across that dot on top at opacity 2aᵢ − 1 (the color turns gradually from the halfway point). Rolling word rollDigits(x, y, from, to, k, font, color, h, up): text centered with baseline middle, clipped to the rect (x − 2h, y − 0.62h, 4h, 1.24h); e = ease(k); D = −1.05h if up, else +1.05h; if k < 1, the old word at opacity (1 − e) at y + D·e; if k > 0, the new word at opacity e at y + D·(e − 1) (with up the old word moves up and out and the new one comes up from below; without up it is the other way round). Picture pageArt(i, x, y, w, h, r) (made-up pictures; i = 0 mountains, 1 ocean, 2 garden, 3 city; 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. i = 0: fillRect(0, 0, w, h) with grad from (0, 0) to (0, h): #3B2E86, #7E5BD6, #F3A5C8; a #FFD8A8 circle of radius 0.13h at (0.7w, 0.42h); mountains = polygon (0, h), (0.32w, 0.48h), (0.55w, 0.78h), (0.75w, 0.58h), (w, 0.85h), (w, h) filled #2A2266 (no motion). i = 1: grad (0, 0) → (0, h): #1B3F7A, #38C6FF; a rgba(255,255,255,0.85) circle of radius 0.08h at (0.3w, 0.3h); three waves k = 0, 1, 2 (colors #2C6FC0, #1F55A0, #173F80, drawn in that order): a polygon from (0, h) through the points (j/20·w, h·(0.62 + 0.12k) + sin(0.9j + ph + k)·0.03h) for j = 0–20, then (w, h), filled. i = 2: fillRect(0, 0, w, h) with a linear gradient from (0, 0) #183A33 to (w, h) #2E7A63; 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), drawn in that order; for each, sw = sin(ph + j)·0.02h; stem = a line with butt caps, width max(2, 0.03h), #3DDBB0, from (a·w, h) to (a·w + sw, b·h); five petals q = 0–4 = filled circles of radius 0.5·rad·h in the flower's color at (a·w + sw + cos(an)·0.6·rad·h, b·h + sin(an)·0.6·rad·h), an = q·2π/5 + 0.2·ph; then a center circle of radius 0.4·rad·h, #FFF3C4, at (a·w + sw, b·h). i = 3: fillRect(0, 0, w, h) with grad (0, 0) → (0, h): #1B1446, #5B2C86, #FF5CA8; a #FFE9B8 moon of radius 0.08h at (0.78w, 0.28h); seven buildings k = 0–6 with (bx, top) = (0.04, 0.55), (0.16, 0.38), (0.30, 0.50), (0.42, 0.30), (0.56, 0.46), (0.70, 0.36), (0.84, 0.52), in order: fillRect(bx·w, top·h, 0.13w, h) in #24184A (even k) or #1A1238 (odd k), then its four windows j = 0–3, fillRect(bx·w + 0.03w, top·h + 0.06h + 0.1h·j, 0.025w, 0.04h) in rgba(255,209,102,0.7) (no motion). In 4s the waves and the sway complete one period and the petals turn exactly one petal step, so the pictures loop seamlessly.

Four wide picture cards are swiped one by one; under them the page dots follow the swipe and the active dot stretches into a violet→cyan pill. 
- p = pager in mode "drag". Card size W = 330, H = 150, gap 20 (step 350).
- Cards: for i = 0–3: x = 235 + (i − p)·350; skip the card if |i − p| > 1.5 (so the resting neighbors, exactly 350px away, are always drawn) (only the current card and its direct neighbors). pageArt(i, x, 93, 330, 150, 18) (the card spans x − 165 … x + 165, y 18–168), then right after it caption(i, x − 149, 152). At rest the current card is at x 70–400 and the neighbors peek in 50px at the stage edges (x 0–50 on the left, 420–470 on the right).
- Dots: pageDots(235, 196, 4, p, r = 4, gap = 14, pill = 18, gradient on) (total width 92, starting at x = 189; at rest the active pill is 26×8px in violet→cyan, the other dots 8×8px #3A3852; during a swipe the extra width and the color move from one dot to the next).
- Fingers: pagerHolds(y = 95) (both drags of the loop).
- Draw order: cards i = 0–3 (each followed by its caption), dots, finger.