An interactive dashboard that runs a Metropolis-Hastings Markov Chain Monte Carlo sampler in your browser and animates it exploring a 2D probability density in real time.

• Renders a target density as a heatmap (Viridis color ramp).
• Runs a Gaussian random-walk Metropolis-Hastings chain, drawing the trace and accepted samples on top.
• Live stats: iteration count, acceptance rate, and running mean / std of the samples (post burn-in).
• Tweak the target distribution, proposal step size, and steps per frame and watch how mixing and acceptance respond.

• Set step size very small (0.1) on the Banana target — watch the chain crawl and acceptance shoot up toward 100% (poor mixing).
• Crank step size to 2.5 — acceptance collapses as most proposals get rejected.
• Switch to Bimodal and see how hard it is for the chain to hop between the two modes.

Rendering mermaid diagram...

index.ts                       ← Hono backend (serves frontend)
frontend/
  index.html                   ← HTML shell (Twind + React)
  index.tsx                    ← React entrypoint
  favicon.svg
  lib/
    distributions.ts           ← target densities (banana, bimodal, donut, gaussian)
    sampler.ts                 ← Metropolis-Hastings step + stats
  components/
    App.tsx                    ← root: state, rAF animation loop
    SamplerCanvas.tsx          ← density heatmap + chain overlay (canvas)
    Controls.tsx               ← target / step-size / speed controls
    StatsPanel.tsx             ← live diagnostics

• Add a target: append to TARGETS in lib/distributions.ts with a logProb and bounds.
• Add a sampler: implement a new step variant in lib/sampler.ts (e.g. Hamiltonian Monte Carlo or adaptive Metropolis).
• Persist runs: add an API route in index.ts and store summaries with std/sqlite or std/blob.