path: root/web/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slosh — a terminal multiplexer</title>
<meta name="description" content="slosh: panes, tabs, sessions you can detach from. One static binary, written in C on libghostty-vt.">
<link rel="stylesheet" href="site.css">
<link rel="stylesheet" href="recordings/player.css">
</head>
<body>

<a class="logo-float" href="#" aria-label="slosh — back to top">
    <span class="logo-art"></span>
</a>

<main>

<header class="hero">
<div class="logo logo-art" role="img" aria-label="slosh"></div>
  <p class="tagline">a modern terminal multiplexer written in C on top of
  <a href="https://github.com/ghostty-org/ghostty">libghostty-vt</a>.</p>

  <p class="hero-links">
    <a class="btn" href="#install">install</a>
    <a class="btn ghost" href="#try">try it</a>
    <a class="btn ghost" href="docs/">browse docs</a>
  </p>
</header>

<section id="different" style='margin-top:0;'>
  <div class="scrolly">
    <div class="scrolly-stage">
      <div class="stage-pin">
        <div data-sloshcast="recordings/panes.json" data-loop data-name="panes" class="stage-active"></div>
        <div data-sloshcast="recordings/sessions.json" data-loop data-name="sessions"></div>
        <div data-sloshcast="recordings/reflow.json" data-loop data-name="reflow"></div>
        <div data-sloshcast="recordings/config.json" data-loop data-name="config"></div>
        <div data-sloshcast="recordings/shaders.json" data-loop data-name="shaders"></div>
        <div data-sloshcast="recordings/scripting.json" data-loop data-name="scripting"></div>
        <div data-sloshcast="recordings/extras.json" data-loop data-name="extras"></div>
      </div>
    </div>

    <div class="scrolly-steps">
      <article class="step active" data-cast="panes">
        <h3>Panes and tabs, what else?</h3>
        <p>One keycombo to split — or just click, because we don't hate the mouse.</p>
        <ul>
          <li>click the middle of a border to split toward it</li>
          <li>drag the gap to move the boundary</li>
          <li>drag a pane by its title </li>
          <li>zoom, tab away, come back — nothing lost!</li>
        </ul>
      </article>

      <article class="step" data-cast="sessions">
        <h3>Sessions outlive everything.</h3>
        <p>Detach, let the ssh connection die, come back tomorrow: every pane
        exactly where you left it.</p>
        <ul>
          <li>detach mid-thought, reattach mid-thought</li>
          <li>keep separate sessions for separate lives; hop between them</li>
          <li>a command that died while you were away keeps its output and exit status</li>
        </ul>
      </article>

      <article class="step" data-cast="reflow">
        <h3>Responsive terminal layouts.</h3>
        <p>Layouts (re)flow in the way you expect, nothing drifts.</p>
        <ul>
          <li>quarter-turn the whole layout in place</li>
          <li>shrink until boxes become a tidy list</li>
          <li>grow back: the exact arrangement returns</li>
        </ul>
      </article>

      <article class="step" data-cast="config">
        <h3>Make it yours, live.</h3>
        <p>One config file, hot-reloaded. Press <kbd>C-a</kbd>
        <kbd>e</kbd> to $EDITOR it in place.</p>
        <ul>
          <li>retheme the whole session with one magic vimfu substitution</li>
          <li>padding, gaps, titles: every knob, applied as you watch</li>
          <li><code>compact true</code>: for those who value their terminal real estate.</li>
        </ul>
      </article>

      <article class="step" data-cast="shaders">
        <h3>Nifty visual effects, written as expressions.</h3>
        <p>Dim, tint, rulers, spotlights — over a pane's cells or over its
        frame, with strengths computed from <code>x</code>, <code>y</code>, the
        cursor, the clock.</p>
        <ul>
          <li>tint a frame, rule a column, scanline the lot</li>
          <li>a spotlight that follows the cursor as you type</li>
          <li><code>:load shine</code> — a shipped preset runs light along the frame</li>
          <li>a pane rings unfocused — its border flashes</li>
        </ul>
      </article>

      <article class="step" data-cast="scripting">
        <h3>Built to be driven.</h3>
        <p>One JSON object per line over the session's socket — the same depth
        the keyboard gets. An agent can hold the other end.</p>
        <ul>
          <li>split and rename panes from a script, replies and all</li>
          <li>a program draws status and buttons into its own frame</li>
          <li>the click comes back on that program's stdin</li>
        </ul>
      </article>

      <article class="step" data-cast="extras">
        <h3>Floats, and the small comforts.</h3>
        <p><kbd>C-a</kbd> <kbd>F</kbd> drops a throwaway shell on top of
        whatever you are doing — a monitor, a man page, a quick command.</p>
        <ul>
          <li>move it with the keys that move boundaries; grow it about its
          centre</li>
          <li><kbd>C-a</kbd> <kbd>?</kbd> — a cheatsheet built from the
          bindings actually in force, so it cannot disagree with your
          keyboard</li>
          <li><code>exit</code> closes it like any shell — the layout never
          flinched</li>
        </ul>
      </article>
    </div>
  </div>

