index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>highda. Tools you didn't ask for.</title>
<meta name="description" content="Seven browser tools for images, CSS, fonts and guitar practice. No accounts, no uploads, no business model.">
<meta name="theme-color" content="#161618">
<link rel="canonical" href="https://highda.github.io/">
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">

<meta property="og:type" content="website">
<meta property="og:url" content="https://highda.github.io/">
<meta property="og:title" content="highda. Tools you didn't ask for.">
<meta property="og:description" content="Seven browser tools. No accounts, no uploads, no business model.">
<meta name="twitter:card" content="summary">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/assets/site.css">
</head>
<body>
<header class="nav">
  <div class="wrap">
    <a class="logo" href="/">highda<sup>™</sup></a>
    <nav aria-label="Primary">
      <a href="#lineup">Lineup</a>
      <a class="hide-sm" href="#pricing">Pricing</a>
      <a class="hide-sm" href="https://github.com/highda" rel="noopener">GitHub</a>
      <a class="btn sm" href="#lineup">Get it free</a>
    </nav>
  </div>
</header>

<main>
  <section class="hero wrap" aria-labelledby="hero-title">
    <div class="sticker" aria-hidden="true"><span>NEW!<small>still free</small></span></div>
    <p class="kicker">Introducing the 2026 lineup</p>
    <h1 id="hero-title">highda.</h1>
    <p class="sub">Tools you didn't ask for. <span>Built anyway.</span></p>
    <div class="cta">
      <a class="btn" href="#lineup">See the lineup</a>
      <a class="btn ghost" href="#pricing">Compare plans</a>
    </div>
    <p class="fine">Available now in a browser near you.<a class="fn" href="#fn1">1</a></p>
  </section>

  <section class="section wrap" id="lineup" aria-labelledby="lineup-title">
    <div class="head">
      <h2 id="lineup-title">The lineup.</h2>
      <p>Each one does exactly one thing. A few of them do two.</p>
    </div>

    <div class="grid">
      <article class="tile full dark">
        <span class="badge">Flagship</span>
        <h3>Glitch Lab</h3>
        <p class="tag-line">Break your images on purpose. Stack effects, reorder them, export the damage.</p>
        <div class="links">
          <a class="btn" href="/vibecode-snippets/glitch-lab/">Launch</a>
          <a class="more" href="https://github.com/highda/glitch-lab" rel="noopener">Source</a>
        </div>
        <div class="shot" aria-hidden="true"><span class="s-glitch" data-t="ERR">ERR</span></div>
      </article>

      <article class="tile">
        <span class="badge">Pro-grade sorting</span>
        <h3>Pixel Sorter</h3>
        <p class="tag-line">Your photo, alphabetized. More knobs than strictly necessary.</p>
        <div class="links"><a class="btn" href="/vibecode-snippets/pixel-sorter.html">Launch</a></div>
        <div class="shot" aria-hidden="true">
          <div class="s-sort">
            <i style="width:92%"></i><i style="width:64%"></i><i style="width:100%"></i><i style="width:41%"></i>
            <i style="width:78%"></i><i style="width:88%"></i><i style="width:55%"></i><i style="width:97%"></i>
            <i style="width:70%"></i><i style="width:83%"></i>
          </div>
        </div>
      </article>

      <article class="tile">
        <span class="badge">Now with video</span>
        <h3>CGA Converter</h3>
        <p class="tag-line">Four colours. It turns out that's plenty.</p>
        <div class="links"><a class="btn" href="/vibecode-snippets/convertto-cga-v2.html">Launch</a></div>
        <div class="shot" aria-hidden="true"><div class="s-cga cga"></div></div>
      </article>

      <article class="tile">
        <span class="badge">Collector's edition</span>
        <h3>CGA Converter Classic</h3>
        <p class="tag-line">Same idea, slower engine. Runs ImageMagick in WebAssembly, for the purists.</p>
        <div class="links"><a class="btn" href="/vibecode-snippets/convertto-cga.html">Launch</a></div>
        <div class="shot" aria-hidden="true"><div class="s-crt"><i class="cga"></i></div></div>
      </article>

      <article class="tile">
        <span class="badge">For developers</span>
        <h3>Mask Compositor</h3>
        <p class="tag-line">Design CSS <code>mask-image</code> gradients visually. Copy. Paste. Leave early.</p>
        <div class="links"><a class="btn" href="/vibecode-snippets/gradient-maskimage-compositor.html">Launch</a></div>
        <div class="shot" aria-hidden="true"><div class="s-mask"></div></div>
      </article>

      <article class="tile">
        <span class="badge">Bookmarklet</span>
        <h3>Font Ripper</h3>
        <p class="tag-line">Every font on the page, in one ZIP. Even the shy ones.</p>
        <div class="links">
          <a class="btn" href="/vibecode-snippets/font-ripper.html">Install</a>
          <a class="more" href="https://github.com/highda/vibecode-snippets/tree/main/bookmarklets/font-ripper" rel="noopener">Source</a>
        </div>
        <div class="shot" aria-hidden="true"><div class="s-font"><b>Aa</b><span>fonts.zip</span></div></div>
      </article>

      <article class="tile">
        <span class="badge">Personal growth</span>
        <h3>Chord Trainer</h3>
        <p class="tag-line">Switch chords faster than you switch hobbies.</p>
        <div class="links">
          <a class="btn" href="/vibecode-snippets/chords-trainer/">Launch</a>
          <a class="more" href="https://github.com/highda/chords-trainer" rel="noopener">Source</a>
        </div>
        <div class="shot" aria-hidden="true">
          <div class="s-frets">
            <i style="left:12.5%;top:24.8%"></i><i style="left:37.5%;top:58.4%"></i><i style="left:62.5%;top:75.2%"></i>
          </div>
        </div>
      </article>
    </div>
  </section>

  <section class="section wrap" aria-labelledby="numbers-title">
    <div class="head"><h2 id="numbers-title">By the numbers.</h2></div>
    <div class="stats">
      <div class="stat"><b>0</b><span>bytes uploaded to our servers.<a class="fn" href="#fn2">2</a></span></div>
      <div class="stat"><b>0</b><span>accounts, logins or cookie banners.</span></div>
      <div class="stat"><b>7</b><span>tools. Eight if you count the bugs.</span></div>
      <div class="stat"><b>100%</b><span>client-side. Your tab does all the work.</span></div>
    </div>
  </section>

  <figure class="quote wrap">
    <blockquote>“I don't know what it does, but it's in my bookmarks.”</blockquote>
    <figcaption>A hypothetical user</figcaption>
  </figure>

  <section class="section wrap" id="pricing" aria-labelledby="pricing-title">
    <div class="head">
      <h2 id="pricing-title">Pricing.</h2>
      <p>Pick the plan that's right for you. It's the first one.</p>
    </div>
    <div class="plans">
      <div class="plan">
        <h3>Free</h3>
        <div class="price">$0</div>
        <div class="per">per month, per year, per lifetime.<a class="fn" href="#fn3">3</a></div>
        <ul>
          <li>Every tool in the lineup</li>
          <li>Every future tool, whenever</li>
          <li>Runs offline-ish</li>
          <li>Source code included</li>
        </ul>
        <a class="btn" href="#lineup">Choose Free</a>
      </div>
      <div class="plan off" aria-label="Pro plan, not available">
        <h3>Pro</h3>
        <div class="price">N/A</div>
        <div class="per">This plan does not exist.</div>
        <ul>
          <li>Priority support</li>
          <li>Team seats</li>
          <li>An SLA</li>
          <li>A reason to exist</li>
        </ul>
        <span class="btn ghost" aria-disabled="true">Sold out forever</span>
      </div>
    </div>
  </section>
</main>

<footer>
  <div class="wrap">
    <ol>
      <li id="fn1">Requires a browser. Most browsers qualify. Some tools are happier on desktop.</li>
      <li id="fn2">There are no servers. This is a static site hosted on GitHub Pages. Your files never leave your device.</li>
      <li id="fn3">Price subject to never changing.</li>
    </ol>
    <div class="bottom">
      <span>© 2026 highda. Not a company. Never was.</span>
      <a href="https://github.com/highda" rel="noopener">github.com/highda</a>
    </div>
  </div>
</footer>
</body>
</html>