bird/docs/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="color-scheme" content="dark" />
    <meta name="theme-color" content="#0b0d10" />

    <title>bird.fast — fast X CLI</title>
    <meta
      name="description"
      content="bird is a fast X CLI for tweeting, replying, and reading via the X/Twitter GraphQL API through twitter safe relay."
    />

    <link rel="canonical" href="https://bird.fast/" />
    <link rel="icon" href="./favicon.svg" type="image/svg+xml" />

    <meta property="og:title" content="bird.fast" />
    <meta property="og:description" content="Fast X CLI for tweeting, replying, and reading." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://bird.fast/" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],500..900&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"
    />

    <link rel="stylesheet" href="./assets/site.css" />
  </head>

  <body>
    <a class="skip" href="#content">Skip to content</a>

    <div class="bg" aria-hidden="true">
      <div class="bg__orb bg__orb--a"></div>
      <div class="bg__orb bg__orb--b"></div>
      <div class="bg__grid"></div>
      <div class="bg__noise"></div>
    </div>

    <header class="top">
      <div class="top__inner">
        <a class="brand" href="./" aria-label="bird.fast home">
          <span class="brand__mark" aria-hidden="true">
            <img src="./assets/mark.svg" width="26" height="26" alt="" />
          </span>
          <span class="brand__word">bird</span>
          <span class="brand__dot">.fast</span>
        </a>

        <nav class="nav">
          <a class="nav__link" href="#install">Install</a>
          <a class="nav__link" href="#commands">Commands</a>
          <a class="nav__link" href="https://git.yutakobayashi.com/yuta/bird">Gitea</a>
        </nav>
      </div>
    </header>

    <main id="content">
      <section class="hero">
        <div class="hero__inner">
          <p class="kicker" data-reveal>Fast X CLI. Cookie auth. Zero fuss.</p>

          <h1 class="title" data-reveal>
            <span class="title__big">bird</span><span class="title__dot">.fast</span>
          </h1>

          <p class="lede" data-reveal>
            Tweet, reply, read threads, search, mentions — powered by X/Twitter GraphQL and your existing
            browser session.
          </p>

          <div class="cta" data-reveal>
            <a class="btn btn--hot" href="#install">Install</a>
            <a class="btn btn--ghost" href="https://git.yutakobayashi.com/yuta/bird#quickstart">Quickstart</a>
          </div>

          <div class="terminal" data-reveal>
            <div class="terminal__bar">
              <span class="terminal__dots" aria-hidden="true">
                <i></i><i></i><i></i>
              </span>
              <span class="terminal__label">copy &amp; run</span>
            </div>
            <div class="terminal__body">
              <pre><code id="installCmd">npm install -g @yuta/bird

bird whoami
bird tweet "hi from bird.fast"</code></pre>
              <button class="copy" type="button" data-copy="#installCmd">
                <span class="copy__idle">Copy</span>
                <span class="copy__done" aria-hidden="true">Copied</span>
              </button>
            </div>
          </div>

          <div class="badges" data-reveal>
            <a class="badge" href="https://www.npmjs.com/package/@yuta/bird">
              <span class="badge__k">npm</span>
              <span class="badge__v">@yuta/bird</span>
            </a>
            <a class="badge" href="https://git.yutakobayashi.com/yuta/bird">
              <span class="badge__k">repo</span>
              <span class="badge__v">yuta/bird</span>
            </a>
            <a class="badge" href="https://git.yutakobayashi.com/yuta/bird#authentication-graphql">
              <span class="badge__k">auth</span>
              <span class="badge__v">relay</span>
            </a>
          </div>
        </div>
      </section>

      <section class="stripe" id="install">
        <div class="stripe__inner">
          <h2 class="h2">Install</h2>
          <div class="cards">
            <article class="card">
              <h3 class="h3">npm / pnpm / bun</h3>
              <p class="p">Pick your poison. Node ≥ 20.</p>
              <pre class="code"><code>npm install -g @yuta/bird