</section>

<!-- ================================================================ -->

<section id="try">
  <h2>try it</h2>

  <p>A riscv64 Linux with slosh as the thing you land in, booted right here.
  Nothing is installed, nothing leaves the tab, and the machine is throwaway
  — reload for a fresh one. About 11&nbsp;MiB streams in while it boots.
  <a href="demo/">Prefer a whole tab?</a></p>

  <div class="try-stage" id="try_stage">
    <button class="boot" type="button" id="boot_btn">boot the machine</button>
    <p class="aside">riscv64 · TinyEMU, compiled to wasm · yours until you reload</p>
  </div>
  <p class="try-live" id="try_live" hidden>
    <button class="boot ghost" type="button" id="kill_btn">power off</button>
    <span class="aside">forgets the machine entirely — boot another any time</span>
  </p>
</section>

<!-- ================================================================ -->

<section id="install">
  <h2>install</h2>

  <p>
    Prebuilt binaries for the popular platforms live at
    <a href="dist/">slosh.foo/dist</a> — one static file each, checksummed. The
    tabs below are the short roads to one: an installer for linux, a brew formula
    for macos, a signed pacman repo for arch, a zip for windows. Building from
    source works too, but you never need to.
  </p>

  <div class="install">
    <input class="os" type="radio" name="os" id="os-linux" checked>
    <input class="os" type="radio" name="os" id="os-macos">
    <input class="os" type="radio" name="os" id="os-arch">
    <input class="os" type="radio" name="os" id="os-windows">
    <input class="os" type="radio" name="os" id="os-source">

    <div class="os-tabs">
      <label for="os-linux">linux</label>
      <label for="os-macos">macos</label>
      <label for="os-arch">arch</label>
      <label for="os-windows">windows</label>
      <label for="os-source">source</label>
    </div>

    <div class="os-panel" id="install-linux">
      <div class="cmd" data-copy="curl -fsSL https://slosh.foo/install.sh | sudo sh">
        <pre><code><span class="prompt">$</span> curl -fsSL https://slosh.foo/install.sh | sudo sh</code></pre>
        <button class="copy" type="button" aria-label="Copy command">copy</button>
      </div>
      <div class="cmd" data-copy="curl -fsSL https://slosh.foo/install.sh | PREFIX=$HOME/.local sh">
        <pre><code><span class="prompt">$</span> curl -fsSL https://slosh.foo/install.sh | PREFIX=$HOME/.local sh   <span class="c"># no root</span></code></pre>
        <button class="copy" type="button" aria-label="Copy command">copy</button>
      </div>
      <p class="aside">Piping a URL into a shell should make you flinch —
      <a href="install.sh">read it first</a>, it is short: it picks the
      prebuilt static binary for your architecture from
      <a href="dist/">dist/</a>, checks it against the published SHA256SUMS,
      and puts the one file in <code>PREFIX/bin</code>. The sudo in the first
      line is only for writing to <code>/usr/local/bin</code>; the second line
      needs no root at any step and lands it in <code>~/.local/bin</code>.
      Nothing compiled, nothing else touched.</p>
    </div>

    <div class="os-panel" id="install-macos">
      <div class="cmd" data-copy="brew tap sl0p-foo/slosh &amp;&amp; brew install slosh">
        <pre><code><span class="prompt">$</span> brew tap sl0p-foo/slosh
<span class="prompt">$</span> brew install slosh</code></pre>
        <button class="copy" type="button" aria-label="Copy commands">copy</button>
      </div>
      <p class="aside">No Homebrew? The linux tab's installer works here too —
      on Apple silicon it fetches the signed prebuilt binary from
      <a href="dist/">dist/</a>, verifies it, and installs that. No Xcode, no
      build.</p>
    </div>

    <div class="os-panel" id="install-arch">
      <div class="cmd" data-copy="sudo pacman -Sy slosh">
        <pre><code><span class="c"># /etc/pacman.conf</span>
[slosh]
Server = https://slosh.foo/arch/$arch

<span class="prompt">$</span> sudo pacman -Sy slosh</code></pre>
        <button class="copy" type="button" aria-label="Copy command">copy</button>
      </div>
      <p class="aside">Built, signed packages. Enroll the signing key first —
      the key, the fingerprint to check and the PKGBUILD are in
      <a href="https://git.sl0p.foo/slosh.git/tree/contrib/arch">contrib/arch</a>,
      the same instructions at <a href="arch/">arch/</a>.</p>
    </div>

    <div class="os-panel" id="install-windows">
      <div class="cmd">
        <pre><code><span class="prompt">&gt;</span> curl.exe -LO https://slosh.foo/dist/slosh-&lt;version&gt;-windows-x86_64.zip
<span class="prompt">&gt;</span> tar xf slosh-*-windows-x86_64.zip   <span class="c"># tar ships with Windows 10+</span></code></pre>
      </div>
      <p class="aside">Pick the newest zip from <a href="dist/">dist/</a> —
      x86-64 and ARM64, Windows 10/11. Inside is the same one binary:
      <code>slosh.exe</code>, no runtime dependency beyond the OS. Panes are
      ConPTYs, sessions are AF_UNIX sockets, everything on this page works
      there — <a href="docs/windows.html">the details</a>.</p>
    </div>

    <div class="os-panel" id="install-source">
      <div class="cmd">
        <pre><code><span class="prompt">$</span> git clone https://slosh.foo/src slosh &amp;&amp; cd slosh
<span class="prompt">$</span> make vendor    <span class="c"># the vendored terminal core, once</span>
<span class="prompt">$</span> make           <span class="c"># about a second</span>
<span class="prompt">$</span> sudo install build/slosh /usr/local/bin/</code></pre>
      </div>
      <p class="aside">For the curious — the tabs above hand you this same
      binary prebuilt. Needs <a href="https://ziglang.org">zig</a> 0.16 and
      nothing else: no cmake, no autotools, no libraries. The result is one
      static binary.</p>
    </div>
  </div>
</section>
</main>

<footer class="foot">
  slosh is a <a href="https://sl0p.foo">sl0p.foo</a> product
</footer>

<script>
window.SLOSHCAST_SPEED = 1.75;
</script>
<script src="recordings/player.js"></script>
<script>
for (const box of document.querySelectorAll(".cmd[data-copy]")) {
  const btn = box.querySelector(".copy");
  btn.addEventListener("click", async () => {
    try {
      await navigator.clipboard.writeText(box.dataset.copy);
      btn.textContent = "copied";
      setTimeout(() => (btn.textContent = "copy"), 1200);
    } catch {
      btn.textContent = "select it";
    }
  });
}

const heroEl = document.querySelector(".hero");
const littleLogo = document.querySelector(".logo-float");
const tryEl = document.getElementById("try");
if (heroEl && littleLogo && "IntersectionObserver" in window) {
  const seen = { heroGone: false, pastTour: false, clear: true };
  const apply = () =>
    littleLogo.classList.toggle(
      "show",
      seen.heroGone && !seen.pastTour && seen.clear
    );
  new IntersectionObserver(([e]) => {
    seen.heroGone = !e.isIntersecting;
    apply();
  }).observe(heroEl);
  if (tryEl)
    new IntersectionObserver(
      ([e]) => {
        seen.pastTour = e.isIntersecting || e.boundingClientRect.top < 0;
        apply();
      },
      { rootMargin: "0px 0px -45% 0px" }
    ).observe(tryEl);

  const stagePinEl = document.querySelector(".stage-pin");
  let measuring = false;
  const collide = () => {
    measuring = false;
    const player = stagePinEl && stagePinEl.querySelector(".stage-active");
    if (!player) return;
    const p = player.getBoundingClientRect();
    const l = littleLogo.getBoundingClientRect();
    seen.clear = p.top > l.bottom + 8 || p.bottom < l.top - 8;
    apply();
  };
  addEventListener(
    "scroll",
    () => {
      if (!measuring) {
        measuring = true;
        requestAnimationFrame(collide);
      }
    },
    { passive: true }
  );
  collide();
}

