Before / After Drama Cards

Two side-by-side cards with a giant number each — the visual language of magnitude-of-change.

What this device does

Replaces a sentence like "Berkshire reduced its position from ~915M to ~30M shares between Q1 2023 and Q1 2026" with two stark cards: the BEFORE card showing 915M in orange, the AFTER card showing 30M in red. The reader's eye does the math; the prose says it once and is done.

When to use

• Narrative peaks where a single dramatic change is the point
• Holdings exits, valuation re-ratings, growth-rate reversals
• Anywhere a comparison of TWO numbers (not three+) carries enough narrative weight to deserve its own panel

How agents use this

data = {
  before: { when: "Q1 2023", value: "915M", descriptor: "Berkshire shares of AAPL" },
  after:  { when: "Q1 2026", value: "~30M", descriptor: "After 3 years of selling (~97% reduction)" }
}

Visual register

Side-by-side 1fr 1fr grid on desktop; stacks vertically on mobile. The hero numbers use a 56px display font (Space Grotesk 700 weight by default); accent colors signal the direction of change (orange = was-significant, red = now-meaningful).

Why it works

This device is the visual analogue of a contrarian framing in prose. It does in two cards what an analyst would take a paragraph to set up. The stark format earns the reader's attention by being unusual on the page.

Example output

See ./preview.html.