Line Chart Part 1

Basics: a flat light-gray background #ECEBE8; ink #151515 only, plus the same ink at lower opacity, written ink(a) = rgba(21,21,21,a). No color, no shadows, no glow, no gradients, no card or frame. All coordinates are px relative to the chart origin O (0, 0); the component is clipped to the rectangle x −245…245, y −165…205. The animation is a 4s loop that plays by itself and is seamless; the video is 12s = three loops. T = seconds since the video start; u = (T + 0.25) mod 4 (the first frame is already 0.25s after a tap). A tap every second at u = 0, 1, 2, 3 (video T = 0.75, 1.75, 2.75 …). SEL = [3, 1, 2, 0]; tapInfo(u): k = floor(u), dt = u − k (seconds since the last tap, 0–1), from = SEL[(k+3) mod 4], to = SEL[k]. Ranges i = 0–3: labels "W", "M", "6M", "Y"; data (7 values 0–1 each): W [0.34, 0.62, 0.44, 0.76, 0.50, 0.70, 0.58] (zigzag), M [0.16, 0.28, 0.24, 0.44, 0.56, 0.64, 0.86] (rising), 6M [0.30, 0.56, 0.80, 0.88, 0.70, 0.46, 0.38] (hill), Y [0.82, 0.58, 0.36, 0.20, 0.34, 0.62, 0.92] (valley). A = data[from], B = data[to]. Point n (0–6) at x X(n) = −168 + 56n; value v at y Y(v) = 22 − 132v (baseline y 22, top y −110). The chart (identical in all six at rest): three guide lines at v = 1/3, 2/3, 1 from x −190 to 190, 1px ink(0.08); the baseline y 22 from x −190 to 190, 1px ink(0.22); a tick dot radius 1.8 ink(0.3) under each point at (X(n), 31). The line: a smooth curve through the 7 points — Catmull-Rom as cubic Béziers (segment n: c1 = Pn + (Pn+1 − Pn−1)/6, c2 = Pn+1 − (Pn+2 − Pn)/6, end points repeated), sampled 28 steps per segment, every y clamped to ≤ 22 (never below the baseline), stroked 4px #151515, round caps and joins. Knots: dots radius 3.2 #151515 on points 0–5; the last point gets a dot radius 6 #151515 and a 1px ring radius 13 ink(0.16). Range control under the chart: labels at x (i − 1.5)·84, baseline y 70, font 600 15px "Segoe UI Variable Display","Segoe UI",sans-serif, letter-spacing 3px, centered; a dot radius 2.2 at (x, 83). Selection amount sel(i): for the new range ease(dt/0.22), for the old range 1 − ease(dt/0.18), else 0 (1 for the selected one at rest); label color ink(0.36 + 0.64·sel), dot ink(sel). Tap indicator on the tapped label at (x of label, 65), drawn last: a = time from that tap; visible for −0.42 ≤ a < 0.4; a 1px ring of radius lerp(34, 20, ease((a + 0.42)/0.42)) before the tap and 20 after, ink(0.35·op) with op = clamp((a + 0.42)/0.18) before, clamp(1 − (a − 0.12)/0.25) after; for 0 ≤ a < 0.4 one more 1px ring radius 20 + 110a at ink(0.3·(1 − a/0.4)). springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²). Easing (k clamped 0–1): ease = 1 − (1−k)³; easeIn = k³; easeIO = 4k³ for k < 0.5 else 1 − (−2k+2)³/2. seg(x, a, b) = clamp((x−a)/(b−a)); bump(x, a, b) = sin(π·seg). Faint helper lines are 1px. Every value depends only on u, so 4.0s equals 0s; nothing appears or disappears in one frame.

All seven points spring to the new range's values together; faint copies of the line trail behind.
- Values v(n) = lerp(A[n], B[n], springF(14, 0.55)(dt)).
- Trails (drawn first): for k = 7 down to 1, the line computed at u − 0.025k, 1px ink(0.04 + 0.022·(7 − k)).
- Then the line (4px) and knots at v.

