Skip to content

[Airdrop] Redesign hero + chart as combined section with live countdown and 3-line chart #936

@realproject7

Description

@realproject7

Parent: #877
Follow-up to: #924

Problem

The current hero + chart implementation has several issues:

  1. Countdown only shows weeks:days — needs live d:h:m:s counter
  2. Tagline "50,000 PLOT locked. Earn or burn." lacks context — users don't understand the mechanic
  3. Hero and chart are separate sections — should be combined as one cohesive unit
  4. Chart x-axis shows FDV scale but should show 6-month timeline instead
  5. Pool value calculation appears incorrect
  6. Missing: lock-up tx proof link, current FDV display, linear projection line

Solution: Combined Hero + Chart

The hero and chart should be ONE section — the chart IS the hero. The campaign concept is visually communicated through the chart itself.

Top Section: Title + Context + Countdown

PLOT Big or Nothing Airdrop

50,000 PLOT (5% of max supply) locked in a time-locked contract.
If PLOT FDV reaches milestone targets within 6 months, the pool
is distributed to point holders. If not, it's burned forever.

🔒 Lock-up proof: [View on Mint Club] ← link to lock tx

    142 : 05 : 23 : 47
    days  hrs   min  sec
  • Live countdown updating every second (days : hours : minutes : seconds)
  • Expanded explanation of the mechanic (5% of max supply, milestone-based, burn if not met)
  • Lock-up proof link to Mint Club Locker tx (placeholder until LOCKER_ID is set)

Chart: 6-Month Timeline with 3 Lines

Design reference: ultrasound.money — area chart with zone dividers and annotations.

X-axis: 6-month campaign timeline (Month 1 → Month 6)
Y-axis (left): Airdrop pool value in USD
Y-axis (right): FDV in USD

Three lines on the chart:

  1. Airdrop Pool Value line (primary, filled area) — shows how much the locked PLOT pool is worth at current price. Steps up at each milestone threshold.

  2. Linear FDV projection line (dashed, diagonal) — straight line from current FDV to the 💎 Diamond target ($100M), showing the "ideal growth path" needed to hit the final goal within 6 months.

  3. Actual FDV line (solid) — real FDV over time from daily price snapshots (pl_daily_prices). Shows actual progress vs the linear projection.

Current position: Heartbeat-animated pulsing dot on the actual FDV line at today's date.

Milestone markers: Horizontal dashed lines at each FDV milestone ($1M, $10M, $50M, $100M) with emoji labels:

  • 🥉 $1M — 10%
  • 🥈 $10M — 30%
  • 🥇 $50M — 50%
  • 💎 $100M — 100%

Wireframe

┌──────────────────────────────────────────────────────────────┐
│  PLOT Big or Nothing Airdrop                                  │
│                                                               │
│  50,000 PLOT (5% of max supply) locked. Distributed to       │
│  point holders if FDV milestones are met. Burned if not.      │
│  🔒 View lock-up proof                                       │
│                                                               │
│          142 : 05 : 23 : 47                                   │
│          days  hrs   min  sec                                  │
│                                                               │
│  $5M ┤                                          ╱── 💎 100%  │
│      │                                    ╱····/              │
│$1.25M┤                              ╱····/·····── 🥇 50%     │
│      │                        ╱····/                          │
│ $150K┤                  ╱····/ ════════════════── 🥈 30%      │
│      │            ╱····/                                      │
│   $5K┤      ╱····/ ══════════════════════════──── 🥉 10%      │
│      │╱····/                                                  │
│   $0 ┼──●──────────────────────────────────────               │
│      M1    M2    M3    M4    M5    M6                          │
│                                                               │
│  ── Actual FDV   ···· Linear projection   ═══ Pool value      │
│  ● Current FDV: $150 · Zone: Pre-Bronze                       │
└──────────────────────────────────────────────────────────────┘

Pool Value Calculation (fix)

if FDV >= $100M: pool_value = 50,000 × price (100% distributed)
if FDV >= $50M:  pool_value = 25,000 × price (50% distributed)
if FDV >= $10M:  pool_value = 15,000 × price (30% distributed)
if FDV >= $1M:   pool_value = 5,000 × price (10% distributed)
if FDV < $1M:    pool_value = $0 (burned)

Heartbeat animation

@keyframes heartbeat {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.7; }
}
.current-fdv-dot {
  animation: heartbeat 1.5s ease-in-out infinite;
}

Files

  • src/components/airdrop/CampaignHero.tsx — combined hero + chart
  • src/components/airdrop/MilestoneTrack.tsx — merge into hero or keep as sub-component

Acceptance Criteria

  • Hero and chart combined as one cohesive section
  • Live countdown (d:h:m:s) updating every second
  • Expanded explanation (5% supply, milestone-based, burn)
  • Lock-up proof link placeholder
  • Chart x-axis = 6-month timeline
  • 3 lines: actual FDV, linear projection, pool value (stepped)
  • 4 milestone markers with emojis
  • Heartbeat-animated dot on current position
  • Current FDV + zone displayed below chart
  • Pool value calculation correct
  • Responsive on mobile

Metadata

Metadata

Assignees

No one assigned

    Labels

    agent/T3Assigned to T3 builder agentairdropPLOT 10x Airdrop CampaigndesignDesign and UI changes

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions