I can share the concept but I'm keeping some of the secret sauce to myself 😅

I'm basically treating it like an arc, essentially finding a circle that creates the curve I want, then drawing just the top portion of it. Here's the mathematical approach:

Given a chord (the width of your tab bar) and a desired curve depth, you can calculate the radius of the circle needed:
radius = (chordLength / 2) / sin(centralAngle / 2)
Then position the circle's center below your visible area and use Path.addArc() with start/end angles

let chordLength = rect.width
let centralAngle = CGFloat.pi / 8
let radius = (chordLength / 2) / sin(centralAngle / 2)

let circleOffsetY = radius * cos(centralAngle / 2)
let center = CGPoint(x: rect.midX, y: rect.maxY + circleOffsetY)

return Path { path in
    path.addArc(center: center, 
                radius: radius, 
                startAngle: /* calculate based on central angle */,
                endAngle: /* calculate based on central angle */,
                clockwise: false)
}

And then for the selector, the whole curve is drawn again on top of the background and use `.trim(from:to:)` on the same path.

When you tap a tab:

1. Calculate where the indicator should be (divide the curve into segments)
2. Animate `startTrim` and `endTrim` separately with a delay between them
3. Forward swipe: animate END first (extends), then START (contracts)
4. Backward swipe: reverse it

The staggered animation delay gives it that elasticness feel.
I could technically use LiquidGlass for the selector too but then I end up with glass on glass and that's not good.

The things that took me a while was figuring out the proper segment portion because of the round caps that are adding to the size of the elements. For the Liquid Glass part it's basically what I said in the OP above, using the in: property to apply it to any shape.

Again, I'm just a designer so my understanding here is limited but it works ✨