Basics: a flat light-gray background #ECEBE8; ink #151515 only, plus the same ink at lower opacity, written ink(a) = rgba(21,21,21,a). No color, no shadows, no glow, no gradients, no card or frame. All coordinates are px relative to the chart origin O (0, 0); the component is clipped to the rectangle x −245…245, y −165…205. The animation is a 4s loop that plays by itself and is seamless; the video is 12s = three loops. T = seconds since the video start; u = (T + 0.25) mod 4 (the first frame is already 0.25s after a tap). A tap every second at u = 0, 1, 2, 3 (video T = 0.75, 1.75, 2.75 …). SEL = [3, 1, 2, 0]; tapInfo(u): k = floor(u), dt = u − k (seconds since the last tap, 0–1), from = SEL[(k+3) mod 4], to = SEL[k]. Ranges i = 0–3: labels "W", "M", "6M", "Y"; data (7 values 0–1 each): W [0.34, 0.62, 0.44, 0.76, 0.50, 0.70, 0.58] (zigzag), M [0.16, 0.28, 0.24, 0.44, 0.56, 0.64, 0.86] (rising), 6M [0.30, 0.56, 0.80, 0.88, 0.70, 0.46, 0.38] (hill), Y [0.82, 0.58, 0.36, 0.20, 0.34, 0.62, 0.92] (valley). A = data[from], B = data[to]. Point n (0–6) at x X(n) = −168 + 56n; value v at y Y(v) = 22 − 132v (baseline y 22, top y −110). The chart (identical in all six at rest): three guide lines at v = 1/3, 2/3, 1 from x −190 to 190, 1px ink(0.08); the baseline y 22 from x −190 to 190, 1px ink(0.22); a tick dot radius 1.8 ink(0.3) under each point at (X(n), 31). The line: a smooth curve through the 7 points — Catmull-Rom as cubic Béziers (segment n: c1 = Pn + (Pn+1 − Pn−1)/6, c2 = Pn+1 − (Pn+2 − Pn)/6, end points repeated), sampled 28 steps per segment, every y clamped to ≤ 22 (never below the baseline), stroked 4px #151515, round caps and joins. Knots: dots radius 3.2 #151515 on points 0–5; the last point gets a dot radius 6 #151515 and a 1px ring radius 13 ink(0.16). Range control under the chart: labels at x (i − 1.5)·84, baseline y 70, font 600 15px "Segoe UI Variable Display","Segoe UI",sans-serif, letter-spacing 3px, centered; a dot radius 2.2 at (x, 83). Selection amount sel(i): for the new range ease(dt/0.22), for the old range 1 − ease(dt/0.18), else 0 (1 for the selected one at rest); label color ink(0.36 + 0.64·sel), dot ink(sel). Tap indicator on the tapped label at (x of label, 65), drawn last: a = time from that tap; visible for −0.42 ≤ a < 0.4; a 1px ring of radius lerp(34, 20, ease((a + 0.42)/0.42)) before the tap and 20 after, ink(0.35·op) with op = clamp((a + 0.42)/0.18) before, clamp(1 − (a − 0.12)/0.25) after; for 0 ≤ a < 0.4 one more 1px ring radius 20 + 110a at ink(0.3·(1 − a/0.4)). springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²). Easing (k clamped 0–1): ease = 1 − (1−k)³; easeIn = k³; easeIO = 4k³ for k < 0.5 else 1 − (−2k+2)³/2. seg(x, a, b) = clamp((x−a)/(b−a)); bump(x, a, b) = sin(π·seg). Faint helper lines are 1px. Every value depends only on u, so 4.0s equals 0s; nothing appears or disappears in one frame.

