Comparison Bars

Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.

• Rows *

  rows · array

  The metrics, top to bottom in reading order. The reveal staggers down the list, so order them the way you want the argument made and put the most decisive row first. Four to five rows is the sweet spot; seven is the ceiling before the bars thin out.

  now: 5 items

• Ours label

  oursLabel · string

  Name of the accent series, shown in the first legend chip. A product or team name reads better than 'Us'.

  now: Motionstash

• Theirs label

  theirsLabel · string

  Name of the muted series, shown in the second legend chip. Name the baseline honestly ('Hand-built', 'Industry median') rather than a competitor you are not prepared to cite.

  now: Hand-built

• Title

  title · string

  Headline above the table, set in the display face. State the comparison ('Registry vs. hand-built'), not the conclusion. One line reads best.

  now: Registry vs. hand-built

• Eyebrow

  eyebrow · string

  Small uppercase mono label in the accent colour above the title. Omit for a barer table.

  now: Head to head

• Basis

  basis · "row" | "shared"

  How bar length is scaled. 'row' normalises each row to its own pair, so the winner fills the track and every row is legible even when the units differ, the right default for a mixed-unit comparison. 'shared' puts every row on one domain, which is only honest when all rows measure the same thing in the same unit.

  now: row

• Show lead

  showLead · boolean

  Show the size of the gap in a right-hand column: a multiple ('3.4x') once one side is nearly double the other, a percentage ('+32%') below that. Accent-coloured when the accent series leads, muted when it trails. The chip is omitted for any row where the multiple is not finite (a zero on either side) or the two values are within 2%.

  now: true

• Legend

  legend · boolean

  Show the two legend chips above the table, each carrying a swatch cut to the same shape as the bars. Off only when a caption elsewhere already names the two series.

  now: true

• Dividers

  dividers · boolean

  Hairline under each row, sweeping in with it. This is what makes the block read as a table rather than a loose stack of bars; turn it off for a softer, more editorial list.

  now: true

• Label width

  labelWidth · number

  Width of the label column as a fraction of the content width. It fixes the origin every bar grows from, so widen it for long metric names rather than letting them wrap, 0.34 or so in 9:16, where the column is narrow in absolute terms.

  now: 0.27

• Bar thickness

  barThickness · number

  Thickness of one bar as a fraction of its row height. 0.24 leaves the pair reading as a pair with air around it; above 0.32 the two bars fuse into a block, below 0.16 they read as rules.

  now: 0.24

• Rival tone

  rivalTone · "muted" | "alt"

  Colour of the second series. 'muted' sits between the gridline and the muted ink, so the accent series plainly wins the frame. 'alt' uses the brand's `accentAlt`, which gives the two series equal weight. Use it when the scene is a genuine comparison rather than an argument.

  now: muted

• Compact

  compact · boolean

  Abbreviate thousands and millions ('1.2k', '3.4M') instead of grouping digits with thin spaces. Turn it on once the figures pass four digits.

  now: false

• Footnote

  footnote · string

  Quiet mono caption under a hairline at the foot of the frame: the sample, the period, the method. One short sentence. This is where a comparison earns its credibility.

  now: Same brief, same reviewers · median across twelve launch …

• Brand

  brand · string

  Brand token id, one of the keys of BRANDS.

  now: slate