Timeline Evolution Story Features Block for React

Edit the five year objects at the top of the file. Each has a theme, three shipped entries (a title and a line), the cold start at the start and at the end of the year, and the regions live at the end. The rolling number, the "was" badge, the five bars and the header's "from 680 ms to 12 ms" line all read from those values, so they can't disagree.

The bars are one image whose label lists every year's regions in words ("3 in year 1, 9 in year 2, ...") and says which year is highlighted; the numbers are also printed above the bars. They are drawn with CSS, not a chart library, and keep their order in a right-to-left layout.

Tab enters the rail on the open year, the Left and Right arrows move between years and open each as they go, and Tab again moves into the open year's entries. Home and End jump to the first and last year. Base UI tabs open on focus here as well, so the arrow keys behave the same as on the other libraries.

The header and the rail fade up once on load, the entries fade up as a year opens, and the cold start rolls to its new value. With reduced motion the fades are off and the digits change at once.

No. The entries of every year are also drawn once, unseen, in the same grid cell as the open year's, so the cell is as tall as the tallest year; the figures cell has a fixed layout. Those copies are hidden from assistive technology and can't be focused.

The rail scrolls sideways when the five years don't fit, the two cells stack with a rule between them, and the bar history keeps its five columns. Nothing scrolls the page sideways at 320 pixels.