Benchmark Scale Stats Block for React

Edit METRICS at the top of the file. Each has a name, your reading (you), the industry average, the top 10% reading, the scale's min and max, a unit (%, min, h, or empty for a bare count) and whether lower is better. The markers' places, the verdicts and the headline are computed from those. The "1,200 peer teams" in the header is example text: edit it with your own sample size.

Each is a different shape so the row reads without colour: a solid dot for you (the largest, on top), a hollow ring for the average and a thin tick for the top 10%. The scale is a plain line with its two ends labelled, and the values are written beside it, so a close pair of markers never hides a number.

Set lower: true. The verdict then says "Better than average" when your reading is at or under the average, and the row adds "Lower is better". The markers stay where the readings are on the scale, so the better end is the start for those rows, and the text says so.

The scales are hidden from assistive technology, because each row says the same in text: the metric, the verdict, and the three values in a description list ("You 14 min", "Average 22 min", "Top 10% 6 min"). The rows are a list with a heading each, values sit in bdi elements and the scale is forced left to right.

The three cells stack: the name and verdict, the scale at full width, then the values wrapping onto as many lines as they need. The hairlines between cells appear from md. The block fades up once on load; with reduced motion it is simply there.