The old line is erased from left to right, and a pen draws the new line from left to right right behind it.
- Eraser x xt = lerp(−168, 168, easeIO(seg(dt, 0, 0.4))); pen x xh = lerp(−168, 168, easeIO(seg(dt, 0.14, 0.62))) (the pen always stays behind the eraser).
- Ghost: the old curve, 1px ink(0.16·(1 − seg(dt, 0.3, 0.8))).
- Old line: while dt < 0.4, the old curve stroked 4px only for x from xt to 168 (cut ends interpolated on the curve). New line: while dt > 0.14, the new curve stroked 4px only for x from −168 to xh.
- Old knots: radius 3.2·clamp(1 − (xt − x)/14); old last dot and ring scaled by 1 − ease(seg(dt, 0.28, 0.38)).
- New knots: scale g·clamp(1 + (xh − x)/14), g = clamp((dt − 0.14)/0.06) (they grow just as the pen arrives); the last dot (radius 6) and ring (radius 13) use the same scale.
- Pen: opacity pa = clamp((dt − 0.14)/0.05)·(1 − seg(dt, 0.56, 0.64)); a vertical 1px line ink(0.14·pa) at xh from y −118 to 22, and a dot radius 5 ink(pa) on the new curve at xh.
- Eraser mark: a 1px ring radius 8 ink(0.3·ea) on the old curve at xt, ea = clamp(dt/0.05)·(1 − seg(dt, 0.3, 0.4)).

Basics: a flat light-gray background #ECEBE8; ink #151515 only, plus the same ink at lower opacity, written ink(a) = rgba(21,21,21,a). No color, no shadows, no glow, no gradients, no card or frame. All coordinates are px relative to the chart origin O (0, 0); the component is clipped to the rectangle x −245…245, y −165…205. The animation is a 4s loop that plays by itself and is seamless; the video is 12s = three loops. T = seconds since the video start; u = (T + 0.25) mod 4 (the first frame is already 0.25s after a tap). A tap every second at u = 0, 1, 2, 3 (video T = 0.75, 1.75, 2.75 …). SEL = [3, 1, 2, 0]; tapInfo(u): k = floor(u), dt = u − k (seconds since the last tap, 0–1), from = SEL[(k+3) mod 4], to = SEL[k]. Ranges i = 0–3: labels "W", "M", "6M", "Y"; data (7 values 0–1 each): W [0.34, 0.62, 0.44, 0.76, 0.50, 0.70, 0.58] (zigzag), M [0.16, 0.28, 0.24, 0.44, 0.56, 0.64, 0.86] (rising), 6M [0.30, 0.56, 0.80, 0.88, 0.70, 0.46, 0.38] (hill), Y [0.82, 0.58, 0.36, 0.20, 0.34, 0.62, 0.92] (valley). A = data[from], B = data[to]. Point n (0–6) at x X(n) = −168 + 56n; value v at y Y(v) = 22 − 132v (baseline y 22, top y −110). The chart (identical in all six at rest): three guide lines at v = 1/3, 2/3, 1 from x −190 to 190, 1px ink(0.08); the baseline y 22 from x −190 to 190, 1px ink(0.22); a tick dot radius 1.8 ink(0.3) under each point at (X(n), 31). The line: a smooth curve through the 7 points — Catmull-Rom as cubic Béziers (segment n: c1 = Pn + (Pn+1 − Pn−1)/6, c2 = Pn+1 − (Pn+2 − Pn)/6, end points repeated), sampled 28 steps per segment, every y clamped to ≤ 22 (never below the baseline), stroked 4px #151515, round caps and joins. Knots: dots radius 3.2 #151515 on points 0–5; the last point gets a dot radius 6 #151515 and a 1px ring radius 13 ink(0.16). Range control under the chart: labels at x (i − 1.5)·84, baseline y 70, font 600 15px "Segoe UI Variable Display","Segoe UI",sans-serif, letter-spacing 3px, centered; a dot radius 2.2 at (x, 83). Selection amount sel(i): for the new range ease(dt/0.22), for the old range 1 − ease(dt/0.18), else 0 (1 for the selected one at rest); label color ink(0.36 + 0.64·sel), dot ink(sel). Tap indicator on the tapped label at (x of label, 65), drawn last: a = time from that tap; visible for −0.42 ≤ a < 0.4; a 1px ring of radius lerp(34, 20, ease((a + 0.42)/0.42)) before the tap and 20 after, ink(0.35·op) with op = clamp((a + 0.42)/0.18) before, clamp(1 − (a − 0.12)/0.25) after; for 0 ≤ a < 0.4 one more 1px ring radius 20 + 110a at ink(0.3·(1 − a/0.4)). springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²). Easing (k clamped 0–1): ease = 1 − (1−k)³; easeIn = k³; easeIO = 4k³ for k < 0.5 else 1 − (−2k+2)³/2. seg(x, a, b) = clamp((x−a)/(b−a)); bump(x, a, b) = sin(π·seg). Faint helper lines are 1px. Every value depends only on u, so 4.0s equals 0s; nothing appears or disappears in one frame.

Each point hops in a small arc to its new value, one after another from left to right; the line follows the dots, and each hop leaves a dotted trail.
- Point n: d = 0.04n, p = seg(dt, d, d + 0.36), hop height h = 16 + 34·|B[n] − A[n]|; position x = X(n) + 11·sin(πp), y = Y(lerp(A[n], B[n], easeIO(p))) − h·sin(πp).
- Trails (drawn first): for each point, k = 9 down to 1, a dot radius 1.6 ink(0.30 − 0.028k) at the position computed at u − 0.03k.
- Line: the smooth curve through the 7 current positions, 4px.
- Knots grow while hopping: radius 3.2 + 2.6·sin(πp) (the last one 6 + 1.5·sin(πp), with its ring radius 13).
- Landing ring: for 0 < (dt − d − 0.36) < 0.22, with k = that / 0.22, a 1px ring radius 7 + 16·ease(k) ink(0.26·(1 − k)) at the point.

Basics: a flat light-gray background #ECEBE8; ink #151515 only, plus the same ink at lower opacity, written ink(a) = rgba(21,21,21,a). No color, no shadows, no glow, no gradients, no card or frame. All coordinates are px relative to the chart origin O (0, 0); the component is clipped to the rectangle x −245…245, y −165…205. The animation is a 4s loop that plays by itself and is seamless; the video is 12s = three loops. T = seconds since the video start; u = (T + 0.25) mod 4 (the first frame is already 0.25s after a tap). A tap every second at u = 0, 1, 2, 3 (video T = 0.75, 1.75, 2.75 …). SEL = [3, 1, 2, 0]; tapInfo(u): k = floor(u), dt = u − k (seconds since the last tap, 0–1), from = SEL[(k+3) mod 4], to = SEL[k]. Ranges i = 0–3: labels "W", "M", "6M", "Y"; data (7 values 0–1 each): W [0.34, 0.62, 0.44, 0.76, 0.50, 0.70, 0.58] (zigzag), M [0.16, 0.28, 0.24, 0.44, 0.56, 0.64, 0.86] (rising), 6M [0.30, 0.56, 0.80, 0.88, 0.70, 0.46, 0.38] (hill), Y [0.82, 0.58, 0.36, 0.20, 0.34, 0.62, 0.92] (valley). A = data[from], B = data[to]. Point n (0–6) at x X(n) = −168 + 56n; value v at y Y(v) = 22 − 132v (baseline y 22, top y −110). The chart (identical in all six at rest): three guide lines at v = 1/3, 2/3, 1 from x −190 to 190, 1px ink(0.08); the baseline y 22 from x −190 to 190, 1px ink(0.22); a tick dot radius 1.8 ink(0.3) under each point at (X(n), 31). The line: a smooth curve through the 7 points — Catmull-Rom as cubic Béziers (segment n: c1 = Pn + (Pn+1 − Pn−1)/6, c2 = Pn+1 − (Pn+2 − Pn)/6, end points repeated), sampled 28 steps per segment, every y clamped to ≤ 22 (never below the baseline), stroked 4px #151515, round caps and joins. Knots: dots radius 3.2 #151515 on points 0–5; the last point gets a dot radius 6 #151515 and a 1px ring radius 13 ink(0.16). Range control under the chart: labels at x (i − 1.5)·84, baseline y 70, font 600 15px "Segoe UI Variable Display","Segoe UI",sans-serif, letter-spacing 3px, centered; a dot radius 2.2 at (x, 83). Selection amount sel(i): for the new range ease(dt/0.22), for the old range 1 − ease(dt/0.18), else 0 (1 for the selected one at rest); label color ink(0.36 + 0.64·sel), dot ink(sel). Tap indicator on the tapped label at (x of label, 65), drawn last: a = time from that tap; visible for −0.42 ≤ a < 0.4; a 1px ring of radius lerp(34, 20, ease((a + 0.42)/0.42)) before the tap and 20 after, ink(0.35·op) with op = clamp((a + 0.42)/0.18) before, clamp(1 − (a − 0.12)/0.25) after; for 0 ≤ a < 0.4 one more 1px ring radius 20 + 110a at ink(0.3·(1 − a/0.4)). springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²). Easing (k clamped 0–1): ease = 1 − (1−k)³; easeIn = k³; easeIO = 4k³ for k < 0.5 else 1 − (−2k+2)³/2. seg(x, a, b) = clamp((x−a)/(b−a)); bump(x, a, b) = sin(π·seg). Faint helper lines are 1px. Every value depends only on u, so 4.0s equals 0s; nothing appears or disappears in one frame.