pnpm add -g @yuta/bird
bun add -g @yuta/bird</code></pre>
            </article>
            <article class="card">
              <h3 class="h3">One-shot</h3>
              <p class="p">No install. Just prove it works.</p>
              <pre class="code"><code>bunx @yuta/bird whoami</code></pre>
            </article>
            <article class="card">
              <h3 class="h3">Homebrew (macOS)</h3>
              <p class="p">Prebuilt Bun binary.</p>
              <pre class="code"><code>brew install steipete/tap/bird</code></pre>
            </article>
          </div>
        </div>
      </section>

      <section class="stripe stripe--tight" id="commands">
        <div class="stripe__inner">
          <h2 class="h2">Commands</h2>
          <p class="p p--muted">Everything you need for a fast “read → reply → move on” loop.</p>

          <div class="cmds" role="tablist" aria-label="bird commands">
            <button class="cmd is-on" type="button" data-cmd="tweet" role="tab" aria-selected="true">
              tweet
            </button>
            <button class="cmd" type="button" data-cmd="reply" role="tab" aria-selected="false">reply</button>
            <button class="cmd" type="button" data-cmd="read" role="tab" aria-selected="false">read</button>
            <button class="cmd" type="button" data-cmd="thread" role="tab" aria-selected="false">thread</button>
            <button class="cmd" type="button" data-cmd="search" role="tab" aria-selected="false">search</button>
            <button class="cmd" type="button" data-cmd="mentions" role="tab" aria-selected="false">
              mentions
            </button>
          </div>

          <div class="demo" aria-live="polite">
            <pre class="demo__pre"><code id="demoCode">bird tweet "ship it"</code></pre>
            <button class="copy copy--demo" type="button" data-copy="#demoCode">
              <span class="copy__idle">Copy</span>
              <span class="copy__done" aria-hidden="true">Copied</span>
            </button>
          </div>
        </div>
      </section>

      <section class="stripe stripe--end">
        <div class="stripe__inner">
          <h2 class="h2">How it works</h2>
          <div class="steps">
            <article class="step">
              <div class="step__num">01</div>
              <h3 class="h3">Use your existing session</h3>
              <p class="p p--muted">
                Cookie auth. No password prompt. Reads from Safari/Chrome/Firefox (configurable).
              </p>
            </article>
            <article class="step">
              <div class="step__num">02</div>
              <h3 class="h3">GraphQL first</h3>
              <p class="p p--muted">
                Talks to X’s internal endpoints. Query IDs rotate — bird auto-refreshes and caches them.
              </p>
            </article>
            <article class="step">
              <div class="step__num">03</div>
              <h3 class="h3">Fast, scriptable output</h3>
              <p class="p p--muted">
                Human output by default. Flip to <span class="pill">--json</span> or
                <span class="pill">--plain</span> when you need stability.
              </p>
            </article>
          </div>

          <aside class="notice notice--warn" role="note" aria-label="Disclaimer">
            <div class="notice__icon" aria-hidden="true">!</div>
            <div class="notice__body">
              <p class="notice__title">Documented internal API.</p>
              <p class="notice__text">
                bird uses X/Twitter’s
                <a href="https://github.com/fa0311/TwitterInternalAPIDocument">documented</a> internal web GraphQL
                endpoints and rotating query IDs. X can change things anytime — expect breakage without notice.
              </p>
            </div>
          </aside>

          <div class="footerline">
            <a class="tiny" href="https://git.yutakobayashi.com/yuta/bird#authentication-graphql">
              Authentication details
            </a>
            <span class="sep" aria-hidden="true">•</span>
            <a class="tiny" href="https://git.yutakobayashi.com/yuta/bird#config-json5">Config (JSON5)</a>
            <span class="sep" aria-hidden="true">•</span>
            <a class="tiny" href="https://git.yutakobayashi.com/yuta/bird/issues">Issues</a>
          </div>
        </div>
      </section>
    </main>

    <footer class="bottom">
      <div class="bottom__inner">
        <p class="tiny">
          MIT licensed.
        </p>
        <p class="tiny tiny--muted">bird.fast is the landing page; the project lives on Gitea.</p>
      </div>
    </footer>

    <script src="./assets/site.js" type="module"></script>
  </body>
</html>