Why this ticket exists
The current chart (#1056 + #1058) is a thin 1D progress band. The user wants the actual visual shape of the benchmark (ultrasound.money's "ETH supply—2y projection" chart) — a tall area chart with a linear Y-axis showing real $ amounts and vertical phase bands with full labels at the top of each band, including the tier name.
New design
Tall area chart, ultrasound.money style, with our milestone data.
Axes
- Y-axis: linear, actual $ amounts. Domain
[0, milestones.diamond.mcap]. Tick labels at \$0, \$25M, \$50M, \$75M, \$100M (or proportional 0/25/50/75/100% of diamond for test mode). Labels render on the left, monospace, small.
- X-axis: banded MCap progression. Each milestone occupies an equal 25% of width — the same
mcapToX piecewise log-interpolation we already have. NO time component. Labels at the bottom of each band: tier name only (Bronze / Silver / Gold / Diamond) in monospace caps.
Bands
- 3 vertical band dividers spanning full chart height at 25%, 50%, 75% of width (band 0/1, 1/2, 2/3 boundaries). Plus left edge (band 0 left) and right edge (= diamond, also at 100%).
- Top-of-band labels stacked vertically, centered horizontally over each band (not the line):
BRONZE SILVER GOLD DIAMOND
$1M $10M $50M $100M
unlocks 10% unlocks 30% unlocks 50% unlocks 100%
≈ #1900 ≈ #950 ≈ #400 ≈ #250
Tier name uppercased and bold (small caps style); other lines normal weight; CMC rank dimmer. This is the explicit "add Bronze/Silver/etc on desktop too" ask.
Curve and dot
- The curve passes through the 5 knot points:
(0, $0), (0.25, bronze.mcap), (0.5, silver.mcap), (0.75, gold.mcap), (1.0, diamond.mcap). Within each band, sample 20 sub-points using the same banded log interpolation as mcapToX so the curve is smooth (not a piecewise-linear hockey-stick).
- Area fill below the curve, accent gradient (matches the previous design's gradient).
- Heartbeat dot at
(mcapToX(currentFdv), currentFdv) — this point lies exactly ON the curve by construction.
- The current dot for
currentFdv = $33K lands near the bottom-left in band 0 (pre-bronze), Y position is essentially at $0 line because $33K is 0.033% of $100M on linear Y. Visually the dot may overlap the X-axis baseline — that is honest signal ("we're starting from zero relative to the goal") and matches the benchmark's style.
Mobile
- Tier name labels stay as a 4-column legend below the chart (existing pattern).
- Top-of-band labels on the chart itself: hide CMC rank line on mobile (small text becomes unreadable). Keep tier name + value + pct.
- Y-axis: keep tick labels visible on mobile (small monospace).
Removals from #1056
- The thin 1D bar layout
- The "Current: $X" caption (info now visible from the dot's Y position against the Y-axis)
- The
\$0 endpoint label (the Y-axis itself shows $0)
Files
src/components/airdrop/CampaignHero.tsx — replace MCapChart again
Acceptance criteria
Reviewer note
Block this PR if it:
- (a) reverts to a thin 1D bar layout
- (b) uses log Y-axis (the user explicitly wants linear $ amounts)
- (c) puts time on the X-axis
- (d) omits tier names from the desktop top-of-band labels
Why this ticket exists
The current chart (#1056 + #1058) is a thin 1D progress band. The user wants the actual visual shape of the benchmark (ultrasound.money's "ETH supply—2y projection" chart) — a tall area chart with a linear Y-axis showing real $ amounts and vertical phase bands with full labels at the top of each band, including the tier name.
New design
Tall area chart, ultrasound.money style, with our milestone data.
Axes
[0, milestones.diamond.mcap]. Tick labels at\$0,\$25M,\$50M,\$75M,\$100M(or proportional 0/25/50/75/100% of diamond for test mode). Labels render on the left, monospace, small.mcapToXpiecewise log-interpolation we already have. NO time component. Labels at the bottom of each band: tier name only (Bronze/Silver/Gold/Diamond) in monospace caps.Bands
Curve and dot
(0, $0),(0.25, bronze.mcap),(0.5, silver.mcap),(0.75, gold.mcap),(1.0, diamond.mcap). Within each band, sample 20 sub-points using the same banded log interpolation asmcapToXso the curve is smooth (not a piecewise-linear hockey-stick).(mcapToX(currentFdv), currentFdv)— this point lies exactly ON the curve by construction.currentFdv = $33Klands near the bottom-left in band 0 (pre-bronze), Y position is essentially at $0 line because $33K is 0.033% of $100M on linear Y. Visually the dot may overlap the X-axis baseline — that is honest signal ("we're starting from zero relative to the goal") and matches the benchmark's style.Mobile
Removals from #1056
\$0endpoint label (the Y-axis itself shows $0)Files
src/components/airdrop/CampaignHero.tsx— replaceMCapChartagainAcceptance criteria
Reviewer note
Block this PR if it: