Tab Swap Split Showcase Features Block for React

Edit the PLAN, SHIP and REVIEW objects at the top of the file for each tab's title, sentence and ticks, and the data beside them (TRAINS, RUNGS and GATES) for what the drawings draw. Each drawing is a small component (PlanDrawing, ShipDrawing and ReviewDrawing), and each tab is a TabsTrigger and a TabsContent with the same value, so a fourth stage needs one of each.

They are real tabs, a list named Release stage with a panel for each. Tab moves into the list, the arrow keys move between Plan, Ship and Review and open each one's band as they go, and Tab again moves into the open panel. Home and End jump to the first and last tab.

On a desktop it doesn't: the band has one fixed height, so a longer drawing can't push what follows. On a phone the copy comes first and the drawing sits under it at one height, so the band changes only by the difference between two short paragraphs.

They are drawings, built from the page's own tokens in greyscale and hidden from assistive technology, so everything they say is also in the copy beside them. The calendar's bars, the ladder's rungs and the gate count are all drawn from the data at the top of the file, so they always agree with each other.

The header and the tabs fade up once when the page loads, the selected tab's line slides to its new place, and the band fades in when you swap. With reduced motion the fade-up and the fade-in are off and the line jumps.

Yes. The drawing moves to the other side with the copy, the divider and the tab line follow the reading direction, the link's arrow mirrors, and values such as percentages stay intact.