Layered Diagram Architecture About Block for React

Edit LAYERS at the top of the file: each layer has a name, a role, a note, its tech badges and a budget in milliseconds, plus the icon drawn beside its name. The numbers, the arrows and the path follow the list, and the "time budget" figure is computed from the budgets, so it always matches the bands. Four layers fit the frame; more will need a taller figure.

Each band is a Collapsible: its header is a button inside an h3, so a screen reader lists the four layers as headings and Tab, Enter and Space open and close them. The first layer starts open, and each one opens on its own, so you can compare two notes side by side. The technology badges stay visible when a layer is closed. A closed note stays in the HTML, so it can be found with the browser's search and read by crawlers.

A layer's colour would only be a second way of saying its number, and in a theme where the accent is light it fades. Here the numbered node, the label and the icon say which layer it is, so nothing depends on telling two greys apart. The only filled shapes are the numbered nodes on the path.

The badges say what each part is (a request cache, a job queue, an object store) rather than naming a product, so the block never advertises a vendor and stays true if you swap one. Replace them with your own stack's names if you want to show it.

The header comes first and the diagram follows in a single column, each band full width with its number at the start. The three figures are left out on a phone, because the budgets are in the notes. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the path moves to the right while the arrows still point down and up.

The header and the diagram fade up once on load, and a note opens with a short height transition and its chevron turns. With reduced motion the entrance is off and a note opens at once.