Tab Bar Part 5

Basics: a monochrome, pencil-sketch style tab bar on a flat light gray background #ECEBE8. Ink is #151515; "ink(a)" means rgba(21,21,21,a). No color, no shadows, no glow, no gradient fills, no container card. Coordinates are px from the drawing center (cx, cy) of a 490×370 cell; everything is clipped to the cell. It plays by itself in a seamless loop.
- Timing: T = seconds since the video start (12 s video). u = (T + 0.25) mod 4. A tap every second at u = 0, 1, 2, 3 (video T = 0.75, 1.75, 2.75 …) selects the tabs SEL = [3, 1, 2, 0] (tab 0 = leftmost). lastTap(u): k = floor(u), dt = u − k, to = SEL[k], from = SEL[(k+3) mod 4]. nextTap(u): the next tap's tab and the seconds until it.
- Springs: springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²). posAt(u, f) = from + (to − from)·f(dt) (in tabs). selAmt(i, u, fOn, fOff): for the new tab fOn(dt), for the previous tab 1 − fOff(dt), else 0.
- Easing (k clamped 0–1): ease = 1 − (1−k)³; easeBack(k) = 1 + 2.9(k−1)³ + 1.9(k−1)²; seg(x, a, b) = clamp((x−a)/(b−a)); bump(x, a, b) = sin(π·seg).
- Tabs: 4 tabs 96 px apart, tab x(i) = cx + (i − 1.5)·96 (fractional i allowed). An idle tab is a dot radius 2.6 in ink(0.35). Labels (where used): HOME, SEARCH, LIKES, PROFILE.
- Tap mark (drawn last, on the tapped tab, at the bar's center line): visible for −0.42 ≤ a < 0.4 (a = seconds relative to the tap). Opacity op = clamp((a + 0.42)/0.18) before the tap, clamp(1 − (a − 0.12)/0.25) after. A 1 px circle in ink(0.35·op) whose radius shrinks from 34 to 20 with ease((a + 0.42)/0.42) before the tap and stays 20 after; for 0 ≤ a < 0.4 also a 1 px ring radius 20 + 110a in ink(0.3·(1 − a/0.4)).
- Lines use round caps. Every value depends only on u, so the 12 s video loops with no jump.

A bold black line slides along a faint track to the tapped tab; its two ends spring separately, so it stretches while it travels, and faint copies of it trail behind.
- Track: a 1 px line in ink(0.16) at y = cy from x(0) − 40 to x(3) + 40, and a faint outline rounded rect (radius 30) from x(0) − 48 to x(3) + 48, y cy − 30 to cy + 30, 1 px in ink(0.10).
- Ends: leading end spring springF(19, 0.55), trailing end springF(11, 0.72) (leading = the side it moves toward). The line runs from x(left position) − 22 to x(right position) + 22, 7 px black #151515.
- Trail: before the black line, the same span at u − 0.022·k for k = 8 … 1, drawn 1 px in ink(0.05 + 0.02·(8 − k)).
- Then the 4 idle dots, then the black line on top, then the tap mark.

Basics: a monochrome, pencil-sketch style tab bar on a flat light gray background #ECEBE8. Ink is #151515; "ink(a)" means rgba(21,21,21,a). No color, no shadows, no glow, no gradient fills, no container card. Coordinates are px from the drawing center (cx, cy) of a 490×370 cell; everything is clipped to the cell. It plays by itself in a seamless loop.
- Timing: T = seconds since the video start (12 s video). u = (T + 0.25) mod 4. A tap every second at u = 0, 1, 2, 3 (video T = 0.75, 1.75, 2.75 …) selects the tabs SEL = [3, 1, 2, 0] (tab 0 = leftmost). lastTap(u): k = floor(u), dt = u − k, to = SEL[k], from = SEL[(k+3) mod 4]. nextTap(u): the next tap's tab and the seconds until it.
- Springs: springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²). posAt(u, f) = from + (to − from)·f(dt) (in tabs). selAmt(i, u, fOn, fOff): for the new tab fOn(dt), for the previous tab 1 − fOff(dt), else 0.
- Easing (k clamped 0–1): ease = 1 − (1−k)³; easeBack(k) = 1 + 2.9(k−1)³ + 1.9(k−1)²; seg(x, a, b) = clamp((x−a)/(b−a)); bump(x, a, b) = sin(π·seg).
- Tabs: 4 tabs 96 px apart, tab x(i) = cx + (i − 1.5)·96 (fractional i allowed). An idle tab is a dot radius 2.6 in ink(0.35). Labels (where used): HOME, SEARCH, LIKES, PROFILE.
- Tap mark (drawn last, on the tapped tab, at the bar's center line): visible for −0.42 ≤ a < 0.4 (a = seconds relative to the tap). Opacity op = clamp((a + 0.42)/0.18) before the tap, clamp(1 − (a − 0.12)/0.25) after. A 1 px circle in ink(0.35·op) whose radius shrinks from 34 to 20 with ease((a + 0.42)/0.42) before the tap and stays 20 after; for 0 ≤ a < 0.4 also a 1 px ring radius 20 + 110a in ink(0.3·(1 − a/0.4)).
- Lines use round caps. Every value depends only on u, so the 12 s video loops with no jump.

The bar is only a thin outline; under the active tab its top edge bulges up like liquid and the bulge flows to the new tab, with faint earlier outlines left behind.
- Bar center y = cy + 18 (call it y). Shape mask (white, on an offscreen canvas, blurred with blur(9px)): a rounded rect from x(0) − 44, width 3·96 + 88, height 64, centered on y, radius 32; a 26 px round-capped stroke from (x(p_T), top + 12) to (x(p), top + 10) (each x clamped 40 px inside the rect's ends); ellipses at posAt(u − 0.09) r 17 (dy 12), posAt(u − 0.06) r 21 (dy 11), posAt(u − 0.03) r 26 (dy 10), and at p r 31 (dy 8) stretched by sx = 1 + st, sy = 1/√(1 + st), where st = min(|velocity|·0.05, 0.5), velocity = (posAt(u + 0.004) − posAt(u − 0.004))/0.008. dy is measured from the rect's top edge; each ellipse center x is clamped 14 px + its radius inside the rect. Position spring springF(13, 0.6).
- Threshold the blurred mask: alpha' = clamp(alpha·26 − 11) (gives a sharp gooey edge), color #151515.
- Outline only: draw the thresholded shape 16 times, offset by R px in 16 directions, then cut out the shape itself (destination-out), leaving a ring R px wide. Current shape R = 1.3 (fully opaque). Ghosts: the same at u − 0.16, u − 0.11, u − 0.06 with R = 0.6 and opacity 0.12, 0.18, 0.24, drawn first.
- Dots: for each tab, c = clamp(1 − |p − i|·1.25); dot at (x(i), y − 26c), radius 2.6 + 3.4c, ink(0.35 + 0.65c). Tap mark at y.

Basics: a monochrome, pencil-sketch style tab bar on a flat light gray background #ECEBE8. Ink is #151515; "ink(a)" means rgba(21,21,21,a). No color, no shadows, no glow, no gradient fills, no container card. Coordinates are px from the drawing center (cx, cy) of a 490×370 cell; everything is clipped to the cell. It plays by itself in a seamless loop.
- Timing: T = seconds since the video start (12 s video). u = (T + 0.25) mod 4. A tap every second at u = 0, 1, 2, 3 (video T = 0.75, 1.75, 2.75 …) selects the tabs SEL = [3, 1, 2, 0] (tab 0 = leftmost). lastTap(u): k = floor(u), dt = u − k, to = SEL[k], from = SEL[(k+3) mod 4]. nextTap(u): the next tap's tab and the seconds until it.
- Springs: springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²). posAt(u, f) = from + (to − from)·f(dt) (in tabs). selAmt(i, u, fOn, fOff): for the new tab fOn(dt), for the previous tab 1 − fOff(dt), else 0.
- Easing (k clamped 0–1): ease = 1 − (1−k)³; easeBack(k) = 1 + 2.9(k−1)³ + 1.9(k−1)²; seg(x, a, b) = clamp((x−a)/(b−a)); bump(x, a, b) = sin(π·seg).
- Tabs: 4 tabs 96 px apart, tab x(i) = cx + (i − 1.5)·96 (fractional i allowed). An idle tab is a dot radius 2.6 in ink(0.35). Labels (where used): HOME, SEARCH, LIKES, PROFILE.
- Tap mark (drawn last, on the tapped tab, at the bar's center line): visible for −0.42 ≤ a < 0.4 (a = seconds relative to the tap). Opacity op = clamp((a + 0.42)/0.18) before the tap, clamp(1 − (a − 0.12)/0.25) after. A 1 px circle in ink(0.35·op) whose radius shrinks from 34 to 20 with ease((a + 0.42)/0.42) before the tap and stays 20 after; for 0 ≤ a < 0.4 also a 1 px ring radius 20 + 110a in ink(0.3·(1 − a/0.4)).
- Lines use round caps. Every value depends only on u, so the 12 s video loops with no jump.

A single line with a dip; a black ball rides in the dip, hops on the way to the new tab and leaves a dotted trail.
- Line y = cy + 14. A 1 px guide line in ink(0.14) from x(0) − 56 to x(3) + 56. Position spring springF(12, 0.7), nx = x(p).
- The black line (1.6 px #151515): from x(0) − 56 straight to nx − 46, then bezier (nx − 30, y)(nx − 32, y + 26)(nx, y + 26), bezier (nx + 32, y + 26)(nx + 30, y)(nx + 46, y), then straight to x(3) + 56.
- Ball center y: y + 26 − 24 − 26·bump(dt, 0, 0.5). Trail: 14 dots radius 1.6 at the ball's position for u − 0.03k (k = 1 … 14) in ink(0.32 − 0.02k). A faint 1 px circle radius 24 in ink(0.12) around the ball, then the ball: a filled black dot radius 11.
- Idle tab dots at y + 22, opacity ink(0.35·al) with al = clamp((|nx − x(i)| − 24)/30) (they hide under the ball).
- Label: the tab name in uppercase, 600 13 px, letter spacing 3 px, ink(0.55), centered at (x, y + 62). It shows the old tab name fading out for dt < 0.15 (1 − dt/0.15), then the new name fading in for dt 0.3 → 0.5.

Basics: a monochrome, pencil-sketch style tab bar on a flat light gray background #ECEBE8. Ink is #151515; "ink(a)" means rgba(21,21,21,a). No color, no shadows, no glow, no gradient fills, no container card. Coordinates are px from the drawing center (cx, cy) of a 490×370 cell; everything is clipped to the cell. It plays by itself in a seamless loop.
- Timing: T = seconds since the video start (12 s video). u = (T + 0.25) mod 4. A tap every second at u = 0, 1, 2, 3 (video T = 0.75, 1.75, 2.75 …) selects the tabs SEL = [3, 1, 2, 0] (tab 0 = leftmost). lastTap(u): k = floor(u), dt = u − k, to = SEL[k], from = SEL[(k+3) mod 4]. nextTap(u): the next tap's tab and the seconds until it.
- Springs: springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²). posAt(u, f) = from + (to − from)·f(dt) (in tabs). selAmt(i, u, fOn, fOff): for the new tab fOn(dt), for the previous tab 1 − fOff(dt), else 0.
- Easing (k clamped 0–1): ease = 1 − (1−k)³; easeBack(k) = 1 + 2.9(k−1)³ + 1.9(k−1)²; seg(x, a, b) = clamp((x−a)/(b−a)); bump(x, a, b) = sin(π·seg).
- Tabs: 4 tabs 96 px apart, tab x(i) = cx + (i − 1.5)·96 (fractional i allowed). An idle tab is a dot radius 2.6 in ink(0.35). Labels (where used): HOME, SEARCH, LIKES, PROFILE.
- Tap mark (drawn last, on the tapped tab, at the bar's center line): visible for −0.42 ≤ a < 0.4 (a = seconds relative to the tap). Opacity op = clamp((a + 0.42)/0.18) before the tap, clamp(1 − (a − 0.12)/0.25) after. A 1 px circle in ink(0.35·op) whose radius shrinks from 34 to 20 with ease((a + 0.42)/0.42) before the tap and stays 20 after; for 0 ≤ a < 0.4 also a 1 px ring radius 20 + 110a in ink(0.3·(1 − a/0.4)).
- Lines use round caps. Every value depends only on u, so the 12 s video loops with no jump.

Four thin rings; the tapped ring fills black from its center with a small pop and sends faint rings outward.
- Rings at (x(i), cy), radius 17·(1 + pop), 1.3 px in ink(0.28 + 0.72a), a = selAmt(i, u, fOn, fOff) with fOn(t) = ease(t/0.28), fOff(t) = ease(t/0.2).
- Fill: a black dot of radius r·a inside.
- Pop for the new tab: 0.3·bump(dt, 0.06, 0.42) − 0.14·bump(dt, 0, 0.08).
- Ripples for the new tab: for m = 0 … 3, k = seg(dt, 0.04 + 0.06m, 0.7 + 0.06m); while 0 < k < 1, a 1 px ring radius r + 6 + 52·ease(k) in ink(0.28·(1 − k)).
- A small dot radius 2.2 at (x, cy + 38) in ink(0.15 + 0.85a).

Basics: a monochrome, pencil-sketch style tab bar on a flat light gray background #ECEBE8. Ink is #151515; "ink(a)" means rgba(21,21,21,a). No color, no shadows, no glow, no gradient fills, no container card. Coordinates are px from the drawing center (cx, cy) of a 490×370 cell; everything is clipped to the cell. It plays by itself in a seamless loop.
- Timing: T = seconds since the video start (12 s video). u = (T + 0.25) mod 4. A tap every second at u = 0, 1, 2, 3 (video T = 0.75, 1.75, 2.75 …) selects the tabs SEL = [3, 1, 2, 0] (tab 0 = leftmost). lastTap(u): k = floor(u), dt = u − k, to = SEL[k], from = SEL[(k+3) mod 4]. nextTap(u): the next tap's tab and the seconds until it.
- Springs: springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²). posAt(u, f) = from + (to − from)·f(dt) (in tabs). selAmt(i, u, fOn, fOff): for the new tab fOn(dt), for the previous tab 1 − fOff(dt), else 0.
- Easing (k clamped 0–1): ease = 1 − (1−k)³; easeBack(k) = 1 + 2.9(k−1)³ + 1.9(k−1)²; seg(x, a, b) = clamp((x−a)/(b−a)); bump(x, a, b) = sin(π·seg).
- Tabs: 4 tabs 96 px apart, tab x(i) = cx + (i − 1.5)·96 (fractional i allowed). An idle tab is a dot radius 2.6 in ink(0.35). Labels (where used): HOME, SEARCH, LIKES, PROFILE.
- Tap mark (drawn last, on the tapped tab, at the bar's center line): visible for −0.42 ≤ a < 0.4 (a = seconds relative to the tap). Opacity op = clamp((a + 0.42)/0.18) before the tap, clamp(1 − (a − 0.12)/0.25) after. A 1 px circle in ink(0.35·op) whose radius shrinks from 34 to 20 with ease((a + 0.42)/0.42) before the tap and stays 20 after; for 0 ≤ a < 0.4 also a 1 px ring radius 20 + 110a in ink(0.3·(1 − a/0.4)).
- Lines use round caps. Every value depends only on u, so the 12 s video loops with no jump.

The active tab's dot stretches into a bold black line and its name fades in above it; the other dots move aside.
- Spring f = springF(14, 0.68). For each tab k_i = max(0, selAmt(i, u, f)); slot widths w_i = 58 + 90·k_i laid out left to right, centered on cx; the dot sits 29 px from its slot's left edge (x_i).
- A faint 1 px baseline in ink(0.10) at y = cy + 16 from cx − 205 to cx + 205. Trail: for k = 6 … 1, at u − 0.03k, a 1 px line at cy + 16 from x_i to x_i + 90·k_i in ink(0.04 + 0.025·(6 − k)) for every tab with k_i > 0.02.
- Active part: a 7 px black line from (x_i, cy) to (x_i + 90·k_i, cy); its dot radius 3.5 black (idle dots 2.6, ink(0.35)).
- Name: uppercase, 600 13 px, letter spacing 3 px, ink(0.6), left-aligned at (x_i − 6 + 10k, cy − 22), opacity clamp((k − 0.3)/0.6), clipped to the box from x_i − 4, width 90k + 12, y cy − 40 … cy − 16.
- The tap mark sits on the tapped tab's position in the layout just before the tap.

Basics: a monochrome, pencil-sketch style tab bar on a flat light gray background #ECEBE8. Ink is #151515; "ink(a)" means rgba(21,21,21,a). No color, no shadows, no glow, no gradient fills, no container card. Coordinates are px from the drawing center (cx, cy) of a 490×370 cell; everything is clipped to the cell. It plays by itself in a seamless loop.
- Timing: T = seconds since the video start (12 s video). u = (T + 0.25) mod 4. A tap every second at u = 0, 1, 2, 3 (video T = 0.75, 1.75, 2.75 …) selects the tabs SEL = [3, 1, 2, 0] (tab 0 = leftmost). lastTap(u): k = floor(u), dt = u − k, to = SEL[k], from = SEL[(k+3) mod 4]. nextTap(u): the next tap's tab and the seconds until it.
- Springs: springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²). posAt(u, f) = from + (to − from)·f(dt) (in tabs). selAmt(i, u, fOn, fOff): for the new tab fOn(dt), for the previous tab 1 − fOff(dt), else 0.
- Easing (k clamped 0–1): ease = 1 − (1−k)³; easeBack(k) = 1 + 2.9(k−1)³ + 1.9(k−1)²; seg(x, a, b) = clamp((x−a)/(b−a)); bump(x, a, b) = sin(π·seg).
- Tabs: 4 tabs 96 px apart, tab x(i) = cx + (i − 1.5)·96 (fractional i allowed). An idle tab is a dot radius 2.6 in ink(0.35). Labels (where used): HOME, SEARCH, LIKES, PROFILE.
- Tap mark (drawn last, on the tapped tab, at the bar's center line): visible for −0.42 ≤ a < 0.4 (a = seconds relative to the tap). Opacity op = clamp((a + 0.42)/0.18) before the tap, clamp(1 − (a − 0.12)/0.25) after. A 1 px circle in ink(0.35·op) whose radius shrinks from 34 to 20 with ease((a + 0.42)/0.42) before the tap and stays 20 after; for 0 ≤ a < 0.4 also a 1 px ring radius 20 + 110a in ink(0.3·(1 − a/0.4)).
- Lines use round caps. Every value depends only on u, so the 12 s video loops with no jump.

Thin bubbles rise from the tapped dot on faint strings, then pop into short lines; the dot grows black.
- Line y = cy + 40; a 1 px line in ink(0.16) from x(0) − 40 to x(3) + 40.
- 7 bubbles from (x(to), y − 10). Bubble j: delay 0.03j, life 0.62 + 0.05·(j mod 3), pr = (dt − delay)/life (skip if pr < 0 or > 1.25). side = [−1, 1, −0.4, 0.6, −0.15, 0.2, 0.9][j], height 70 + 20·(j mod 4), r0 = [11, 7, 13, 6, 9, 12, 8][j]. e = min(pr, 1); x = bx + side·34·ease(e) + 5·sin(2π·1.4e + j); yy = y − 10 − height·ease(0.9e + 0.1e²); r = r0·(0.55 + 0.45e).
- String: a 1 px line from (bx, y) to (x, yy + r) in ink(0.13·fade), fade = 1 until pr 1, then 1 − (pr − 1)/0.25.
- Bubble: for pr ≤ 1 a 1.4 px circle in ink(min(1, pr/0.12)). Pop (pr 1 → 1.25, k = (pr − 1)/0.25): 6 short 1.2 px lines in ink(1 − k) at angles m·60° + j, from r·(1 + 0.6k) to r·(1.25 + 1.1k).
- Dots: a = selAmt with fOn(t) = ease(t/0.3), fOff(t) = ease(t/0.25); dot at (x(i), y − 4a), radius 2.6 + 3.6a, ink(0.35 + 0.65a).