Skip to content

Airdrop chart: redesign as horizontal milestone progression (no time axis) #1055

@realproject7

Description

@realproject7

Why this ticket exists

The current chart (#1051#1052, banded Y-axis time-series) gets the milestone spacing right but uses the wrong axis layout. Three concrete problems with it:

  1. Milestone markers should be vertical lines, not horizontal lines. The benchmark (ultrasound.money's ETH supply chart) uses vertical phase bands with labels at the top of each band. We've been putting our milestones on the Y-axis as horizontal lines instead — readable, but the wrong shape.

  2. The historical area-fill and the dashed projection line don't visually relate to each other. Today's chart shows a thick brown segment at $31K-Y from 5/4 to 5/5, plus a separate dashed diagonal climbing from start to diamond at end-of-campaign. Two unrelated lines on the same canvas confuses what the user is supposed to read off the chart.

  3. The X-axis being a real date is unnecessary. Users don't care that "5/6 is today" on the chart — they care where MCap is on the milestone path. Time on the X is doing no useful work and actively dilutes the signal (most of the chart is empty future-time).

New design

A 1D horizontal milestone progression chart. X-axis = MCap (banded so each milestone gets 25% of width); chart is a thin band, not a tall area chart.

desktop:
                $1M       $10M       $50M       $100M
              unlocks   unlocks    unlocks    unlocks
                10%       30%        50%        100%
              (≈#1900)  (≈#950)    (≈#400)    (≈#250)
                 │         │          │          │
$0 ━━━━━━●━━━━━━│━━━━━━━━━│━━━━━━━━━━│━━━━━━━━━━│ $100M
         ↑      │         │          │          │
   current      Bronze    Silver     Gold       Diamond
   MCap

mobile:
                 │     │     │     │
$0 ━━━━━●━━━━━━━│━━━━━│━━━━━│━━━━━│ $100M
        │       │     │     │     │
        │     Bronze Silver Gold Diamond
        │      $1M   $10M  $50M  $100M
        │      10%   30%   50%   100%

Geometry

  • Single horizontal line ("the MCap path from $0 to $100M").
  • 4 vertical dashed milestone markers at 25% / 50% / 75% / 100% of chart width.
  • Banded X-axis: each milestone gets equal 25% of width. Within a band, position is log-interpolated between the band's lower and upper milestone values (same piecewise math we already use for Y in Airdrop chart: fix overlapping milestone labels via banded Y-axis #1051, just rotated to the X-axis).
  • Floor: bronze.mcap / 100 so pre-bronze isn't a single pixel at the left edge.
  • Current MCap: heartbeat dot at its banded X position, on the line. The line up to the dot is rendered thicker/solid; the line past the dot is rendered thinner/dimmer.

Labels

  • Desktop (≥640px): label block at top of each vertical line — $1M / unlocks 10% / (≈ #1900). Same as today's right-edge labels but rotated to top-of-vertical instead.
  • Mobile (<640px): simplified tier-name labels below the chart — Bronze / $1M / 10%. CMC rank dropped on mobile.

Removals

  • No time axis. Drop X-axis date ticks (5/4, 5/5, ..., 5/11).
  • No projection line. The line itself is the "path"; current dot shows progress on it.
  • No historical area fill. Drop the daily-prices fetch and area path entirely. (Leave the /api/airdrop/daily-prices route intact — it's just unused by this component now.)
  • Drop horizontal milestone lines and right-edge labels from [#1051] Fix airdrop chart label overlap via banded Y-axis #1052 — replaced by the vertical+top design.
  • Drop band stripes — when bands are vertical zones with labeled markers, stripes are noise.

Files

  • src/components/airdrop/CampaignHero.tsx — replace MCapChart body. Type signature stays the same except campaignStart / campaignEnd props can be removed (unused by the new design).

Acceptance criteria

  • Chart is roughly 100px tall, full container width — a thin band, not a 200px area chart.
  • 4 vertical milestone markers labeled at top (desktop) with $X / unlocks Y% / (≈ #Z).
  • Mobile: tier names + values below the chart in 4 columns.
  • Current MCap heartbeat dot lands at correct banded position. At currentFdv=$31K with prod milestones ($1M/…/$100M), dot is in pre-bronze band (X between 0% and 25%), specifically ~6% from left.
  • Solid/thick line from $0 to dot; thinner/dimmer line from dot to $100M.
  • No date axis, no projection line, no area fill.
  • No /api/airdrop/daily-prices fetch in the chart component.
  • No hex literals in chart code (CSS vars only).
  • No horizontal scroll on 320px viewport.

Reviewer note

Block this PR if it:

Metadata

Metadata

Assignees

No one assigned

    Labels

    agent/T3Assigned to T3 builder agent

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions