Animated Reveal Features Block for React

Edit STEPS at the top of the file for the titles, summaries and the parts each step adds; the tabs and panels read from it. The drawing is OrielEditor: each layer is wrapped in a fade(step, from) class, where from is the step it first appears on, so moving a layer to another step changes one number. Adding a fifth step means one more entry and one more layer.

Nothing before the step you pick. Step 3 shows the board, the sidebar and the toolbar; going back to step 2 fades the toolbar out and leaves the first two layers as they were. The drawing is driven by one number, the chosen step, so it is the same whichever way you got there.

The steps choose what is shown, and each has a panel that says what it adds, which is what tabs are for. They also behave the same on every target: the Up and Down arrows move between steps and open each as you go, and the panel is named by its step. The drawing is decoration and is hidden from assistive technology, so the panel's text carries the same information.

The tabs are controlled with value and onValueChange, and the open step is styled by data-active, so its bar is a border.

The header and the two sides fade up once on load. When you pick a step, the sidebar's width and the toolbar's height transition and the layers fade, all with CSS. With reduced motion every transition is off and the layers simply appear and disappear.

The header comes first, then the drawing at a fixed height under a hairline, then the steps, so choosing a step shows its effect without scrolling. Inside the drawing the panels shrink and the chart takes the space that is left. Nothing scrolls sideways at 320 pixels.