MemPalace · igorls · Apr 17, 2026 · Apr 17, 2026 · Apr 17, 2026 · Apr 17, 2026
@@ -0,0 +1,100 @@
+<template>
+  <section v-pre id="anatomy" class="anatomy">
+    <div class="section-mark"><span class="roman">ii</span> <span>anatomy of a palace</span></div>
+
+    <div class="anatomy-head">
+      <div>
+        <span class="eyebrow">the method of loci, updated</span>
+        <h2 class="display">
+          Wings. Rooms. Closets. <em>Drawers.</em>
+        </h2>
+      </div>
+      <p class="lede">
+        An ancient memory technique, reworked for a machine. Broad categories
+        nest time-based groupings; time-based groupings bundle topics; topics
+        hold verbatim drawers. A symbolic index lets the model scan thousands
+        of drawers in a single pass and open only the ones it needs.
+      </p>
+    </div>
+
+    <div class="anatomy-diagram">
+      <article class="stratum">
+        <span class="n">W — wing</span>
+        <h3>The <em>Wings</em></h3>
+        <p class="sub">people · projects · topics</p>
+        <p>A broad region of the palace, keyed to a real entity — a person by name, a project by codename, a domain of your life. Entity-first, always.</p>
+        <div class="diagram">
+          <svg viewBox="0 0 200 80" fill="none" stroke="currentColor" stroke-width="1" style="color:var(--prism);">
+            <rect x="5" y="20" width="190" height="50" opacity="0.4"/>
+            <rect x="15" y="28" width="50" height="34" />
+            <rect x="75" y="28" width="50" height="34" />
+            <rect x="135" y="28" width="50" height="34" />
+            <line x1="5" y1="12" x2="195" y2="12" stroke-dasharray="2 3" opacity="0.5"/>
+          </svg>
+        </div>
+      </article>
+
+      <article class="stratum">
+        <span class="n">R — room</span>
+        <h3>The <em>Rooms</em></h3>
+        <p class="sub">days · sessions · threads</p>
+        <p>Inside a wing sit rooms — discrete units of time. One room per day, or one per session. Walk the corridor and the palace unfolds chronologically, room by room.</p>
+        <div class="diagram">
+          <svg viewBox="0 0 200 80" fill="none" stroke="currentColor" stroke-width="1" style="color:var(--prism);">
+            <rect x="10" y="20" width="36" height="44" />
+            <rect x="56" y="20" width="36" height="44" />
+            <rect x="102" y="20" width="36" height="44" />
+            <rect x="148" y="20" width="36" height="44" />
+            <line x1="10" y1="70" x2="184" y2="70" stroke-dasharray="1 3" opacity="0.6"/>
+          </svg>
+        </div>
+      </article>
+
+      <article class="stratum">
+        <span class="n">C — closet</span>
+        <h3>The <em>Closets</em></h3>
+        <p class="sub">topics · threads · bundles</p>
+        <p>Inside a room, closets group related drawers by topic or thread. Open one closet and you see every drawer on that subject together — no need to walk the whole room.</p>
+        <div class="diagram">
+          <svg viewBox="0 0 200 80" fill="none" stroke="currentColor" stroke-width="1" style="color:var(--prism);">
+            <g class="closet">
+              <rect x="10" y="14" width="54" height="52" />
+              <line x1="37" y1="14" x2="37" y2="66" opacity="0.5"/>
+              <circle cx="33" cy="40" r="1.2" fill="currentColor"/>
+              <circle cx="41" cy="40" r="1.2" fill="currentColor"/>
+            </g>
+            <g class="closet">
+              <rect x="73" y="14" width="54" height="52" />
+              <line x1="100" y1="14" x2="100" y2="66" opacity="0.5"/>
+              <circle cx="96" cy="40" r="1.2" fill="currentColor"/>
+              <circle cx="104" cy="40" r="1.2" fill="currentColor"/>
+            </g>
+            <g class="closet">
+              <rect x="136" y="14" width="54" height="52" />
+              <line x1="163" y1="14" x2="163" y2="66" opacity="0.5"/>
+              <circle cx="159" cy="40" r="1.2" fill="currentColor"/>
+              <circle cx="167" cy="40" r="1.2" fill="currentColor"/>
+            </g>
+          </svg>
+        </div>
+      </article>
+
+      <article class="stratum">
+        <span class="n">D — drawer</span>
+        <h3>The <em>Drawers</em></h3>
+        <p class="sub">verbatim · permanent · exact</p>
+        <p>Each room holds drawers. A drawer is a single chunk of verbatim content — the exact words, untouched. The palace's promise is kept here.</p>
+        <div class="diagram">
+          <svg viewBox="0 0 200 80" fill="none" stroke="currentColor" stroke-width="1" style="color:var(--prism);">
+            <rect x="40" y="14" width="120" height="16" />
+            <rect x="40" y="34" width="120" height="16" />
+            <rect x="40" y="54" width="120" height="16" />
+            <circle cx="150" cy="22" r="1.5" fill="currentColor"/>
+            <circle cx="150" cy="42" r="1.5" fill="currentColor"/>
+            <circle cx="150" cy="62" r="1.5" fill="currentColor"/>
+          </svg>
+        </div>
+      </article>
+    </div>
+  </section>
+</template>
@@ -0,0 +1,45 @@
+<template>
+  <footer v-pre class="catalog">
+    <form class="waitlist waitlist-footer" data-source="footer" novalidate>
+      <div class="waitlist-head">
+        <span class="waitlist-pulse" aria-hidden="true"></span>
+        <span class="waitlist-eyebrow">Last call &middot; subscribe for updates</span>
+      </div>
+      <div class="waitlist-row">
+        <input type="email" class="waitlist-input" name="email" placeholder="you@example.com" autocomplete="email" aria-label="Email address" required />
+        <button type="submit" class="waitlist-submit">
+          <span class="waitlist-label-default">Join the list</span>
+          <span class="waitlist-label-pending" aria-hidden="true">Joining…</span>
+          <svg class="waitlist-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
+          <svg class="waitlist-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M5 12l5 5 9-11"/></svg>
+        </button>
+      </div>
+      <p class="waitlist-msg" aria-live="polite"></p>
+    </form>
+
+    <div class="catalog-card">
+      <div>
+        <p class="catalog-title">MemPalace <em>&mdash;</em> a memory palace for AI.</p>
+        <p class="catalog-desc">Verbatim storage, local-first, zero telemetry. Built for people who believe their words are theirs.</p>
+      </div>
+      <div>
+        <h4>Documentation</h4>
+        <ul>
+          <li><a href="/guide/getting-started">Getting started</a></li>
+          <li><a href="/concepts/the-palace">The palace</a></li>
+          <li><a href="/reference/cli">CLI reference</a></li>
+          <li><a href="/reference/benchmarks">Benchmarks</a></li>
+        </ul>
+      </div>
+      <div>
+        <h4>The project</h4>
+        <ul>
+          <li><a href="https://github.com/MemPalace/mempalace">GitHub</a></li>
+          <li><a href="https://github.com/MemPalace/mempalace/blob/main/README.md">Readme</a></li>
+          <li><a href="https://github.com/MemPalace/mempalace/blob/main/ROADMAP.md">Roadmap</a></li>
+          <li><a href="https://github.com/MemPalace/mempalace/blob/main/CHANGELOG.md">Changelog</a></li>
+        </ul>
+      </div>
+    </div>
+  </footer>
+</template>
@@ -0,0 +1,64 @@
+<template>
+  <section v-pre id="dialect" class="dialect">
+    <div class="section-mark"><span class="roman">iii</span> <span>the aaak dialect</span></div>
+
+    <div class="dialect-head">
+      <span class="eyebrow">index &larr; verbatim</span>
+      <h2 class="display">
+        A compressed symbolic language <em>for finding</em>, not remembering.
+      </h2>
+      <p class="lede">
+        The content stays verbatim — always. The <em>index</em> above it is written
+        in AAAK: a dense symbolic dialect an LLM can scan at a glance. Thousands
+        of entries, one pass, exact drawer located.
+      </p>
+    </div>
+
+    <div class="dialect-grid">
+      <article class="slab">
+        <header class="card-head">
+          <span class="l">drawer · D-007</span>
+          <span>verbatim · exact · permanent</span>
+        </header>
+        <p class="label">The drawer, as stored.</p>
+        <p>
+          "My son's name is <strong>Noah</strong>. He turns <strong>six</strong>
+          on <strong>September 12th</strong>. He loves dinosaurs —
+          especially the <strong>therizinosaurus</strong> because of the
+          claws. We want to do a small party at <strong>the park on Glebe
+          Point Road</strong>, maybe eight kids."
+        </p>
+        <p style="color:var(--ice-ghost); font-size: 13.5px; font-family: var(--f-mono); letter-spacing: 0.05em; margin-top:1.5rem;">
+          &mdash; kept as spoken. never rewritten.
+        </p>
+      </article>
+
+      <div class="dialect-arrow" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3">
+          <path d="M12 3v18M7 8l5-5 5 5M7 16l5 5 5-5"/>
+        </svg>
+        <span>index · AAAK</span>
+      </div>
+
+      <article class="slab mono">
+        <header class="card-head">
+          <span class="l">index · AAAK</span>
+          <span>indexes · compressed · addressable</span>
+        </header>
+        <p class="label">The pointer, as indexed.</p>
+<pre><span class="c">§ W-042/R-11/D-007</span>
+<span class="k">@p</span> <span class="t">noah</span>~<span class="v">son.age=6</span>~<span class="v">dob=09-12</span>
+<span class="k">@l</span> <span class="t">glebe-pt-rd.park</span>
+<span class="k">@e</span> <span class="t">birthday</span>~<span class="v">party(n≈8)</span>
+<span class="k">@i</span> <span class="t">therizinosaurus</span>~<span class="v">claws</span>
+<span class="k">@t</span> <span class="v">2026-04-14T09:41</span>
+<span class="c">§ ptr → D-007 (verbatim)</span></pre>
+      </article>
+    </div>
+
+    <p class="dialect-caption">
+      Dense compression on the pointer layer. Full fidelity on the content
+      layer. You get speed without ever losing a word.
+    </p>
+  </section>
+</template>
@@ -0,0 +1,16 @@
+<template>
+  <header v-pre class="folio" role="banner">
+    <div class="mark" aria-label="MemPalace">
+      <img src="/mempalace_logo.png" alt="" aria-hidden="true" />
+      <span>MemPalace</span>
+    </div>
+    <nav class="right" aria-label="Primary">
+      <a href="#anatomy" class="hide-mobile">Anatomy</a>
+      <a href="#dialect" class="hide-mobile">Dialect</a>
+      <a href="#mechanics" class="hide-mobile">Mechanics</a>
+      <a href="#install" class="hide-mobile">Install</a>
+      <a href="/guide/getting-started">Docs</a>
+      <a href="https://github.com/MemPalace/mempalace">GitHub ↗</a>
+    </nav>
+  </header>
+</template>
@@ -0,0 +1,43 @@
+<template>
+  <section v-pre id="forgetting" class="forgetting">
+    <div class="section-mark"><span class="roman">i</span> <span>the forgetting</span></div>
+
+    <header class="forgetting-head">
+      <div class="copy">
+        <span class="eyebrow">before &middot; after</span>
+        <h2 class="display">
+          The same conversation, <em>twice.</em>
+        </h2>
+        <p class="lede" style="margin:0;">
+          Scroll down and watch. On the left, a model without memory. On the right,
+          the same model with MemPalace. The words are identical — until two weeks
+          pass.
+        </p>
+      </div>
+      <button class="replay" id="replay-demo" type="button" aria-label="Replay the demo">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M4 4v6h6"/><path d="M20 20v-6h-6"/><path d="M4 10a8 8 0 0114-5l2 3"/><path d="M20 14a8 8 0 01-14 5l-2-3"/></svg>
+        replay
+      </button>
+    </header>
+
+    <div class="forgetting-compare" id="forgetting-compare" aria-label="Comparison demo">
+      <article class="demo-pane demo-forget">
+        <header>
+          <span class="pane-tag">without mempalace</span>
+          <span class="pane-meta">session <em>resets</em> &middot; no recall</span>
+        </header>
+        <div class="chat" data-pane="forget" aria-live="polite"></div>
+      </article>
+
+      <div class="divider" aria-hidden="true"></div>
+
+      <article class="demo-pane demo-remember">
+        <header>
+          <span class="pane-tag">with mempalace</span>
+          <span class="pane-meta">verbatim &middot; retrieved <em>instantly</em></span>
+        </header>
+        <div class="chat" data-pane="remember" aria-live="polite"></div>
+      </article>
+    </div>
+  </section>
+</template>
@@ -0,0 +1,81 @@
+<template>
+  <section v-pre class="hero" id="hero">
+    <span class="corner-ticks" aria-hidden="true"><span></span></span>
+
+    <div class="hero-inner">
+      <div class="hero-copy">
+        <h1 class="display">
+          <span class="line">Memory is</span>
+          <span class="line line-2">identity.</span>
+        </h1>
+        <p class="lede">
+          An AI that forgets cannot know you. MemPalace keeps every word you have
+          shared — verbatim, on your machine, permanent. Designed for total
+          recall.
+        </p>
+        <form class="waitlist waitlist-hero" data-source="hero" novalidate>
+          <div class="waitlist-head">
+            <span class="waitlist-pulse" aria-hidden="true"></span>
+            <span class="waitlist-eyebrow">Subscribe for updates</span>
+          </div>
+          <div class="waitlist-row">
+            <input
+              type="email"
+              class="waitlist-input"
+              name="email"
+              placeholder="you@example.com"
+              autocomplete="email"
+              aria-label="Email address"
+              required
+            />
+            <button type="submit" class="waitlist-submit">
+              <span class="waitlist-label-default">Join the list</span>
+              <span class="waitlist-label-pending" aria-hidden="true">Joining…</span>
+              <svg class="waitlist-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
+                <path d="M5 12h14M13 6l6 6-6 6"/>
+              </svg>
+              <svg class="waitlist-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                <path d="M5 12l5 5 9-11"/>
+              </svg>
+            </button>
+          </div>
+          <p class="waitlist-msg" aria-live="polite"></p>
+        </form>
+
+        <div class="hero-secondary">
+          <a href="/guide/getting-started">Read the docs</a>
+          <span class="sep" aria-hidden="true">·</span>
+          <a href="https://github.com/MemPalace/mempalace">GitHub ↗</a>
+        </div>
+      </div>
+
+      <!-- Palace video visual -->
+      <div class="palace-stage" aria-hidden="true">
+        <div class="halo"></div>
+
+        <div class="stars">
+          <i style="top:12%; left:22%;  --t:5s;   --d:0.0s"></i>
+          <i style="top:18%; left:74%;  --t:6s;   --d:1.2s"></i>
+          <i style="top:34%; left:8%;   --t:4s;   --d:0.6s"></i>
+          <i style="top:44%; left:88%;  --t:7s;   --d:0.3s"></i>
+          <i style="top:62%; left:14%;  --t:5.5s; --d:1.8s"></i>
+          <i style="top:72%; left:82%;  --t:4.5s; --d:0.9s"></i>
+          <i style="top:82%; left:38%;  --t:6.2s; --d:2.4s"></i>
+          <i style="top:28%; left:52%;  --t:5.2s; --d:3.0s"></i>
+          <i style="top:88%; left:60%;  --t:4.8s; --d:1.5s"></i>
+          <i style="top:6%;  left:48%;  --t:6.8s; --d:0.4s"></i>
+        </div>
+
+        <video
+          class="palace-video"
+          src="/hero_video.mp4"
+          autoplay
+          muted
+          loop
+          playsinline
+          disablepictureinpicture
+        ></video>
+      </div>
+    </div>
+  </section>
+</template>
@@ -0,0 +1,38 @@
+<template>
+  <section v-pre id="install" class="install">
+    <div class="section-mark" style="left:50%; transform:translateX(-50%);"><span class="roman">v</span> <span>begin</span></div>
+    <span class="eyebrow" style="justify-content:center;">open a drawer</span>
+    <h2 class="display">
+      Build your <em>palace.</em>
+    </h2>
+    <p class="lede" style="margin-left:auto;margin-right:auto;text-align:center;">
+      One command to install. One to initialize. Your words — yours, permanent,
+      instantly recallable — from that moment on.
+    </p>
+
+    <div class="terminal" role="figure" aria-label="Installation commands">
+      <div class="terminal-head">
+        <span class="lights"><i></i><i></i><i></i></span>
+        <span>~/mempalace &middot; bash</span>
+      </div>
+<pre><span class="prompt">$</span> pip install -e <span class="dim">".[dev]"</span>
+<span class="c">Successfully installed mempalace</span>
+<span class="prompt">$</span> mempalace init
+<span class="ok">  ✓</span> palace created at <span class="dim">~/.mempalace</span>
+<span class="ok">  ✓</span> hooks registered <span class="dim">(stop, precompact)</span>
+<span class="ok">  ✓</span> knowledge graph initialized
+<span class="prompt">$</span> mempalace mine <span class="dim">./notes</span>
+<span class="ok">  ✓</span> filed · <span class="c">W-001/R-01/D-001</span></pre>
+    </div>
+
+    <div class="install-cta">
+      <a href="/guide/getting-started" class="btn btn-primary">
+        Read the docs
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
+      </a>
+      <a href="https://github.com/MemPalace/mempalace" class="btn">
+        Visit the repository
+      </a>
+    </div>
+  </section>
+</template>