Model card

Tab

Moves through the Compare switch, the monthly volume slider, the benchmark switcher, each benchmark row (focus shows its score and rank), or the rival menu in the compare view, then Copy model id and Use model when present. Hidden views are inert, so Tab never lands in them.

Arrow keysorPage uporHomeorEnd

On the volume slider, step through the monthly volumes; the estimated cost rolls to the new value.

SpaceorEnter

Toggles Compare, copies the model id or selects the model.

Arrow leftorArrow right

Moves between benchmarks in the switcher.

EnterorArrow down

On the rival menu, opens it; arrows move between rivals and Enter picks one. Escape closes it.

• The card is an article labelled by the model name. Specs and prices are description lists, so each value is read with its label.
• The compare view is a table with column headers for the two models and a row header per spec. The better value carries a check icon and the text "better" for screen readers, so the comparison never relies on color.
• A polite status region says what changed when you switch views, rivals or benchmarks (for example "Comparing Claude Opus 5.5 with Gemini 4 Argon"). Copy model id announces Copied on its own.
• Benchmark bars are hidden from assistive technology; each row is focusable and labelled with the full readout (score, rank and gap to the leader). Marks are decorative and hidden, since the name is always written next to them.
• Modality chips say supported or not supported to screen readers; unsupported chips are dashed as well as muted, so the difference never relies on color.
• While loading, the card is aria-busy, the skeleton is hidden, Compare is disabled and the status region says Loading model details. An error is announced with role alert. Inactive panels are inert and aria-hidden.
• During a text swap the outgoing value is hidden from assistive technology, so names and values are never read twice.
• Pointer focus draws no ring; keyboard focus uses Arc's shared focus outline.

• The card never changes size. Details, compare, loading and error are panels stacked in one grid cell, so the card is always as tall as the tallest panel; switching fades the old panel out in 100ms and the new one in over 160ms. Inside a panel every slot is reserved: two summary lines, all seven chips, every spec and price cell, a fixed number of benchmark rows and a readout that holds its lines.
• Switching models crossfades every text value in place and rolls prices, the estimated cost, page counts and scores to their new values in tabular numerals inside reserved widths. Bars and the context gauge slide on a critically damped spring (visualDuration 0.24, no bounce).
• Dragging the volume slider rolls the estimated cost live; the compare table's cost row follows the same volume.
• Hovering or focusing a benchmark row tints it, fades the other rows to half opacity and crossfades the readout to its score, rank and gap, all within 160ms.
• The bars grow from zero once, the first time the card is mostly in view, 40ms apart.
• Reduced motion keeps every end state and drops travel: views, bars, numbers and values change in place, and the skeleton holds still.

• The card is fluid up to 640px and reads its own width with container queries, so it works in a narrow side pane as well as a page.
• Below a 480px card, specs and prices become rows of label and value under hairlines, the cost estimate drops under the slider, the benchmark switcher drops under its heading and the readout reserves three lines. Below 420px the summary reserves three lines. Below 360px each bar moves under its name.
• From a 520px card the compare table has a label column beside the two model columns and shows margins on the better value; narrower, each label sits above its two values and the mini bars and margins hide.
• The footer wraps the copy and select buttons under the model id when space runs out. It holds at 320px without horizontal scroll.

• Bars animate transform only (scaleX) and numbers are written in place during the roll, so React renders once per change, not per frame.
• No measuring: the stacked grid cell reserves the height in CSS, so there is no ResizeObserver and no height animation.
• Nothing runs while idle: no loops apart from the CSS skeleton pulse while loading. Hidden panels stay mounted (inert) so values are ready the moment a view switches.

• Use real figures from your model catalog and set sample={false}; leave sample on while the numbers are placeholders. The bundled data is a plausible October 2026 sample, not official pricing or results.
• Keep the summary to one sentence of about 90 characters; the card reserves two lines (three on narrow cards) and clamps anything longer.
• Give scores for the same benchmark ids on the model and its rivals. A row without a score shows None and the compare table shows Not listed, so rows never appear or disappear.
• Pass one shared pool as rivals when the model changes (the card filters out the current model), so the benchmark rows and ranks stay stable while values roll.
• Copy marks from model-card-marks.tsx (Claude, OpenAI, Gemini, Grok) or pass any SVG with aria-hidden. Mono marks follow the text color; set style={{ color }} for a brand color, as the Claude mark does. Brand marks are sample content, never an implied endorsement.
• Price cells read per million tokens. Omit cachedInput to show two price cells.
• For a list of many models, render a compact picker and show one ModelCard for the highlighted model; the card is a detail view, not a row.

The full library index for assistants is at /llms.txt.