Starting right above the tapped range label, the values change one after another outward to both sides, like a wave.
- Origin xT = x of the tapped label ((to − 1.5)·84). Delay of point n: dl(n) = 0.055·|X(n) − xT|/56. Value v(n) = lerp(A[n], B[n], springF(22, 0.6)(dt − dl(n))).
- Wave fronts: two 1px vertical lines (y −118 to 22) at x = xT ± dt·56/0.055, opacity 0.16·wa·clamp((180 − x)/30)·clamp((x + 180)/30), wa = clamp(dt/0.04)·(1 − seg(dt, 0.24, 0.4)).
- At each point, p = seg(dt, dl(n), dl(n) + 0.45); for 0 < p < 1, with a = clamp(p/0.08)·(1 − p): a 1px vertical line from Y(A[n]) to Y(B[n]) at ink(0.28a) and a 1px ring radius 6 + 14·ease(p) at ink(0.24a) around the moving point.
- Then the line (4px) and knots at v.

Basics: a flat light-gray background #ECEBE8; ink #151515 only, plus the same ink at lower opacity, written ink(a) = rgba(21,21,21,a). No color, no shadows, no glow, no gradients, no card or frame. All coordinates are px relative to the chart origin O (0, 0); the component is clipped to the rectangle x −245…245, y −165…205. The animation is a 4s loop that plays by itself and is seamless; the video is 12s = three loops. T = seconds since the video start; u = (T + 0.25) mod 4 (the first frame is already 0.25s after a tap). A tap every second at u = 0, 1, 2, 3 (video T = 0.75, 1.75, 2.75 …). SEL = [3, 1, 2, 0]; tapInfo(u): k = floor(u), dt = u − k (seconds since the last tap, 0–1), from = SEL[(k+3) mod 4], to = SEL[k]. Ranges i = 0–3: labels "W", "M", "6M", "Y"; data (7 values 0–1 each): W [0.34, 0.62, 0.44, 0.76, 0.50, 0.70, 0.58] (zigzag), M [0.16, 0.28, 0.24, 0.44, 0.56, 0.64, 0.86] (rising), 6M [0.30, 0.56, 0.80, 0.88, 0.70, 0.46, 0.38] (hill), Y [0.82, 0.58, 0.36, 0.20, 0.34, 0.62, 0.92] (valley). A = data[from], B = data[to]. Point n (0–6) at x X(n) = −168 + 56n; value v at y Y(v) = 22 − 132v (baseline y 22, top y −110). The chart (identical in all six at rest): three guide lines at v = 1/3, 2/3, 1 from x −190 to 190, 1px ink(0.08); the baseline y 22 from x −190 to 190, 1px ink(0.22); a tick dot radius 1.8 ink(0.3) under each point at (X(n), 31). The line: a smooth curve through the 7 points — Catmull-Rom as cubic Béziers (segment n: c1 = Pn + (Pn+1 − Pn−1)/6, c2 = Pn+1 − (Pn+2 − Pn)/6, end points repeated), sampled 28 steps per segment, every y clamped to ≤ 22 (never below the baseline), stroked 4px #151515, round caps and joins. Knots: dots radius 3.2 #151515 on points 0–5; the last point gets a dot radius 6 #151515 and a 1px ring radius 13 ink(0.16). Range control under the chart: labels at x (i − 1.5)·84, baseline y 70, font 600 15px "Segoe UI Variable Display","Segoe UI",sans-serif, letter-spacing 3px, centered; a dot radius 2.2 at (x, 83). Selection amount sel(i): for the new range ease(dt/0.22), for the old range 1 − ease(dt/0.18), else 0 (1 for the selected one at rest); label color ink(0.36 + 0.64·sel), dot ink(sel). Tap indicator on the tapped label at (x of label, 65), drawn last: a = time from that tap; visible for −0.42 ≤ a < 0.4; a 1px ring of radius lerp(34, 20, ease((a + 0.42)/0.42)) before the tap and 20 after, ink(0.35·op) with op = clamp((a + 0.42)/0.18) before, clamp(1 − (a − 0.12)/0.25) after; for 0 ≤ a < 0.4 one more 1px ring radius 20 + 110a at ink(0.3·(1 − a/0.4)). springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²). Easing (k clamped 0–1): ease = 1 − (1−k)³; easeIn = k³; easeIO = 4k³ for k < 0.5 else 1 − (−2k+2)³/2. seg(x, a, b) = clamp((x−a)/(b−a)); bump(x, a, b) = sin(π·seg). Faint helper lines are 1px. Every value depends only on u, so 4.0s equals 0s; nothing appears or disappears in one frame.