const stagePin = document.querySelector(".stage-pin");
function placeLittleLogo() {
  const player = stagePin && stagePin.querySelector(".stage-active");
  if (!player || !littleLogo) return;
  const pad = parseFloat(getComputedStyle(stagePin).paddingBottom) || 0;
  const termTop = (innerHeight - pad) / 2 - player.offsetHeight / 2;
  const air = termTop - littleLogo.offsetHeight;
  littleLogo.style.top = Math.max(8, air / 2) + "px";
  littleLogo.style.visibility = air >= 16 ? "" : "hidden";
}
if (stagePin && littleLogo) {
  placeLittleLogo();
  window.addEventListener("resize", placeLittleLogo);
  const ro = new ResizeObserver(placeLittleLogo);
  for (const el of stagePin.querySelectorAll("[data-sloshcast]")) ro.observe(el);
}

const bootBtn = document.getElementById("boot_btn");
if (bootBtn) {
  const stage = document.getElementById("try_stage");
  const live = document.getElementById("try_live");
  const poster = [...stage.children];
  bootBtn.addEventListener("click", () => {
    if (matchMedia("(max-width: 54rem)").matches) {
      location.href = "demo/";
      return;
    }
    stage.classList.add("booted");
    const frame = document.createElement("iframe");
    frame.src = "demo/?embed=1";
    frame.className = "try-frame";
    frame.title = "slosh, running in a riscv64 machine in this page";
    stage.replaceChildren(frame);
    stage.scrollIntoView({ block: "center" });
    frame.addEventListener("load", () => frame.contentWindow.focus());
    live.hidden = false;
  });
  document.getElementById("kill_btn").addEventListener("click", () => {
    stage.classList.remove("booted");
    stage.replaceChildren(...poster);
    live.hidden = true;
    stage.scrollIntoView({ block: "center" });
  });
}

const ua = navigator.userAgent;
const os = /Windows/i.test(ua) ? "windows" : /Mac/i.test(ua) ? "macos" : "linux";
const radio = document.getElementById("os-" + os);
if (radio) radio.checked = true;

const tour = document.querySelector(".scrolly");
if (tour) {
  const mounts = [...tour.querySelectorAll(".stage-pin [data-sloshcast]")];
  const steps = [...tour.querySelectorAll(".step")];
  const ctl = (el) => el._sloshcast;
  let current = null;

  for (const s of steps) {
    s.addEventListener("click", (ev) => {
      if (s.classList.contains("active")) return;
      if (ev.target.closest("a")) return;
      if (!getSelection().isCollapsed) return;
      s.scrollIntoView({ block: "center" });
    });
  }

  const show = (name) => {
    if (!name || name === current) return;
    current = name;
    for (const el of mounts) {
      const on = el.dataset.name === name;
      el.classList.toggle("stage-active", on);
      if (!ctl(el)) continue;
      if (on) {
        ctl(el).restart();
        ctl(el).play();
      } else ctl(el).pause();
    }
  };

  const mid = new IntersectionObserver(
    (entries) => {
      for (const e of entries)
        if (e.isIntersecting) {
          for (const s of steps) s.classList.toggle("active", s === e.target);
          show(e.target.dataset.cast);
        }
    },
    { rootMargin: "-45% 0px -45% 0px" },
  );
  for (const s of steps) mid.observe(s);

  new IntersectionObserver((entries) => {
    for (const e of entries) {
      const active = mounts.find((m) => m.classList.contains("stage-active"));
      if (!active || !ctl(active)) continue;
      if (e.isIntersecting) ctl(active).play();
      else ctl(active).pause();
    }
  }).observe(tour);

  tour.addEventListener("sloshcast", (e) => {
    if (e.target.classList.contains("stage-active")) {
      ctl(e.target).fit();
      ctl(e.target).play();
    }
  });
}
</script>

</body>
</html>