---
layout: qualia
title: VibeScript Showcase
---
<meta charset="utf-8">

<div class="vibe-showcase">
  <style>
    .vibe-showcase .sc-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
      gap: 16px;
      margin: 1.5rem 0;
    }
    .vibe-showcase .sc-card {
      background: rgba(15,23,42,0.6);
      border: 1px solid rgba(148,163,184,0.1);
      border-radius: 12px;
      overflow: hidden;
      transition: border-color 0.15s;
    }
    .vibe-showcase .sc-card:hover { border-color: rgba(34,211,238,0.3); }
    .vibe-showcase .sc-card-header {
      padding: 12px 16px;
      border-bottom: 1px solid rgba(148,163,184,0.08);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .vibe-showcase .sc-card-header .icon { font-size: 1.1rem; }
    .vibe-showcase .sc-card-header h3 {
      margin: 0; font-size: 0.95rem; font-weight: 600; color: #e2e8f0;
    }
    .vibe-showcase .sc-card-header .badge {
      margin-left: auto; font-size: 0.7rem; padding: 2px 8px;
      border-radius: 4px; background: rgba(34,211,238,0.1); color: #22d3ee;
    }
    .vibe-showcase .sc-code {
      padding: 12px 16px;
      font-family: ui-monospace, monospace;
      font-size: 0.8rem;
      line-height: 1.5;
      color: #e2e8f0;
      background: rgba(10,14,23,0.6);
      white-space: pre;
      overflow-x: auto;
    }
    .vibe-showcase .sc-output {
      padding: 12px 16px;
      font-family: ui-monospace, monospace;
      font-size: 0.8rem;
      line-height: 1.5;
      border-top: 1px solid rgba(148,163,184,0.08);
      min-height: 48px;
    }
    .vibe-showcase .sc-output .result { color: #4ade80; }
    .vibe-showcase .sc-output .error { color: #f87171; }
    .vibe-showcase .sc-output .info { color: #64748b; }
    .vibe-showcase .sc-output .loading { color: #475569; }
    .vibe-showcase .sc-run {
      padding: 6px 16px;
      border: none;
      border-top: 1px solid rgba(148,163,184,0.08);
      width: 100%;
      background: rgba(30,41,59,0.4);
      color: #22d3ee;
      font-size: 0.8rem;
      cursor: pointer;
      transition: background 0.1s;
    }
    .vibe-showcase .sc-run:hover { background: rgba(34,211,238,0.1); }
    .vibe-showcase h2 {
      font-size: 1.5rem; font-weight: 700; color: #e2e8f0;
      margin: 2rem 0 0.5rem;
    }
    .vibe-showcase p { color: #cbd5e1; line-height: 1.7; }
  </style>

  <h2>Interactive Demos</h2>
  <p>
    Each demo runs live in your browser via the VibeScript WebAssembly module.
    Click "Run" to execute the code and see the result.
  </p>
  <p style="padding:12px 16px;border:1px solid rgba(34,211,238,.25);border-radius:10px;background:rgba(8,47,73,.25);">
    Want to see the same zero-install principle applied to semantic data? <a href="{{ '/rdf-q42-vibe-demo.html' | relative_url }}" style="color:#67e8f9;font-weight:600;">Run the RDF → Q42 → Vibe browser demo</a>: it loads a real Q42 volume and queries it locally in WASM.
  </p>

  <div class="sc-grid" id="sc-grid">
    <div class="sc-loading" style="color:#64748b;">Loading WASM...</div>
  </div>
</div>

<script type="module">
  import init, { eval_cell_src, eval_program_src } from "{{ '/pkg/vibe/vibe_wasm.js' | relative_url }}";

  const demos = [
    {
      icon: "🧮",
      title: "Arithmetic",
      badge: "cell",
      code: "= 1 + 2 * 3 - 4",
      mode: "cell",
      fn: null,
    },
    {
      icon: "📐",
      title: "Fibonacci (iterative)",
      badge: "program",
      code: `fn fib_iter(n: i64) budget(steps: 100000) -> i64 {
  let mut a = 0;
  let mut b = 1;
  let mut i = 0;
  while i < n {
    let t = a + b;
    a = b;
    b = t;
    i = i + 1;
  }
  return a;
}

fn main() -> i64 {
  return fib_iter(15);
}`,
      mode: "program",
      fn: "main",
    },
    {
      icon: "📋",
      title: "List Operations",
      badge: "cell",
      code: "= [10, 20, 30, 40, 50][3]",
      mode: "cell",
      fn: null,
    },
    {
      icon: "🏷️",
      title: "Record Access",
      badge: "cell",
      code: '= { name: "alice", age: 30, role: "admin" }.role',
      mode: "cell",
      fn: null,
    },
    {
      icon: "🔀",
      title: "Logical Short-Circuit",
      badge: "cell",
      code: "= true && (false || true) && !false",
      mode: "cell",
      fn: null,
    },
    {
      icon: "🔁",
      title: "For Loop Sum",
      badge: "program",
      code: `fn sum_list() budget(steps: 10000) -> i64 {
  let mut s = 0;
  for x in [10, 20, 30, 40, 50] {
    s = s + x;
  }
  return s;
}

fn main() -> i64 {
  return sum_list();
}`,
      mode: "program",
      fn: "main",
    },
    {
      icon: "🎯",
      title: "Match Expression",
      badge: "program",
      code: `fn classify(x: i64) -> i64 {
  match x {
    0 => { return 100; }
    1 => { return 200; }
    _ => { return 999; }
  }
}

fn main() -> i64 {
  return classify(1);
}`,
      mode: "program",
      fn: "main",
    },
    {
      icon: "📊",
      title: "While Loop Accumulator",
      badge: "program",
      code: `fn sum_to(n: i64) budget(steps: 10000) -> i64 {
  let mut s = 0;
  let mut i = 0;
  while i < n {
    s = s + i;
    i = i + 1;
  }
  return s;
}

fn main() -> i64 {
  return sum_to(100);
}`,
      mode: "program",
      fn: "main",
    },
    {
      icon: "🔤",
      title: "String Equality",
      badge: "cell",
      code: '= "vibe" == "vibe"',
      mode: "cell",
      fn: null,
    },
    {
      icon: "🌊",
      title: "Float Math",
      badge: "cell",
      code: "= 3.14159 * 2.0 * 10.0",
      mode: "cell",
      fn: null,
    },
    {
      icon: "🏗️",
      title: "Nested Functions",
      badge: "program",
      code: `fn add(a: i64, b: i64) -> i64 { return a + b; }
fn mul(a: i64, b: i64) -> i64 { return a * b; }
fn compute(x: i64) -> i64 { return mul(add(x, 1), add(x, 2)); }

fn main() -> i64 {
  return compute(5);
}`,
      mode: "program",
      fn: "main",
    },
    {
      icon: "⚖️",
      title: "Comparison Chain",
      badge: "cell",
      code: "= 42 >= 40 && 42 <= 50",
      mode: "cell",
      fn: null,
    },
    {
      icon: "🪐",
      title: "3D Orbit Spin (Animation)",
      badge: "program",
      code: `using Animation;

fn main() -> Record {
  return Animation.orbit_spin(0.25);
}`,
      mode: "program",
      fn: "main",
    },
    {
      icon: "💡",
      title: "Lamp Presentation Sheaf",
      badge: "program",
      code: `using Animation;

fn main() -> Record {
  let glow = oklch(0.72, 0.12, 230.0);
  let pose = Animation.orbit_spin(1.0);
  return { color: glow, pose: pose };
}`,
      mode: "program",
      fn: "main",
    },
    {
      icon: "🔗",
      title: "Two-Way Bind & Tween",
      badge: "program",
      code: `let mut volume = 0.2;
let mut slider = 0.2;
bind slider <-> volume using Clamp[0.0, 1.0] resolve latest;

fn main() -> f64 {
  return 0.0 ~ 10.0 over 400ms ease linear;
}`,
      mode: "program",
      fn: "main",
    },
    {
      icon: "λ",
      title: "Pure Lambdas (.map)",
      badge: "program",
      code: `fn main() {
  return [1, 2, 3, 4, 5].map(|x| x * x);
}`,
      mode: "program",
      fn: "main",
    },
    {
      icon: "⏱️",
      title: "Physical Quantities",
      badge: "cell",
      code: "= 500ms + 250ms",
      mode: "cell",
      fn: null,
    },
    {
      icon: "🌏",
      title: "Chinese Keyword Locale",
      badge: "program",
      code: `locale zh;

函数 compute(a: i64, b: i64) -> i64 {
  返回 a * b + 42;
}

函数 main() -> i64 {
  返回 compute(10, 5);
}`,
      mode: "program",
      fn: "main",
    },
    {
      icon: "🌍",
      title: "Cosmic geodesy (WGS84)",
      badge: "program",
      code: `using Cosmic;

effect fn main() -> Record {
  return Cosmic.geodetic_to_ecef({
    lat_deg: -37.8,
    lon_deg: 144.9,
    alt_m: 0.0
  });
}`,
      mode: "program",
      fn: "main",
    },
  ];

  async function run() {
    await init();

    const grid = document.getElementById('sc-grid');
    grid.innerHTML = '';

    demos.forEach(demo => {
      const card = document.createElement('div');
      card.className = 'sc-card';
      card.innerHTML = `
        <div class="sc-card-header">
          <span class="icon">${demo.icon}</span>
          <h3>${demo.title}</h3>
          <span class="badge">${demo.badge}</span>
        </div>
        <div class="sc-code">${escapeHtml(demo.code)}</div>
        <div class="sc-output" id="out-${Math.random().toString(36).slice(2)}">
          <span class="loading">Click Run to evaluate</span>
        </div>
        <button class="sc-run">▶ Run</button>
      `;

      const outputEl = card.querySelector('.sc-output');
      const runBtn = card.querySelector('.sc-run');

      runBtn.addEventListener('click', () => {
        outputEl.innerHTML = '<span class="loading">Running...</span>';
        try {
          let result;
          if (demo.mode === 'cell') {
            result = eval_cell_src(demo.code);
          } else {
            result = eval_program_src(demo.code);
          }
          if (result.ok) {
            outputEl.innerHTML = `<span class="result">→ ${formatValue(result.value)}</span>`;
          } else {
            outputEl.innerHTML = `<span class="error">✗ ${JSON.stringify(result.error)}</span>`;
          }
        } catch (e) {
          outputEl.innerHTML = `<span class="error">✗ ${e.message}</span>`;
        }
      });

      grid.appendChild(card);
    });

    // Auto-run all demos
    document.querySelectorAll('.sc-run').forEach((btn, i) => {
      setTimeout(() => btn.click(), i * 100);
    });
  }

  function formatValue(v) {
    if (v === null || v === undefined) return 'null';
    if (typeof v === 'object') {
      if (v.type === 'ok') return `Ok(${formatValue(v.value)})`;
      if (v.type === 'error') return `Err(${formatValue(v.value)})`;
      if (Array.isArray(v)) return `[${v.map(formatValue).join(', ')}]`;
      return JSON.stringify(v);
    }
    return String(v);
  }

  function escapeHtml(s) {
    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  }

  run();
</script>