Navigation

Direction-aware tabs

A tab bar whose selection bubble springs between tabs while the panel slides in from the side you travelled toward and the card eases to its new height.

15 / 74

Where it earns its place

Switching between parallel pieces of content that belong in one place: case studies, plans, product modes, before and after.

What we changed

Recast as a case study switcher for Aster OS, Northstar Cloud and Vellum Labs, each with scope, a week-by-week timeline and its launch metric.
Panel travel cut from 300px to 56px, so it hints at direction instead of sliding a whole card across a small stage.
Removed the lock that ignored clicks mid-animation; a second click retargets the same spring.
Added real tab semantics (tablist, aria-selected, roving focus with arrows, Home and End) and a plain cross-fade under reduced motion.
Kept the core: a shared-layout bubble, direction from index order, blur on the way in and out, and a measured, animated height.