index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>BFEM v1.1 — Bitcoin for Engineers (Single-File S-Curve Model)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Chart.js CDN -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    :root { --bg:#0b0b0f; --fg:#e8e8ee; --muted:#9aa0a6; --card:#14141d; --line:#222233; --accent:#f59e0b; }
    body { margin: 24px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--fg); }
    h1 { margin: 0 0 6px; font-size: 24px; }
    .muted { color: var(--muted); font-size: 13px; }
    .wrap { max-width: 1100px; margin: 0 auto; }
    .grid { display: grid; gap: 12px; }
    .g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
    label { display:block; font-size:12px; color:#cfd3da; margin-bottom:6px; }
    input[type="number"], input[type="checkbox"] { width: 100%; padding: 8px; border-radius: 10px; border: 1px solid #2a2a3a; background:#0f0f16; color: var(--fg); }
    .row { display:flex; align-items:center; gap:8px; }
    .btn { border:1px solid var(--line); background:#1a1a26; color:#e8e8ee; padding:8px 12px; border-radius:10px; cursor:pointer; }
    .btn:hover { background:#222235; }
    .stat { display:flex; flex-direction:column; gap:4px; }
    .stat .k { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing: .06em; }
    .stat .v { font-size:20px; font-weight:700; }
    canvas { background: #0f0f16; border: 1px solid var(--line); border-radius: 14px; }
    .small { font-size:12px; color: var(--muted); }
  </style>
</head>
<body>
<div class="wrap">
  <h1>BFEM v1.1 — Bitcoin for Engineers S-Curve Model</h1>
  <div class="muted">Adoption-first systems model. Defaults target ≈ <b>$2.5M/BTC in 2028</b>. No build—just this file.</div>

  <!-- Controls -->
  <div class="grid g-4" style="margin-top:16px;">
    <div class="card">
      <label>Total TAM ($ Trillions)</label>
      <input id="tam1" type="number" step="1" value="100">
      <div class="small">Wave 1 TAM (Retail/Institutional)</div>
    </div>
    <div class="card">
      <label>TAM Growth (%/yr)</label>
      <input id="tamGrowth1" type="number" step="0.1" value="6">
      <div class="small">Expanding boundary condition</div>
    </div>
    <div class="card">
      <label>t50₁ (Midpoint Year)</label>
      <input id="t501" type="number" step="0.1" value="2028">
      <div class="small">Adoption ≈ 50%</div>
    </div>
    <div class="card">
      <label>k₁ (Steepness /yr)</label>
      <input id="k1" type="number" step="0.01" value="0.5">
      <div class="small">Slope around midpoint</div>
    </div>
  </div>

  <div class="grid g-4" style="margin-top:12px;">
    <div class="card">
      <label>γ₁ (Monetization Intensity)</label>
      <input id="gamma1" type="number" step="0.05" value="1.0">
      <div class="small">>1 = convex monetization</div>
    </div>
    <div class="card">
      <label>Enable Wave 2</label>
      <div class="row">
        <input id="enable2" type="checkbox" checked>
        <div class="small">Sovereign/Settlement wave</div>
      </div>
    </div>
    <div class="card">
      <label>TAM₂ ($ Trillions)</label>
      <input id="tam2" type="number" step="1" value="50">
      <div class="small">Wave 2 TAM (Sovereign/Collateral)</div>
    </div>
    <div class="card">
      <label>TAM₂ Growth (%/yr)</label>
      <input id="tamGrowth2" type="number" step="0.1" value="4">
      <div class="small">Optional slower growth</div>
    </div>
  </div>

  <div class="grid g-4" style="margin-top:12px;">
    <div class="card">
      <label>t50₂ (Midpoint Year)</label>
      <input id="t502" type="number" step="0.1" value="2034">
    </div>
    <div class="card">
      <label>k₂ (Steepness /yr)</label>
      <input id="k2" type="number" step="0.01" value="0.4">
    </div>
    <div class="card">
      <label>γ₂ (Monetization Intensity)</label>
      <input id="gamma2" type="number" step="0.05" value="1.1">
    </div>
    <div class="card">
      <label>Free-Float Withheld at Saturation (%)</label>
      <input id="hmax" type="number" step="1" value="25">
      <div class="small">Coins locked by long-term/sovereigns</div>
    </div>
  </div>

  <div class="grid g-4" style="margin-top:12px;">
    <div class="card">
      <label>Withholding Midpoint Year (t_h)</label>
      <input id="th" type="number" step="0.1" value="2033">
      <div class="small">When withholding reaches ~50% of hmax</div>
    </div>
    <div class="card">
      <label>Withholding Steepness (k_h)</label>
      <input id="kh" type="number" step="0.01" value="0.35">
    </div>
    <div class="card">
      <label>Supply 2025 (M BTC)</label>
      <input id="s2025" type="number" step="0.01" value="19.7">
    </div>
    <div class="card">
      <label>Supply 2028 (M BTC)</label>
      <input id="s2028" type="number" step="0.01" value="20.3">
    </div>
  </div>

  <div class="grid g-4" style="margin-top:12px;">
    <div class="card">
      <label>Supply 2032 (M BTC)</label>
      <input id="s2032" type="number" step="0.01" value="20.7">
    </div>
    <div class="card">
      <label>Chart Y-Axis</label>
      <div class="row">
        <input id="scaleLog" type="checkbox" checked>
        <div class="small">Log scale (recommended)</div>
      </div>
    </div>
    <div class="card">
      <button id="reset" class="btn" style="margin-top:22px;">Reset Defaults</button>
    </div>
    <div class="card">
      <button id="export" class="btn" style="margin-top:22px;">Export CSV</button>
    </div>
  </div>

  <!-- Stats -->
  <div class="grid g-3" style="margin-top:12px;">
    <div class="card stat"><div class="k">A(2028) — Adoption</div><div class="v" id="a2028">–</div><div class="small">Combined waves</div></div>
    <div class="card stat"><div class="k">P(2028) — Price</div><div class="v" id="p2028">–</div><div class="small">Target ≈ $2.5M/BTC</div></div>
    <div class="card stat"><div class="k">M(2028) — Market Cap</div><div class="v" id="m2028">–</div><div class="small">Total (all waves)</div></div>
  </div>

  <!-- Chart -->
  <div style="margin-top:12px;">
    <canvas id="chart" height="90"></canvas>
  </div>

  <p class="muted" style="margin-top:10px;">
    Model: Aᵢ(t)=1/(1+e^{−kᵢ(t−t₅₀ᵢ)}); TAMᵢ(t)=TAMᵢ₀·e^{gᵢ(t−t₀)}; M(t)=Σ[TAMᵢ(t)·Aᵢ(t)^{γᵢ}]; P(t)=M(t)/S_free(t). S_free(t)=S_total(t)·(1−h(t)), h(t)=h_max/(1+e^{−k_h(t−t_h)}).
  </p>
</div>

<script>
  // ---------- Math helpers ----------
  const exp = Math.exp;
  const pow = Math.pow;
  const nowYear = new Date().getFullYear();

  function logistic(t, k, t50) {
    return 1 / (1 + Math.exp(-k * (t - t50)));
  }

  function supplyPiecewise(year, s2025, s2028, s2032) {
    if (year <= 2025) return s2025;
    if (year >= 2032) return s2032;
    if (year <= 2028) return s2025 + (s2028 - s2025) * ((year - 2025) / 3);
    return s2028 + (s2032 - s2028) * ((year - 2028) / 4);
  }

  function fmtMoney(x) {
    if (!isFinite(x)) return "-";
    const abs = Math.abs(x);
    if (abs >= 1e12) return "$" + (x/1e12).toFixed(2) + "T";
    if (abs >= 1e9)  return "$" + (x/1e9 ).toFixed(2) + "B";
    if (abs >= 1e6)  return "$" + (x/1e6 ).toFixed(2) + "M";
    return "$" + x.toFixed(0);
  }
  function fmtPrice(x) {
    if (!isFinite(x)) return "-";
    if (x >= 1e6) return "$" + (x/1e6).toFixed(2) + "M";
    if (x >= 1e3) return "$" + (x/1e3).toFixed(0) + "K";
    return "$" + x.toFixed(0);
  }

  // ---------- Inputs ----------
  const ids = [
    "tam1","tamGrowth1","t501","k1","gamma1",
    "enable2","tam2","tamGrowth2","t502","k2","gamma2",
    "hmax","th","kh","s2025","s2028","s2032","scaleLog"
  ];
  const el = Object.fromEntries(ids.map(id => [id, document.getElementById(id)]));

  // ---------- Chart ----------
  const ctx = document.getElementById("chart").getContext("2d");
  let chart;

  function computeSeries() {
    const t0 = nowYear; // anchor for TAM growth
    const years = [];
    const price = [];
    const mcapT = [];
    const adoptionPct = [];

    // Read params
    const tam1T = parseFloat(el.tam1.value);
    const g1 = parseFloat(el.tamGrowth1.value) / 100;
    const t501 = parseFloat(el.t501.value);
    const k1 = parseFloat(el.k1.value);
    const gamma1 = parseFloat(el.gamma1.value);

    const enable2 = el.enable2.checked;
    const tam2T = parseFloat(el.tam2.value);
    const g2 = parseFloat(el.tamGrowth2.value) / 100;
    const t502 = parseFloat(el.t502.value);
    const k2 = parseFloat(el.k2.value);
    const gamma2 = parseFloat(el.gamma2.value);

    const hmax = Math.max(0, Math.min(100, parseFloat(el.hmax.value))) / 100;
    const th = parseFloat(el.th.value);
    const kh = parseFloat(el.kh.value);

    const s2025 = parseFloat(el.s2025.value);
    const s2028 = parseFloat(el.s2028.value);
    const s2032 = parseFloat(el.s2032.value);

    // Compute time series
    for (let y = 2016; y <= 2036; y += 0.25) {
      const A1 = logistic(y, k1, t501);                         // 0..1
      const TAM1 = tam1T * 1e12 * Math.exp(g1 * (y - t0));      // $
      const M1 = TAM1 * Math.pow(A1, gamma1);                   // $

      let A2 = 0, TAM2 = 0, M2 = 0;
      if (enable2) {
        A2 = logistic(y, k2, t502);
        TAM2 = tam2T * 1e12 * Math.exp(g2 * (y - t0));
        M2 = TAM2 * Math.pow(A2, gamma2);
      }

      const M = M1 + M2;                                        // $
      const Stotal = supplyPiecewise(y, s2025, s2028, s2032) * 1e6; // BTC
      const h = hmax / (1 + Math.exp(-kh * (y - th)));          // 0..hmax
      const Sfree = Math.max(1, Stotal * (1 - h));              // BTC, never 0
      const P = M / Sfree;                                      // $/BTC

      years.push(y);
      price.push(P);
      mcapT.push(M / 1e12);
      // combine adoptions (bounded to 0..1)
      const Acombined = Math.max(0, Math.min(1, A1 + (enable2 ? A2 : 0)));
      adoptionPct.push(Acombined * 100);
    }

    return { years, price, mcapT, adoptionPct };
  }

  function render() {
    const { years, price, mcapT, adoptionPct } = computeSeries();

    // Stats at 2028
    const idx2028 = years.findIndex(y => Math.abs(y - 2028) < 1e-9);
    const P2028 = idx2028 >= 0 ? price[idx2028] : NaN;
    const A2028 = idx2028 >= 0 ? adoptionPct[idx2028] : NaN;
    const M2028 = idx2028 >= 0 ? mcapT[idx2028] : NaN;
    document.getElementById("a2028").textContent = isFinite(A2028) ? A2028.toFixed(1) + "%" : "–";
    document.getElementById("p2028").textContent = isFinite(P2028) ? fmtPrice(P2028) + "/BTC" : "–";
    document.getElementById("m2028").textContent = isFinite(M2028) ? fmtMoney(M2028 * 1e12) : "–";

    const useLog = el.scaleLog.checked;

    const data = {
      labels: years.map(y => y.toFixed(2)),
      datasets: [
        {
          label: "Price ($/BTC)",
          data: price.map(v => (useLog && v <= 0 ? null : v)),
          borderWidth: 2,
          borderColor: "#f59e0b",
          backgroundColor: "rgba(245, 158, 11, 0.08)",
          tension: 0.2,
          yAxisID: "y1",
          pointRadius: 0,
        },
        {
          label: "Market Cap ($T)",
          data: mcapT.map(v => (useLog && v <= 0 ? null : v)),
          borderWidth: 2,
          borderColor: "#22c55e",
          backgroundColor: "rgba(34,197,94,0.06)",
          tension: 0.2,
          yAxisID: "y1",
          pointRadius: 0,
        },
        {
          label: "Adoption (%)",
          data: adoptionPct,
          borderWidth: 2,
          borderColor: "#60a5fa",
          backgroundColor: "rgba(96,165,250,0.06)",
          borderDash: [6,4],
          tension: 0.2,
          yAxisID: "y2",
          pointRadius: 0,
        }
      ]
    };

    const options = {
      responsive: true,
      interaction: { mode: "index", intersect: false },
      plugins: {
        legend: { position: "bottom", labels: { color: "#cfd3da" } },
        tooltip: {
          callbacks: {
            label: (ctx) => {
              const ds = ctx.dataset.label;
              const v = ctx.parsed.y;
              if (ds.includes("Price")) return `Price: ${fmtPrice(v)}/BTC`;
              if (ds.includes("Market Cap")) return `Mkt Cap: ${fmtMoney(v*1e12)}`;
              return `Adoption: ${v.toFixed(1)}%`;
            }
          }
        }
      },
      scales: {
        x: { ticks: { color: "#cfd3da" }, grid: { color: "rgba(255,255,255,0.06)" } },
        y1: {
          type: el.scaleLog.checked ? "logarithmic" : "linear",
          min: el.scaleLog.checked ? 1 : 0,
          ticks: { color: "#cfd3da", callback: (v) => fmtMoney(v) },
          grid: { color: "rgba(255,255,255,0.06)" },
          title: { display: true, text: "Price ($) / Market Cap ($T)", color: "#cfd3da" }
        },
        y2: {
          type: "linear",
          min: 0, max: 100,
          ticks: { color: "#cfd3da" },
          grid: { drawOnChartArea: false },
          title: { display: true, text: "Adoption (%)", color: "#cfd3da" }
        }
      }
    };

    if (chart) chart.destroy();
    chart = new Chart(ctx, { type: "line", data, options });
  }

  // Hook up events
  ids.forEach(id => {
    const node = document.getElementById(id);
    node.addEventListener(node.type === "checkbox" ? "change" : "input", render);
  });

  document.getElementById("reset").addEventListener("click", () => {
    el.tam1.value = 100; el.tamGrowth1.value = 6; el.t501.value = 2028; el.k1.value = 0.5; el.gamma1.value = 1.0;
    el.enable2.checked = true; el.tam2.value = 50; el.tamGrowth2.value = 4; el.t502.value = 2034; el.k2.value = 0.4; el.gamma2.value = 1.1;
    el.hmax.value = 25; el.th.value = 2033; el.kh.value = 0.35;
    el.s2025.value = 19.7; el.s2028.value = 20.3; el.s2032.value = 20.7;
    el.scaleLog.checked = true;
    render();
  });

  document.getElementById("export").addEventListener("click", () => {
    const { years, price, mcapT, adoptionPct } = computeSeries();
    const rows = [["Year","Price_$","MarketCap_$T","Adoption_%"]];
    years.forEach((y, i) => rows.push([y.toFixed(2), price[i].toFixed(2), mcapT[i].toFixed(4), adoptionPct[i].toFixed(2)]));
    const csv = rows.map(r => r.join(",")).join("\n");
    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a"); a.href = url; a.download = "bfem_series.csv"; a.click(); URL.revokeObjectURL(url);
  });

  // Initial render
  render();
</script>
</body>
</html>