Tab Bar Part 1

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.
  - Labels (where used): Home, Search, Likes, Profile.
- 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).
- Text: a sans-serif such as Inter or Segoe UI.
- Colors: violet #6E5BFF, cyan #38C6FF, gray #8C8AA8. "Mix A→B by k" means each RGB channel linearly, k clamped to 0–1. easeOutCubic(k) = 1 − (1 − k)³ with k clamped to 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:)
- Highlight pill: 86×64px at rest, fully rounded, vertically centered in the bar, filled with a horizontal gradient violet → cyan across its own width, with a violet glow (rgba(110,91,255,0.65), canvas shadowBlur 20). Draw it on the bar, under the icons.
- Its two edges move on separate springs, both from the old tab to the new one: the leading edge (the side it moves toward; the right edge when moving right) uses a fast spring (ω₀ = 19, ζ = 0.55) and the trailing edge a slower one (ω₀ = 11, ζ = 0.72). Left edge = center x of the left-edge position − 43px, right edge = center x of the right-edge position + 43px (positions in tabs, as in the common block). Clamp both edges to 6px inside the bar's ends (so at rest it is 86px wide at every tab, but an overshooting edge flattens against the end). So the pill stretches while it travels and snaps back to 86px when it lands; for a moment the two springs can cross and make it a little narrower than 86px, which is fine.
- Icons: each icon's color mixes gray → white by c = clamp(1 − |pill middle x − tab center x| / 80px), so the icon under the pill turns white.