Pill Nav Swipe

Create a swipeable pill navigation. A pill-shaped tab bar (3px padding, hairline border) with 3 tabs in small monospace; the active tab sits on an accent-colored chip that slides between tabs with a spring (shared layout animation, stiffness 430, damping 30), its label flipping to paper-white. Below, a content card shows the active section. The mobile-first part: the content card is horizontally draggable. Wire a drag gesture on the card (constrain it so it snaps back, with some elasticity ~0.22); on release, if the drag traveled more than ~36px left, advance to the next tab - more than 36px right, go back. The chip in the nav follows the swipe result with its spring, so thumb and nav stay in sync. Set touch-action: pan-y so vertical page scrolling still works, and show a grab cursor on desktop. Content transitions are direction-aware: swiping forward, the pane exits left and enters from the right; swiping back, the reverse (30px offset, 0.25s ease). Tapping a tab jumps directly with the same choreography. Accessibility: the bar uses role="tablist" / role="tab" with aria-selected, and arrow keys switch tabs: the swipe is an enhancement, never the only path. If prefers-reduced-motion is set, disable the drag gesture and swap panes with a plain crossfade. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.