Double Helix Company DNA Block for React

Edit TRAITS at the top of the file: each has an id, a label, a one-line tagline, what it meanings and how you hire for it. Add a trait and the list grows by one row; the helix's rungs are computed from the number of traits, so keep it near five for a drawing that reads, and change PERIOD if you want more turns.

Two strands are drawn as cosine waves in SVG, with the points computed once at module scope, and the rungs join them: short pale ones for the helix's body and one long rung per trait at each half turn. The drawing is decorative and hidden from assistive technology; the list beside it is the real control, and the caption says what the rungs are.

The traits are a radio group with one tab stop: the arrow keys move between traits and choose as they go, and Tab leaves the group. Selecting a trait changes the text below it, which sits in a polite live region, so the new meaning is announced. The selected radio, the rung and the card's border all show it in foreground tones, not the primary colour.

The five texts differ in length. An unseen, inert copy of each sits in the same grid cell as the open one, so the cell keeps the height of the longest and nothing below it moves.

The header comes first so the title is on the first screen, then the helix at about 12 rem tall, then the five traits and the open one's text. The helix keeps its proportions at every width. Nothing scrolls sideways at 320 pixels.

The header and the list fade up once, the text of a newly chosen trait fades in, and the rung fills over 300 ms. With reduced motion all of it is off: the text swaps and the rung changes at once.