Interaction

Stepped panel

A compact toolbar of steps whose panel springs to the measured height of each step, with content sliding in the direction you moved.

62 / 74

Where it earns its place

Process explainers, pricing tiers and onboarding steps: dense information behind a small control, without a page of accordions.

Recast as the studio's 4 to 8 week engagement, with an eight-week strip that lights the weeks each phase occupies.
Kept the core idea: the panel's height is a measured number the spring travels to, never auto, so step changes resize smoothly.
Added direction-aware content slides and a shared layoutId pill under the active tab.
Made it a real tablist: arrow keys, Home and End, roving tabindex, Escape to close; outside presses are scoped to the example.
Dropped the Radix scroll area, the badge and the scroll-into-view logic, which a four-step bar never needs.