Tabs that trade height

Build one interactive web page: Sampleton Observatory, tonight: the moon, the planets, the comet and the stars. The four tabs sit in a box that never changes size. Choose one and it takes the height of the one before in 0.15 s, while its title goes from grey to near black in the same time. The open tab draws its sky in blocks. Up and down arrows move between them, and the readout prints the real heights.

Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: An FAQ, a set of services, a product's few facets; anywhere the page below should stay put while the content above swaps. Do not let it fail the way this kind of piece usually does: Content cut off by a fixed box, and a page that jumps. Here the box is sized by the viewport, each tab's text is short, the page below never moves, every tab is a real button with its state announced, and reduced motion removes the transition.

It must work with the keyboard, on a phone, with reduced motion respected and no text under 12px. Tell me which libraries you chose and why.