Before After Visual Features Block for React

Edit METRICS at the top of the file. Each entry has a before and an after value, the number of decimals to show, a unit and a one-line note. The bar's width, the hairline marking the result and the "less than before" figure are all worked out from those two values, so you only type each number once.

No. Each row keeps its own state, so a visitor can compare one outcome at a time. To drive all three from one control, lift the view state into the section and pass it down to the rows.

The control is a labelled group of two options named for its row ("Page weight: before or after"). When the choice changes, a polite live region reads the row's title, the choice and the new figure, such as "Page weight, after: 1.2 MB". The bar itself is decorative.

Yes. The bar, its track and the control use theme tokens only, and the bar is drawn in the foreground colour, so the primary colour stays free for a real button. The page has no button of its own and no Shine Button.

Choosing After rolls the figure's digits and eases the bar's width over about half a second. With reduced motion the digits change in place and the bar jumps, with no transition at all. Nothing moves until the visitor chooses.

Each row stacks: the title, its note and the control first, then the figure over the bar at full width. The row keeps the same height in both states, so flipping it never moves the page, and nothing scrolls sideways at 320 pixels.