Every point drops to the baseline, then rises on a thin vertical stem to its new value with a little spring.
- Point n: d = 0.02n. If dt < d + 0.2: v = lerp(A[n], 0, easeIn(seg(dt, d, d + 0.18))); else v = B[n]·springF(20, 0.6)(dt − d − 0.2).
- Ghost: the old curve, 1px ink(0.14·(1 − seg(dt, 0.3, 0.65))).
- Targets: a 14px horizontal 1px mark centered at (X(n), Y(B[n])) at ink(0.3·bump(dt, 0.04, 0.8)).
- Stems: a 1.6px vertical line from (X(n), 22) up to the point, ink(0.45·clamp(dt/0.12)·(1 − seg(dt, 0.5, 0.8))).
- Then the line (4px, never below the baseline) and knots at v.

Basics: a flat light-gray background #ECEBE8; ink #151515 only, plus the same ink at lower opacity, written ink(a) = rgba(21,21,21,a). No color, no shadows, no glow, no gradients, no card or frame. All coordinates are px relative to the chart origin O (0, 0); the component is clipped to the rectangle x −245…245, y −165…205. The animation is a 4s loop that plays by itself and is seamless; the video is 12s = three loops. T = seconds since the video start; u = (T + 0.25) mod 4 (the first frame is already 0.25s after a tap). A tap every second at u = 0, 1, 2, 3 (video T = 0.75, 1.75, 2.75 …). SEL = [3, 1, 2, 0]; tapInfo(u): k = floor(u), dt = u − k (seconds since the last tap, 0–1), from = SEL[(k+3) mod 4], to = SEL[k]. Ranges i = 0–3: labels "W", "M", "6M", "Y"; data (7 values 0–1 each): W [0.34, 0.62, 0.44, 0.76, 0.50, 0.70, 0.58] (zigzag), M [0.16, 0.28, 0.24, 0.44, 0.56, 0.64, 0.86] (rising), 6M [0.30, 0.56, 0.80, 0.88, 0.70, 0.46, 0.38] (hill), Y [0.82, 0.58, 0.36, 0.20, 0.34, 0.62, 0.92] (valley). A = data[from], B = data[to]. Point n (0–6) at x X(n) = −168 + 56n; value v at y Y(v) = 22 − 132v (baseline y 22, top y −110). The chart (identical in all six at rest): three guide lines at v = 1/3, 2/3, 1 from x −190 to 190, 1px ink(0.08); the baseline y 22 from x −190 to 190, 1px ink(0.22); a tick dot radius 1.8 ink(0.3) under each point at (X(n), 31). The line: a smooth curve through the 7 points — Catmull-Rom as cubic Béziers (segment n: c1 = Pn + (Pn+1 − Pn−1)/6, c2 = Pn+1 − (Pn+2 − Pn)/6, end points repeated), sampled 28 steps per segment, every y clamped to ≤ 22 (never below the baseline), stroked 4px #151515, round caps and joins. Knots: dots radius 3.2 #151515 on points 0–5; the last point gets a dot radius 6 #151515 and a 1px ring radius 13 ink(0.16). Range control under the chart: labels at x (i − 1.5)·84, baseline y 70, font 600 15px "Segoe UI Variable Display","Segoe UI",sans-serif, letter-spacing 3px, centered; a dot radius 2.2 at (x, 83). Selection amount sel(i): for the new range ease(dt/0.22), for the old range 1 − ease(dt/0.18), else 0 (1 for the selected one at rest); label color ink(0.36 + 0.64·sel), dot ink(sel). Tap indicator on the tapped label at (x of label, 65), drawn last: a = time from that tap; visible for −0.42 ≤ a < 0.4; a 1px ring of radius lerp(34, 20, ease((a + 0.42)/0.42)) before the tap and 20 after, ink(0.35·op) with op = clamp((a + 0.42)/0.18) before, clamp(1 − (a − 0.12)/0.25) after; for 0 ≤ a < 0.4 one more 1px ring radius 20 + 110a at ink(0.3·(1 − a/0.4)). springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²). Easing (k clamped 0–1): ease = 1 − (1−k)³; easeIn = k³; easeIO = 4k³ for k < 0.5 else 1 − (−2k+2)³/2. seg(x, a, b) = clamp((x−a)/(b−a)); bump(x, a, b) = sin(π·seg). Faint helper lines are 1px. Every value depends only on u, so 4.0s equals 0s; nothing appears or disappears in one frame.

A thin vertical cursor sweeps from left to right; the line switches to the new values exactly where the cursor passes, and a dot rides the curve at the cursor.
- Cursor x xc(u) = lerp(−208, 208, easeIO(seg(dt, 0.04, 0.56))); opacity ca(u) = clamp(dt/0.06)·(1 − seg(dt, 0.52, 0.64)).
- Values: k = clamp((xc − X(n))/44 + 0.5), v(n) = lerp(A[n], B[n], k²(3 − 2k)).
- Cursor trails (drawn first): for k = 6 down to 1, a 1px vertical line (y −118 to 22) at xc(u − 0.02k) with ink(ca(u − 0.02k)·(0.13 − 0.018k)).
- Cursor: a 1px vertical line at xc, y −118 to 22, ink(0.5·ca).
- Line (4px) and knots at v; then the reading dot: da = ca·clamp((xc + 188)/20)·clamp((188 − xc)/20); at x = clamp(xc, −168, 168) on the curve, a 1px ring radius 11 ink(0.35·da) and a dot radius 5 ink(da).