Skip to content

Runway Panel

Answers the question: "If I stopped earning today, how many months would my savings last?" Displays a large hero number with a progress bar and responds to What-If Simulator changes.

What It Shows

ElementDetail
Hero numberMonths of runway (displays infinity symbol when burn rate is zero)
Progress barVisual fill against a 24-month scale
Scale labels0, 12 mo, 24+ mo
Cash on Hand cardCurrent total liquid savings
Monthly Burn cardAverage monthly expenses
Delta badgeChange in runway months when What-If Simulator is active

Key Features

  • Color-coded hero -- The runway number changes color based on severity:

    MonthsColorMeaning
    > 12GreenHealthy runway
    6 -- 12YellowCaution
    < 6RedCritical
  • Progress bar -- Fills proportionally up to a 24-month maximum. Includes a gradient fill and glow effect.

  • What-If delta -- When the What-If Simulator is active, a badge shows the +/- change in runway months compared to the base scenario.

  • Infinity handling -- When monthly burn is zero or negative (saving more than spending), the runway displays an infinity symbol.

Interactivity

ActionResult
Activate What-If SimulatorDelta badge appears showing runway change
Adjust simulator slidersRunway recalculates in real time

The panel itself has no direct controls -- it reacts to the What-If Simulator.