Tab Bar Part 2

A bottom tab bar animation on a 470×240 stage with a dark #13131C background (clip to the stage). It plays by itself in a seamless 4s loop: a tap lands every 1.0s, at 0, 1, 2 and 3s (times are seconds from the loop start), selecting the tabs 4, 2, 3, 1 in that order (tab 1 is the leftmost), so the moves are 3, 2, 1 and 2 tabs long. Treat the taps as an endless cycle: whatever is still running from the 2s and 3s taps (springs, late bubbles or pops) carries on into the next loop, and frame 0 already shows it. Tab 1 is the one selected before the 0s tap.
- Bar: 410×92px, corner radius 30px, centered horizontally, its center 160px from the stage top. Fill #1B1A28, a soft shadow (black 45%, canvas shadowBlur 18, 6px down), and a 1px border white 8% stroked 1px inside the edge. Four tabs split the bar into equal quarters; tab i (0–3 from the left) has its center x = barLeft + 102.5·(i + 0.5). Tabs 1–4 are Home, Search, Likes (heart) and Profile.
- Icons (drawn by hand, no icon font): in units where 1 = 17px (so each icon is about 25–30px wide), centered on the tab, stroked with round caps and joins, 2.8px wide, color #8C8AA8 when not selected. The line width stays 2.8px when an icon is scaled, unless a prompt says otherwise. A gradient "across the icon" spans its box from (−1, −1) to (1, 1) in icon units.
  - Home: closed polygon (−0.72, 0.78) (−0.72, −0.12) (0, −0.78) (0.72, −0.12) (0.72, 0.78), plus a door, an open line (−0.2, 0.78)→(−0.2, 0.28)→(0.2, 0.28)→(0.2, 0.78).
  - Search: a circle at (−0.12, −0.12) with radius 0.56, plus a handle line (0.29, 0.29)→(0.78, 0.78).
  - Heart: M(0, 0.78) C(−0.35, 0.5)(−0.92, 0.12)(−0.88, −0.3) C(−0.84, −0.74)(−0.24, −0.86)(0, −0.42) C(0.24, −0.86)(0.84, −0.74)(0.88, −0.3) C(0.92, 0.12)(0.35, 0.5)(0, 0.78) Z.
  - Profile: a head circle at (0, −0.4) with radius 0.34, plus a body M(−0.78, 0.8) C(−0.78, 0.08)(0.78, 0.08)(0.78, 0.8) Z.
- Spring: x(t) = 1 − e^(−ζω₀t)·(cos ω_d t + (ζω₀/ω_d)·sin ω_d t), ω_d = ω₀√(1−ζ²), t = seconds since the tap (x = 0 before). An indicator "position" p is measured in tabs: p = from + (to − from)·x(t), where from is the previously selected tab and to the tapped one (every spring has settled to well under 1px by the next tap, so restarting from the tab rather than the exact current position is fine). dt below always means seconds since the latest tap.
- Text: a sans-serif such as Inter or Segoe UI.
- Colors: violet #6E5BFF, cyan #38C6FF, pink #FF5CA8, gray #8C8AA8. "Mix A→B by k" means each RGB channel linearly, k clamped to 0–1. easeOutCubic(k) = 1 − (1 − k)³ and easeInOutCubic(k) = 4k³ if k < 0.5, else 1 − (−2k + 2)³/2, with k clamped to 0–1. seg(dt, a, b) = clamp((dt − a)/(b − a), 0, 1).
- Tap indicator (draw it last, on top): a 23px-radius circle, fill white 38%, 3.5px white border, soft dark shadow (black 35%, canvas shadowBlur 10), over the tab that is about to be tapped, at the bar's vertical center (even where a prompt lifts or lowers the icons). Time a = seconds relative to the tap (negative = before). From a = −0.42 to −0.1 it scales 125% → 100% (ease-out cubic) while fading in over the first 0.18s; from −0.1 to 0 it presses down to 80% (linear); from 0 to 0.2 it grows back to 100% (ease-out cubic); its opacity stays 1 until a = 0.12 and fades to 0 by a = 0.37. Ripple: from a = 0 to 0.4 a 3px white ring grows from radius 23px to 52px, opacity 0.7 → 0, drawn under the circle. All of these fades and the ripple are linear unless an ease is named; the shadow has no offset and applies to the fill only. The indicator stays where the tap happened (it does not follow content that moves afterwards).

(Common block above, then — this one is a top tab strip over swiping pages; there is no bottom bar at all:)
- Panel: 410×184px, radius 26, centered on the stage (its top 28px from the stage top), fill #1B1A28 with the bar's shadow. Four text tabs "All", "Music", "Video", "Live" (semibold 600, 22px, a sans-serif such as Inter or Segoe UI), centered on the same four tab centers as the bar, baseline 42px below the panel top. Under them a divider line 62px below the panel top, 1.5px, white 7%, from 14px inside each side.
- Underline: 5px tall, radius 2.5, its top 56px below the panel top, horizontal gradient violet → cyan across its own width, violet glow (rgba(110,91,255,0.7), canvas shadowBlur 12). At rest it spans the selected label: from its center − (text width + 10)/2 to center + (text width + 10)/2.
- Inchworm move: the leading edge (the side it moves toward) goes from the old label's edge to the new label's edge with easeInOutCubic(dt / 0.28); the trailing edge does the same with easeInOutCubic((dt − 0.12) / 0.3). So it first stretches across, then the back catches up.
- Label colors: gray → white by c = clamp(1 − |underline middle x − tab center x| / 80px).
- Pages (clipped to the panel, drawn before the labels): four pages side by side, each 410px wide; page i is drawn with its left edge at panelLeft + (i − pg)·410px, where pg follows a spring (ω₀ = 13, ζ = 0.82) from the old tab to the new one. Each page has, relative to its own top-left: tile A at (18, 76), 180×92px, radius 16, a horizontal gradient from color 1 at x = 18 to color 2 at x = 200, opacity 90%; tile B at (212, 76), same size, same gradient positions (so it is mostly color 2), opacity 35%. On tile A two white 75% bars: 90×8px (radius 4) at (32, 138) and 56×6px (radius 3) at (32, 152); on tile B the same two bars at (226, 138) and (226, 152) in white 35%. Page colors (color 1, color 2): All #6E5BFF, #9B8CFF; Music #38C6FF, #7FDBFF; Video #FF5CA8, #FF9BC9; Live #FFB547, #FFD98A.
- The tap indicator sits on the label to be tapped, 34px below the panel top.