From e67c3785e441de696bb2ea4ac55a4218ec4633df Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Sat, 18 Oct 2025 07:42:30 +1300
Subject: [PATCH 01/32] chore: npm install @hotwired/stimulus

---
 index.js          |  8 ++++++++
 package-lock.json | 20 ++++++++++++++++++++
 package.json      |  4 ++++
 webpack.config.js |  3 +++
 4 files changed, 35 insertions(+)

diff --git a/index.js b/index.js
index e69de29..3583e64 100644
--- a/index.js
+++ b/index.js
@@ -0,0 +1,8 @@
+import { Application } from "@hotwired/stimulus";
+import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers";
+
+// Auto-import all controllers as per stimulus documentation.
+// https://stimulus.hotwired.dev/handbook/installing#using-webpack-helpers
+window.Stimulus = Application.start();
+const context = require.context("./scripts/controllers", true, /\.js$/);
+Stimulus.load(definitionsFromContext(context));
diff --git a/package-lock.json b/package-lock.json
index 6695112..bd17a9b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,11 @@
     "": {
       "name": "website",
       "version": "1.0.0",
+      "dependencies": {
+        "@hotwired/stimulus": "^3.2.2"
+      },
       "devDependencies": {
+        "@hotwired/stimulus-webpack-helpers": "^1.0.1",
         "html-webpack-plugin": "^5.6.4",
         "webpack-cli": "^6.0.1",
         "webpack-dev-server": "^5.2.2"
@@ -23,6 +27,22 @@
         "node": ">=14.17.0"
       }
     },
+    "node_modules/@hotwired/stimulus": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@hotwired/stimulus/-/stimulus-3.2.2.tgz",
+      "integrity": "sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A==",
+      "license": "MIT"
+    },
+    "node_modules/@hotwired/stimulus-webpack-helpers": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@hotwired/stimulus-webpack-helpers/-/stimulus-webpack-helpers-1.0.1.tgz",
+      "integrity": "sha512-wa/zupVG0eWxRYJjC1IiPBdt3Lruv0RqGN+/DTMmUWUyMAEB27KXmVY6a8YpUVTM7QwVuaLNGW4EqDgrS2upXQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@hotwired/stimulus": ">= 3.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
diff --git a/package.json b/package.json
index d09e8f0..fdf98cc 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,11 @@
     "url": "https://github.com/lukeify/website.git"
   },
   "private": true,
+  "dependencies": {
+    "@hotwired/stimulus": "^3.2.2"
+  },
   "devDependencies": {
+    "@hotwired/stimulus-webpack-helpers": "^1.0.1",
     "html-webpack-plugin": "^5.6.4",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.2"
diff --git a/webpack.config.js b/webpack.config.js
index 4d48fe3..6d76254 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,6 +5,9 @@ module.exports = {
     entry: {
         main: './index.js'
     },
+    output: {
+        filename: '[name].bundle.js',
+    },
     devServer: {
         server: 'https',
         static: {

From bc1909029d083d1071adb56252d9144edbeefb71 Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Sat, 18 Oct 2025 15:27:30 +1300
Subject: [PATCH 02/32] feat: x axis navigation

---
 index.html                            | 117 +++++++++++++++++++-------
 scripts/controllers/xmb_controller.js |  82 ++++++++++++++++++
 styles/global.css                     |  38 +++++----
 styles/xmb.css                        |  25 ++++++
 4 files changed, 217 insertions(+), 45 deletions(-)
 create mode 100644 scripts/controllers/xmb_controller.js
 create mode 100644 styles/xmb.css

diff --git a/index.html b/index.html
index 3a0e6fa..26b3c26 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="styles/variables.css">
     <link rel="stylesheet" href="styles/global.css">
     <link rel="stylesheet" href="styles/styles.css">
+    <link rel="stylesheet" href="styles/xmb.css">
     <link rel="stylesheet" href="styles/components/authenticity-sticker.css">
     <link rel="stylesheet" href="styles/components/emoji.css">
     <script>
@@ -99,37 +100,93 @@
     </defs>
 </svg>
 
-    <!-- Above the fold -->
-    <h1 class="hed">
-        <span class="emoji-container"><span class="emoji">👋</span></span> Hello!
-    </h1>
-    <p>I'm <strong>Luke</strong>—a software engineer living in 📍 <a href="https://maps.apple.com/?address=Central%20Otago%20District,%20New%20Zealand">Central Otago, New Zealand</a>.</p>
-    <p>Currently, I'm a Senior Rails Developer at <a href="https://ackama.com">Ackama</a>; and also run a small business, Bluewing.</p>
-    <p>I don't maintain a strong internet presence, but you can see the things I work on, connect—or just send me a message if you'd like to go paragliding together!—use the links below.</p>
-
-    <ul>
-        <li>GitHub: <a href="https://github.com/lukeify">lukeify</a></li>
-    </ul>
-
-    <div class="authenticity-sticker__wrapper">
-        <div class="authenticity-sticker__shadow">
-            <div class="authenticity-sticker__shadow-clip-path"></div>
+<main data-controller="xmb" data-action="keydown@window->xmb#handleKeydown">
+    <section data-xmb-target="primary" data-xmb-primary-active>
+        <h1>Hello!</h1>
+        <div class="contents">
+            <h2>Intro</h2>
+            <div>
+                <p>This site uses an intersectional interface reminiscent of the XrossMediaBar (XMB) on the PlayStation Portable and PS3.</p>
+                <p>Navigate this site using your keyboard arrows, click the on-screen arrows with your mouse, or scroll to move through the Z-axis of the currently selected header.</p>
+            </div>
+            <h2>Site Navigation</h2>
+            <div>
+                <p>Navigate this site using the </p>
+            </div>
+        </div>
+    </section>
+
+    <section data-xmb-target="primary">
+        <h1 class="header--inactive">Posts</h1>
+        <div class="contents">
+            <h2>Recent Post A</h2>
+            <h2>Recent Post B</h2>
+            <h2>Recent Post C</h2>
+        </div>
+    </section>
+
+    <section data-xmb-target="primary">
+        <h1 class="header--inactive">Hobbies</h1>
+        <div class="contents">
+            <h2>Foo</h2>
+            <h2>Bar</h2>
+        </div>
+    </section>
+
+    <section data-xmb-target="primary">
+        <h1 class="header--inactive">Projects</h1>
+        <div class="contents">
+            <h2>Foo</h2>
+            <h2>Bar</h2>
         </div>
-        <div class="authenticity-sticker">
-            <svg class="authenticity-sticker__text-svg" viewBox="0 0 100 100">
-                <path id="top-curve" d="M 0 50 A 1 1 0 1 1 100 50" fill="none" />
-                <path id="bottom-curve" d="M 0 50 A 1 1 0 1 0 100 50" fill="none" />
-                <text>
-                    <!-- The use of `alignment-baseline` in Firefox does not correctly place the text with respect to the rest of the DOM elements, so use `dominant-baseline` instead. -->
-                    <!-- See: https://github.com/eladnava/material-letter-icons/issues/7 -->
-                    <textPath class="authenticity-sticker__text" dominant-baseline="hanging" text-anchor="middle" xlink:href="#top-curve" startOffset="50%">AUTHENTICALLY</textPath>
-                    <textPath class="authenticity-sticker__text" dominant-baseline="auto" text-anchor="middle" xlink:href="#bottom-curve" startOffset="50%">CRAFTED</textPath>
-                </text>
-            </svg>
-            <div class="authenticity-sticker__anisotropy authenticity-sticker__anisotropy--sharp-from-center"></div>
-            <div class="authenticity-sticker__radial-machining"></div>
-            <div class="authenticity-sticker__anisotropy authenticity-sticker__anisotropy--diffuse-from-edge"></div>
+    </section>
+
+    <section data-xmb-target="primary">
+        <h1 class="header--inactive">Work</h1>
+        <div class="contents">
+            <h2>Currently</h2>
+            <h2>Get in touch!</h2>
         </div>
-    </div>
+    </section>
+
+    <section data-xmb-target="primary">
+        <h1 class="header--inactive">About</h1>
+        <div class="contents">
+            <h2>Principles</h2>
+            <h2>Preferences</h2>
+        </div>
+    </section>
+</main>
+
+
+    <!-- Above the fold -->
+<!--    <p>I'm <strong>Luke</strong>—a software engineer living in 📍 <a href="https://maps.apple.com/?address=Central%20Otago%20District,%20New%20Zealand">Central Otago, New Zealand</a>.</p>-->
+<!--    <p>Currently, I'm a Senior Rails Developer at <a href="https://ackama.com">Ackama</a>; and also run a small business, Bluewing.</p>-->
+<!--    <p>I don't maintain a strong internet presence, but you can see the things I work on, connect—or just send me a message if you'd like to go paragliding together!—use the links below.</p>-->
+
+<!--    <ul>-->
+<!--        <li>GitHub: <a href="https://github.com/lukeify">lukeify</a></li>-->
+<!--    </ul>-->
+
+<!--    <div class="authenticity-sticker__wrapper">-->
+<!--        <div class="authenticity-sticker__shadow">-->
+<!--            <div class="authenticity-sticker__shadow-clip-path"></div>-->
+<!--        </div>-->
+<!--        <div class="authenticity-sticker">-->
+<!--            <svg class="authenticity-sticker__text-svg" viewBox="0 0 100 100">-->
+<!--                <path id="top-curve" d="M 0 50 A 1 1 0 1 1 100 50" fill="none" />-->
+<!--                <path id="bottom-curve" d="M 0 50 A 1 1 0 1 0 100 50" fill="none" />-->
+<!--                <text>-->
+<!--                    &lt;!&ndash; The use of `alignment-baseline` in Firefox does not correctly place the text with respect to the rest of the DOM elements, so use `dominant-baseline` instead. &ndash;&gt;-->
+<!--                    &lt;!&ndash; See: https://github.com/eladnava/material-letter-icons/issues/7 &ndash;&gt;-->
+<!--                    <textPath class="authenticity-sticker__text" dominant-baseline="hanging" text-anchor="middle" xlink:href="#top-curve" startOffset="50%">AUTHENTICALLY</textPath>-->
+<!--                    <textPath class="authenticity-sticker__text" dominant-baseline="auto" text-anchor="middle" xlink:href="#bottom-curve" startOffset="50%">CRAFTED</textPath>-->
+<!--                </text>-->
+<!--            </svg>-->
+<!--            <div class="authenticity-sticker__anisotropy authenticity-sticker__anisotropy&#45;&#45;sharp-from-center"></div>-->
+<!--            <div class="authenticity-sticker__radial-machining"></div>-->
+<!--            <div class="authenticity-sticker__anisotropy authenticity-sticker__anisotropy&#45;&#45;diffuse-from-edge"></div>-->
+<!--        </div>-->
+<!--    </div>-->
 </body>
 </html>
diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
new file mode 100644
index 0000000..6e37bc3
--- /dev/null
+++ b/scripts/controllers/xmb_controller.js
@@ -0,0 +1,82 @@
+import {Controller} from "@hotwired/stimulus";
+
+export default class extends Controller {
+    static targets = ['primary'];
+
+    primaryTargetDataAttribute = 'data-xmb-primary-active';
+
+    get previousPrimaryTarget() {
+        return this.activePrimaryTarget.previousElementSibling;
+    }
+
+    get nextPrimaryTarget() {
+        return this.activePrimaryTarget.nextElementSibling;
+    }
+
+    get activePrimaryTarget() {
+        return this.primaryTargets.find(pt => pt.hasAttribute(this.primaryTargetDataAttribute));
+    }
+
+    handleKeydown(event) {
+        switch (event.key) {
+            case 'ArrowUp':
+                this.#zPositive();
+                break;
+            case 'ArrowDown':
+                this.#zNegative();
+                break;
+            case 'ArrowRight':
+                this.#xPositive();
+                break;
+            case 'ArrowLeft':
+                this.#xNegative();
+                break;
+        }
+    }
+
+    #xPositive() {
+        const nextTarget = this.nextPrimaryTarget;
+        if (!nextTarget) {
+            return;
+        }
+
+        this.#setNewPrimaryTarget(nextTarget);
+        this.#setTranslation('x', -this.previousPrimaryTarget.getBoundingClientRect().width);
+    }
+
+    #xNegative() {
+        const prevTarget = this.previousPrimaryTarget;
+        if (!prevTarget) {
+            return;
+        }
+
+        this.#setTranslation('x', this.previousPrimaryTarget.getBoundingClientRect().width);
+        this.#setNewPrimaryTarget(prevTarget);
+    }
+
+    #zPositive() {
+
+    }
+
+    #zNegative() {
+
+    }
+
+    #currentTranslation() {
+        const computedStyle = window.getComputedStyle(this.element);
+        return {
+            x: parseFloat(computedStyle.getPropertyValue('--x-translation')),
+            z: parseFloat(computedStyle.getPropertyValue('--z-translation'))
+        };
+    }
+
+    #setTranslation(axis, adjustment) {
+        const newValue = this.#currentTranslation()[axis] + adjustment;
+        this.element.style.setProperty(`--${axis}-translation`, `${newValue}px`);
+    }
+
+    #setNewPrimaryTarget(newTarget) {
+        this.activePrimaryTarget.removeAttribute(this.primaryTargetDataAttribute);
+        newTarget.setAttribute(this.primaryTargetDataAttribute, '');
+    }
+}
diff --git a/styles/global.css b/styles/global.css
index 21d405f..1d3c45a 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -2,26 +2,34 @@
     box-sizing: border-box;
 }
 
-html, body {
-    min-height: 100%;
-}
-
 html {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  min-height: 100%;
+  overflow-x: hidden;
 }
 
 body {
-    color: var(--primary-text--light-appearance);
-    background-color: var(--primary-bg--light-appearance);
-    font-family: var(--text-typeface);
-    font-size: 1.1em;
-    font-weight: 400;
-    line-height: 1.5;
-    max-width: var(--content-width);
+  color: var(--primary-text--light-appearance);
+  background-color: var(--primary-bg--light-appearance);
+  font: 400 1.1em var(--text-typeface);
+  line-height: 1.5;
+  max-width: var(--content-width);
+  margin-inline: auto;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--display-typeface);
+  margin: 0;
+  letter-spacing: -0.03em;
+}
+
+h1 {
+  font-size: 8em;
+}
+
+h2 {
+  font-size: 4em;
 }
 
 strong {
-    font-weight: 500;
+  font-weight: 500;
 }
diff --git a/styles/xmb.css b/styles/xmb.css
new file mode 100644
index 0000000..ccaab5c
--- /dev/null
+++ b/styles/xmb.css
@@ -0,0 +1,25 @@
+main {
+  --x-translation: 0;
+  --z-translation: 0;
+  display: flex;
+  transition: transform 100ms ease;
+  transform: translateX(var(--x-translation));
+}
+
+section {
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: 500;
+    opacity: 0.2;
+  }
+}
+
+section[data-xmb-primary-active] {
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: 700;
+    opacity: 1;
+  }
+}
+
+.contents {
+  position: absolute;
+}

From cb6b5c5feacf3f131895ebd4aeeffcc1302c7c28 Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Sat, 18 Oct 2025 17:47:17 +1300
Subject: [PATCH 03/32] feat: initial z-axis travel

---
 index.html                            | 44 ++++++++++++++++++---------
 scripts/controllers/xmb_controller.js | 32 +++++++++++++++++--
 styles/xmb.css                        | 25 ++++++++++++++-
 3 files changed, 82 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index 26b3c26..ed8e819 100644
--- a/index.html
+++ b/index.html
@@ -103,56 +103,70 @@
 <main data-controller="xmb" data-action="keydown@window->xmb#handleKeydown">
     <section data-xmb-target="primary" data-xmb-primary-active>
         <h1>Hello!</h1>
-        <div class="contents">
+        <div class="subsection" data-xmb-target="secondary" data-xmb-secondary-active>
             <h2>Intro</h2>
-            <div>
-                <p>This site uses an intersectional interface reminiscent of the XrossMediaBar (XMB) on the PlayStation Portable and PS3.</p>
-                <p>Navigate this site using your keyboard arrows, click the on-screen arrows with your mouse, or scroll to move through the Z-axis of the currently selected header.</p>
-            </div>
+            <p>This site uses an intersectional interface reminiscent of the XrossMediaBar (XMB) on the PlayStation Portable and PS3.</p>
+            <p>Navigate this site using your keyboard arrows, click the on-screen arrows with your mouse, or scroll to move through the Z-axis of the currently selected header.</p>
+        </div>
+        <div class="subsection" data-xmb-target="secondary" data-xmb-secondary-backgrounded>
             <h2>Site Navigation</h2>
-            <div>
-                <p>Navigate this site using the </p>
-            </div>
+            <p>Navigate this site using the arrow keys.</p>
+        </div>
+        <div class="subsection" data-xmb-target="secondary">
+            <h2>Final</h2>
+            <p>Foo bar</p>
         </div>
     </section>
 
     <section data-xmb-target="primary">
         <h1 class="header--inactive">Posts</h1>
-        <div class="contents">
+        <div class="subsection">
             <h2>Recent Post A</h2>
+        </div>
+        <div class="subsection">
             <h2>Recent Post B</h2>
+        </div>
+        <div class="subsection">
             <h2>Recent Post C</h2>
         </div>
     </section>
 
     <section data-xmb-target="primary">
         <h1 class="header--inactive">Hobbies</h1>
-        <div class="contents">
+        <div class="subsection">
             <h2>Foo</h2>
+        </div>
+        <div class="subsection">
             <h2>Bar</h2>
         </div>
     </section>
 
     <section data-xmb-target="primary">
         <h1 class="header--inactive">Projects</h1>
-        <div class="contents">
+        <div class="subsection">
             <h2>Foo</h2>
+        </div>
+        <div class="subsection">
             <h2>Bar</h2>
         </div>
     </section>
 
     <section data-xmb-target="primary">
         <h1 class="header--inactive">Work</h1>
-        <div class="contents">
-            <h2>Currently</h2>
-            <h2>Get in touch!</h2>
+        <div class="subsection">
+            <h2>Current</h2>
+        </div>
+        <div class="subsection">
+            <h2>Contact</h2>
         </div>
     </section>
 
     <section data-xmb-target="primary">
         <h1 class="header--inactive">About</h1>
-        <div class="contents">
+        <div class="subsection">
             <h2>Principles</h2>
+        </div>
+        <div class="subsection">
             <h2>Preferences</h2>
         </div>
     </section>
diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index 6e37bc3..e8e1c89 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -1,9 +1,11 @@
 import {Controller} from "@hotwired/stimulus";
 
 export default class extends Controller {
-    static targets = ['primary'];
+    static targets = ['primary', 'secondary'];
 
     primaryTargetDataAttribute = 'data-xmb-primary-active';
+    secondaryTargetDataAttribute = 'data-xmb-secondary-active';
+    secondaryBackgroundedTargetDataAttribute = 'data-xmb-secondary-backgrounded';
 
     get previousPrimaryTarget() {
         return this.activePrimaryTarget.previousElementSibling;
@@ -55,11 +57,23 @@ export default class extends Controller {
     }
 
     #zPositive() {
-
+        this.#secondaryTargets();
+        const active = this.#activeSecondaryTarget();
+        const backgrounded = this.#backgroundedSecondaryTarget();
+        active.previousElementSibling.setAttribute('data-xmb-secondary-active', '');
+        active.removeAttribute('data-xmb-secondary-active');
+        active.setAttribute('data-xmb-secondary-backgrounded', '');
+        backgrounded.removeAttribute('data-xmb-secondary-backgrounded');
     }
 
-    #zNegative() {
 
+    #zNegative() {
+        this.#activeSecondaryTarget().removeAttribute('data-xmb-secondary-active');
+        const backgrounded = this.#backgroundedSecondaryTarget();
+        const nextTarget = backgrounded.nextElementSibling;
+        backgrounded.removeAttribute('data-xmb-secondary-backgrounded');
+        backgrounded.setAttribute('data-xmb-secondary-active', '');
+        nextTarget.setAttribute('data-xmb-secondary-backgrounded', '');
     }
 
     #currentTranslation() {
@@ -79,4 +93,16 @@ export default class extends Controller {
         this.activePrimaryTarget.removeAttribute(this.primaryTargetDataAttribute);
         newTarget.setAttribute(this.primaryTargetDataAttribute, '');
     }
+
+    #secondaryTargets() {
+        return this.secondaryTargets.filter(st => st.parentElement === this.activePrimaryTarget);
+    }
+
+    #activeSecondaryTarget() {
+        return this.#secondaryTargets().find(st => st.hasAttribute(this.secondaryTargetDataAttribute));
+    }
+
+    #backgroundedSecondaryTarget() {
+        return this.#secondaryTargets().find(st => st.hasAttribute(this.secondaryBackgroundedTargetDataAttribute));
+    }
 }
diff --git a/styles/xmb.css b/styles/xmb.css
index ccaab5c..e01d7a0 100644
--- a/styles/xmb.css
+++ b/styles/xmb.css
@@ -2,6 +2,7 @@ main {
   --x-translation: 0;
   --z-translation: 0;
   display: flex;
+  margin-block-start: 10em;
   transition: transform 100ms ease;
   transform: translateX(var(--x-translation));
 }
@@ -20,6 +21,28 @@ section[data-xmb-primary-active] {
   }
 }
 
-.contents {
+.subsection {
+  display: none;
   position: absolute;
+  width: 40em;
+  transition: transform 1s cubic-bezier(0.00,1.00,0.00,1.00), filter 500ms ease-out, opacity 500ms ease-out;
+}
+
+.subsection[data-xmb-secondary-backgrounded] {
+  transition: transform 1000ms cubic-bezier(0.01,1.00,0.99,0.99), filter 500ms ease, opacity 500ms ease-out;
+}
+
+.subsection[data-xmb-secondary-active], .subsection[data-xmb-secondary-backgrounded] {
+  display: block;
+  transform: perspective(100px);
+}
+
+.subsection[data-xmb-secondary-backgrounded] {
+  transform: perspective(100px) translate3D(100px, -200px, -200px);
+  opacity: 0.4;
+  filter: blur(10px);
+}
+
+.stack {
+  transform: perspective(100px) translateZ(0);
 }

From 316b034292bec44e21af49c65e087b877927acf6 Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Sat, 18 Oct 2025 21:52:42 +1300
Subject: [PATCH 04/32] refactor: use single z axis data attribute

---
 index.html                            | 17 ++++--
 scripts/controllers/xmb_controller.js | 14 +----
 styles/xmb.css                        | 76 ++++++++++++++++++++-------
 3 files changed, 72 insertions(+), 35 deletions(-)

diff --git a/index.html b/index.html
index ed8e819..ecfd8ec 100644
--- a/index.html
+++ b/index.html
@@ -105,10 +105,21 @@
         <h1>Hello!</h1>
         <div class="subsection" data-xmb-target="secondary" data-xmb-secondary-active>
             <h2>Intro</h2>
-            <p>This site uses an intersectional interface reminiscent of the XrossMediaBar (XMB) on the PlayStation Portable and PS3.</p>
-            <p>Navigate this site using your keyboard arrows, click the on-screen arrows with your mouse, or scroll to move through the Z-axis of the currently selected header.</p>
+            <div class="container">
+                <p>This site uses an intersectional interface reminiscent of the XrossMediaBar (XMB) on the PlayStation Portable and PS3.</p>
+                <p>Navigate this site using your keyboard arrows, click the on-screen arrows with your mouse, or scroll to move through the Z-axis of the currently selected header.</p>
+                <p>Seafaring quartermaster cannon aurora. Seafaring heave with compass without quartermaster quartermaster. "Mast rigging because of barnacle whale sail blubber." "Alley and helm with jolly hornpipe deck, whale locker." Barrel eyepatch brigantine. Yardarm aurora of the topgallant cannon with bilge seaworthy?
+                    "Barnacle salt, starboard helm avast." Deck land brine easterly figurehead. Southerly bucko, gangplank bucko crow’s nest locker. Lover maybe sea spyglass salt? "Shipmate cannon, avast." Windward and the landlubber, treasure galley because of easterly the ol’ ale bilge.
+                    Sail because of crow’s nest barrel parrot. Northerly heave or port –  oar. Ahoy or ocean cannon!</p>
+                <p>Seafaring quartermaster cannon aurora. Seafaring heave with compass without quartermaster quartermaster. "Mast rigging because of barnacle whale sail blubber." "Alley and helm with jolly hornpipe deck, whale locker." Barrel eyepatch brigantine. Yardarm aurora of the topgallant cannon with bilge seaworthy?
+                    "Barnacle salt, starboard helm avast." Deck land brine easterly figurehead. Southerly bucko, gangplank bucko crow’s nest locker. Lover maybe sea spyglass salt? "Shipmate cannon, avast." Windward and the landlubber, treasure galley because of easterly the ol’ ale bilge.
+                    Sail because of crow’s nest barrel parrot. Northerly heave or port –  oar. Ahoy or ocean cannon!</p>
+                <p>Seafaring quartermaster cannon aurora. Seafaring heave with compass without quartermaster quartermaster. "Mast rigging because of barnacle whale sail blubber." "Alley and helm with jolly hornpipe deck, whale locker." Barrel eyepatch brigantine. Yardarm aurora of the topgallant cannon with bilge seaworthy?
+                    "Barnacle salt, starboard helm avast." Deck land brine easterly figurehead. Southerly bucko, gangplank bucko crow’s nest locker. Lover maybe sea spyglass salt? "Shipmate cannon, avast." Windward and the landlubber, treasure galley because of easterly the ol’ ale bilge.
+                    Sail because of crow’s nest barrel parrot. Northerly heave or port –  oar. Ahoy or ocean cannon!</p>
+            </div>
         </div>
-        <div class="subsection" data-xmb-target="secondary" data-xmb-secondary-backgrounded>
+        <div class="subsection" data-xmb-target="secondary">
             <h2>Site Navigation</h2>
             <p>Navigate this site using the arrow keys.</p>
         </div>
diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index e8e1c89..ea43551 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -59,21 +59,15 @@ export default class extends Controller {
     #zPositive() {
         this.#secondaryTargets();
         const active = this.#activeSecondaryTarget();
-        const backgrounded = this.#backgroundedSecondaryTarget();
         active.previousElementSibling.setAttribute('data-xmb-secondary-active', '');
         active.removeAttribute('data-xmb-secondary-active');
-        active.setAttribute('data-xmb-secondary-backgrounded', '');
-        backgrounded.removeAttribute('data-xmb-secondary-backgrounded');
     }
 
 
     #zNegative() {
+        const active = this.#activeSecondaryTarget();
+        active.nextElementSibling.setAttribute('data-xmb-secondary-active', '');
         this.#activeSecondaryTarget().removeAttribute('data-xmb-secondary-active');
-        const backgrounded = this.#backgroundedSecondaryTarget();
-        const nextTarget = backgrounded.nextElementSibling;
-        backgrounded.removeAttribute('data-xmb-secondary-backgrounded');
-        backgrounded.setAttribute('data-xmb-secondary-active', '');
-        nextTarget.setAttribute('data-xmb-secondary-backgrounded', '');
     }
 
     #currentTranslation() {
@@ -101,8 +95,4 @@ export default class extends Controller {
     #activeSecondaryTarget() {
         return this.#secondaryTargets().find(st => st.hasAttribute(this.secondaryTargetDataAttribute));
     }
-
-    #backgroundedSecondaryTarget() {
-        return this.#secondaryTargets().find(st => st.hasAttribute(this.secondaryBackgroundedTargetDataAttribute));
-    }
 }
diff --git a/styles/xmb.css b/styles/xmb.css
index e01d7a0..0ee4845 100644
--- a/styles/xmb.css
+++ b/styles/xmb.css
@@ -21,28 +21,64 @@ section[data-xmb-primary-active] {
   }
 }
 
-.subsection {
-  display: none;
-  position: absolute;
-  width: 40em;
-  transition: transform 1s cubic-bezier(0.00,1.00,0.00,1.00), filter 500ms ease-out, opacity 500ms ease-out;
-}
+[data-xmb-primary-active] {
+  .subsection {
+    --z-animation-speed: 1s;
 
-.subsection[data-xmb-secondary-backgrounded] {
-  transition: transform 1000ms cubic-bezier(0.01,1.00,0.99,0.99), filter 500ms ease, opacity 500ms ease-out;
-}
+    opacity: 1;
+    position: absolute;
+    width: 40em;
+    transition: transform var(--z-animation-speed) ease,
+    filter 500ms ease-out,
+    opacity 500ms ease-out;
+    transition-behavior: allow-discrete;
 
-.subsection[data-xmb-secondary-active], .subsection[data-xmb-secondary-backgrounded] {
-  display: block;
-  transform: perspective(100px);
-}
+    @starting-style {
+      display: block;
+    }
+  }
 
-.subsection[data-xmb-secondary-backgrounded] {
-  transform: perspective(100px) translate3D(100px, -200px, -200px);
-  opacity: 0.4;
-  filter: blur(10px);
-}
+  .subsection[data-xmb-secondary-active] {
+    display: block;
+    opacity: 1;
+    transform: perspective(100px) translate3D(0,0,0);
+    transition: transform var(--z-animation-speed) ease,
+    opacity var(--z-animation-speed) ease,
+    display var(--z-animation-speed) ease;
+    transition-behavior: allow-discrete;
 
-.stack {
-  transform: perspective(100px) translateZ(0);
+    @starting-style {
+      display: block !important;
+    }
+  }
+
+  .subsection[data-xmb-secondary-active] ~ .subsection {
+    display: block;
+    transform: perspective(100px) translate3D(100px, -200px, -200px);
+    transition: transform var(--z-animation-speed) cubic-bezier(0,1,1,1),
+    filter 500ms ease,
+    opacity 500ms ease-out,
+    display var(--z-animation-speed) ease;
+    transition-behavior: allow-discrete;
+    opacity: 0.4;
+    filter: blur(10px);
+
+    @starting-style {
+      display: block !important;
+    }
+  }
+
+  /* Select the subsection in the z-stack that is "behind" the user's screen. */
+  .subsection:has(~ .subsection[data-xmb-secondary-active]) {
+    pointer-events: none;
+    opacity: 0;
+    transform: perspective(100px) translate3D(-400px, 300px, 0px);
+    transition: transform var(--z-animation-speed) ease, opacity var(--z-animation-speed) ease, display var(--z-animation-speed) ease;
+    transition-behavior: allow-discrete;
+
+    @starting-style {
+      display: block !important;
+      opacity: 1;
+    }
+  }
 }

From 243670166a7eced659e234bf9735e9058120131c Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Sat, 18 Oct 2025 22:40:29 +1300
Subject: [PATCH 05/32] chore: z-axis bug fixes and target naming
 simplifications

---
 index.html                            | 50 ++++++++++-----------
 scripts/controllers/xmb_controller.js | 63 +++++++++++++--------------
 styles/xmb.css                        | 63 +++++++++++++++++----------
 3 files changed, 95 insertions(+), 81 deletions(-)

diff --git a/index.html b/index.html
index ecfd8ec..49038c5 100644
--- a/index.html
+++ b/index.html
@@ -101,9 +101,9 @@
 </svg>
 
 <main data-controller="xmb" data-action="keydown@window->xmb#handleKeydown">
-    <section data-xmb-target="primary" data-xmb-primary-active>
+    <section data-xmb-target="x" data-xmb-x-active>
         <h1>Hello!</h1>
-        <div class="subsection" data-xmb-target="secondary" data-xmb-secondary-active>
+        <div class="subsection" data-xmb-target="z" data-xmb-z-active>
             <h2>Intro</h2>
             <div class="container">
                 <p>This site uses an intersectional interface reminiscent of the XrossMediaBar (XMB) on the PlayStation Portable and PS3.</p>
@@ -119,65 +119,65 @@ <h2>Intro</h2>
                     Sail because of crow’s nest barrel parrot. Northerly heave or port –  oar. Ahoy or ocean cannon!</p>
             </div>
         </div>
-        <div class="subsection" data-xmb-target="secondary">
+        <div class="subsection" data-xmb-target="z">
             <h2>Site Navigation</h2>
             <p>Navigate this site using the arrow keys.</p>
         </div>
-        <div class="subsection" data-xmb-target="secondary">
+        <div class="subsection" data-xmb-target="z">
             <h2>Final</h2>
             <p>Foo bar</p>
         </div>
     </section>
 
-    <section data-xmb-target="primary">
-        <h1 class="header--inactive">Posts</h1>
-        <div class="subsection">
+    <section data-xmb-target="x">
+        <h1>Posts</h1>
+        <div class="subsection" data-xmb-target="z" data-xmb-z-active>
             <h2>Recent Post A</h2>
         </div>
-        <div class="subsection">
+        <div class="subsection" data-xmb-target="z">
             <h2>Recent Post B</h2>
         </div>
-        <div class="subsection">
+        <div class="subsection" data-xmb-target="z">
             <h2>Recent Post C</h2>
         </div>
     </section>
 
-    <section data-xmb-target="primary">
-        <h1 class="header--inactive">Hobbies</h1>
-        <div class="subsection">
+    <section data-xmb-target="x">
+        <h1>Hobbies</h1>
+        <div class="subsection" data-xmb-target="z" data-xmb-z-active>
             <h2>Foo</h2>
         </div>
-        <div class="subsection">
+        <div class="subsection" data-xmb-target="z">
             <h2>Bar</h2>
         </div>
     </section>
 
-    <section data-xmb-target="primary">
-        <h1 class="header--inactive">Projects</h1>
-        <div class="subsection">
+    <section data-xmb-target="x">
+        <h1>Projects</h1>
+        <div class="subsection" data-xmb-target="z" data-xmb-z-active>
             <h2>Foo</h2>
         </div>
-        <div class="subsection">
+        <div class="subsection" data-xmb-target="z">
             <h2>Bar</h2>
         </div>
     </section>
 
-    <section data-xmb-target="primary">
-        <h1 class="header--inactive">Work</h1>
-        <div class="subsection">
+    <section data-xmb-target="x">
+        <h1>Work</h1>
+        <div class="subsection" data-xmb-target="z" data-xmb-z-active>
             <h2>Current</h2>
         </div>
-        <div class="subsection">
+        <div class="subsection" data-xmb-target="z">
             <h2>Contact</h2>
         </div>
     </section>
 
-    <section data-xmb-target="primary">
-        <h1 class="header--inactive">About</h1>
-        <div class="subsection">
+    <section data-xmb-target="x">
+        <h1>About</h1>
+        <div class="subsection" data-xmb-target="z" data-xmb-z-active>
             <h2>Principles</h2>
         </div>
-        <div class="subsection">
+        <div class="subsection" data-xmb-target="z">
             <h2>Preferences</h2>
         </div>
     </section>
diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index ea43551..5a2e408 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -1,22 +1,21 @@
 import {Controller} from "@hotwired/stimulus";
 
 export default class extends Controller {
-    static targets = ['primary', 'secondary'];
+    static targets = ['x', 'z'];
 
-    primaryTargetDataAttribute = 'data-xmb-primary-active';
-    secondaryTargetDataAttribute = 'data-xmb-secondary-active';
-    secondaryBackgroundedTargetDataAttribute = 'data-xmb-secondary-backgrounded';
+    xAxisTargetDataAttr = 'data-xmb-x-active';
+    zAxisTargetDataAttr = 'data-xmb-z-active';
 
-    get previousPrimaryTarget() {
-        return this.activePrimaryTarget.previousElementSibling;
+    get previousXTarget() {
+        return this.activeXTarget.previousElementSibling;
     }
 
-    get nextPrimaryTarget() {
-        return this.activePrimaryTarget.nextElementSibling;
+    get nextXTarget() {
+        return this.activeXTarget.nextElementSibling;
     }
 
-    get activePrimaryTarget() {
-        return this.primaryTargets.find(pt => pt.hasAttribute(this.primaryTargetDataAttribute));
+    get activeXTarget() {
+        return this.xTargets.find(xt => xt.hasAttribute(this.xAxisTargetDataAttr));
     }
 
     handleKeydown(event) {
@@ -37,37 +36,37 @@ export default class extends Controller {
     }
 
     #xPositive() {
-        const nextTarget = this.nextPrimaryTarget;
-        if (!nextTarget) {
+        const next = this.nextXTarget;
+        if (!next) {
             return;
         }
 
-        this.#setNewPrimaryTarget(nextTarget);
-        this.#setTranslation('x', -this.previousPrimaryTarget.getBoundingClientRect().width);
+        this.#setNewXTarget(next);
+        this.#setTranslation('x', -this.previousXTarget.getBoundingClientRect().width);
     }
 
     #xNegative() {
-        const prevTarget = this.previousPrimaryTarget;
-        if (!prevTarget) {
+        const prev = this.previousXTarget;
+        if (!prev) {
             return;
         }
 
-        this.#setTranslation('x', this.previousPrimaryTarget.getBoundingClientRect().width);
-        this.#setNewPrimaryTarget(prevTarget);
+        this.#setTranslation('x', this.previousXTarget.getBoundingClientRect().width);
+        this.#setNewXTarget(prev);
     }
 
     #zPositive() {
-        this.#secondaryTargets();
-        const active = this.#activeSecondaryTarget();
-        active.previousElementSibling.setAttribute('data-xmb-secondary-active', '');
-        active.removeAttribute('data-xmb-secondary-active');
+        this.#zTargets();
+        const active = this.#activeZTarget();
+        active.previousElementSibling.setAttribute(this.zAxisTargetDataAttr, '');
+        active.removeAttribute(this.zAxisTargetDataAttr);
     }
 
 
     #zNegative() {
-        const active = this.#activeSecondaryTarget();
-        active.nextElementSibling.setAttribute('data-xmb-secondary-active', '');
-        this.#activeSecondaryTarget().removeAttribute('data-xmb-secondary-active');
+        const active = this.#activeZTarget();
+        active.nextElementSibling.setAttribute(this.zAxisTargetDataAttr, '');
+        this.#activeZTarget().removeAttribute(this.zAxisTargetDataAttr);
     }
 
     #currentTranslation() {
@@ -83,16 +82,16 @@ export default class extends Controller {
         this.element.style.setProperty(`--${axis}-translation`, `${newValue}px`);
     }
 
-    #setNewPrimaryTarget(newTarget) {
-        this.activePrimaryTarget.removeAttribute(this.primaryTargetDataAttribute);
-        newTarget.setAttribute(this.primaryTargetDataAttribute, '');
+    #setNewXTarget(newTarget) {
+        this.activeXTarget.removeAttribute(this.xAxisTargetDataAttr);
+        newTarget.setAttribute(this.xAxisTargetDataAttr, '');
     }
 
-    #secondaryTargets() {
-        return this.secondaryTargets.filter(st => st.parentElement === this.activePrimaryTarget);
+    #zTargets() {
+        return this.zTargets.filter(zt => zt.parentElement === this.activeXTarget);
     }
 
-    #activeSecondaryTarget() {
-        return this.#secondaryTargets().find(st => st.hasAttribute(this.secondaryTargetDataAttribute));
+    #activeZTarget() {
+        return this.#zTargets().find(zt => zt.hasAttribute(this.zAxisTargetDataAttr));
     }
 }
diff --git a/styles/xmb.css b/styles/xmb.css
index 0ee4845..ed8717b 100644
--- a/styles/xmb.css
+++ b/styles/xmb.css
@@ -1,9 +1,12 @@
 main {
+  --x-duration: 200ms;
+  --z-duration: 500ms;
   --x-translation: 0;
   --z-translation: 0;
+
   display: flex;
   margin-block-start: 10em;
-  transition: transform 100ms ease;
+  transition: transform var(--x-duration) ease;
   transform: translateX(var(--x-translation));
 }
 
@@ -14,21 +17,27 @@ section {
   }
 }
 
-section[data-xmb-primary-active] {
+section[data-xmb-x-active] {
   h1, h2, h3, h4, h5, h6 {
     font-weight: 700;
     opacity: 1;
   }
 }
 
-[data-xmb-primary-active] {
-  .subsection {
-    --z-animation-speed: 1s;
+/* Why not simply apply `display: none;` to `.subsection`? This breaks the starting style for the transitions, causing
+ transitions from hidden to visible to not animate properly. */
+section:not([data-xmb-x-active]) .subsection {
+  display: none;
+}
 
+[data-xmb-x-active] {
+  .subsection {
+    transform-origin: 0 0;
+    pointer-events: none;
     opacity: 1;
     position: absolute;
     width: 40em;
-    transition: transform var(--z-animation-speed) ease,
+    transition: transform var(--z-duration) ease,
     filter 500ms ease-out,
     opacity 500ms ease-out;
     transition-behavior: allow-discrete;
@@ -38,47 +47,53 @@ section[data-xmb-primary-active] {
     }
   }
 
-  .subsection[data-xmb-secondary-active] {
+  .subsection[data-xmb-z-active] {
+    pointer-events: auto;
     display: block;
     opacity: 1;
     transform: perspective(100px) translate3D(0,0,0);
-    transition: transform var(--z-animation-speed) ease,
-    opacity var(--z-animation-speed) ease,
-    display var(--z-animation-speed) ease;
+    transition: transform var(--z-duration) ease,
+    opacity var(--z-duration) ease,
+    display var(--z-duration) ease;
     transition-behavior: allow-discrete;
 
     @starting-style {
-      display: block !important;
+      display: block;
     }
   }
 
-  .subsection[data-xmb-secondary-active] ~ .subsection {
+  /* All subsections that are not the immediate one beneath the active subsection should be hidden. The immediate next
+   subsection is handled using the `+` selector below. */
+  .subsection[data-xmb-z-active] ~ .subsection {
+    display: none;
+  }
+
+  .subsection[data-xmb-z-active] + .subsection {
     display: block;
-    transform: perspective(100px) translate3D(100px, -200px, -200px);
-    transition: transform var(--z-animation-speed) cubic-bezier(0,1,1,1),
+    transform: perspective(100px) translate3D(200px, -25px, -50px);
+    transition: transform var(--z-duration) cubic-bezier(0,1,1,1),
     filter 500ms ease,
     opacity 500ms ease-out,
-    display var(--z-animation-speed) ease;
+    display var(--z-duration) ease;
     transition-behavior: allow-discrete;
-    opacity: 0.4;
-    filter: blur(10px);
+    opacity: 0.2;
+    filter: blur(5px);
 
     @starting-style {
-      display: block !important;
+      display: block;
     }
   }
 
   /* Select the subsection in the z-stack that is "behind" the user's screen. */
-  .subsection:has(~ .subsection[data-xmb-secondary-active]) {
-    pointer-events: none;
+  .subsection:has(~ .subsection[data-xmb-z-active]) {
     opacity: 0;
-    transform: perspective(100px) translate3D(-400px, 300px, 0px);
-    transition: transform var(--z-animation-speed) ease, opacity var(--z-animation-speed) ease, display var(--z-animation-speed) ease;
+    transform: perspective(100px) translate3D(-200px, 25px, 50px);
+    transition: transform var(--z-duration) ease, opacity var(--z-duration) ease, display var(--z-duration) ease;
     transition-behavior: allow-discrete;
 
     @starting-style {
-      display: block !important;
-      opacity: 1;
+      display: block;
+
     }
   }
 }

From d62401e035d79630a63873871eda5c7cd88a434b Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Sun, 19 Oct 2025 14:15:37 +1300
Subject: [PATCH 06/32] feat: bounce off edges for x axis navigation

---
 index.html                            | 16 ++++--
 scripts/controllers/xmb_controller.js | 75 +++++++++++++++++++++------
 styles/xmb.css                        | 41 ++++++++-------
 3 files changed, 94 insertions(+), 38 deletions(-)

diff --git a/index.html b/index.html
index 49038c5..9e6f895 100644
--- a/index.html
+++ b/index.html
@@ -100,11 +100,11 @@
     </defs>
 </svg>
 
-<main data-controller="xmb" data-action="keydown@window->xmb#handleKeydown">
+<main data-controller="xmb" data-action="keydown@window->xmb#handleKeydown animationend->xmb#edgeBounceComplete">
     <section data-xmb-target="x" data-xmb-x-active>
         <h1>Hello!</h1>
         <div class="subsection" data-xmb-target="z" data-xmb-z-active>
-            <h2>Intro</h2>
+            <h2>👋</h2>
             <div class="container">
                 <p>This site uses an intersectional interface reminiscent of the XrossMediaBar (XMB) on the PlayStation Portable and PS3.</p>
                 <p>Navigate this site using your keyboard arrows, click the on-screen arrows with your mouse, or scroll to move through the Z-axis of the currently selected header.</p>
@@ -121,7 +121,17 @@ <h2>Intro</h2>
         </div>
         <div class="subsection" data-xmb-target="z">
             <h2>Site Navigation</h2>
-            <p>Navigate this site using the arrow keys.</p>
+            <p>This site uses an intersectional interface reminiscent of the XrossMediaBar (XMB) on the PlayStation Portable and PS3.</p>
+            <p>Navigate this site using your keyboard arrows, click the on-screen arrows with your mouse, or scroll to move through the Z-axis of the currently selected header.</p>
+            <p>Seafaring quartermaster cannon aurora. Seafaring heave with compass without quartermaster quartermaster. "Mast rigging because of barnacle whale sail blubber." "Alley and helm with jolly hornpipe deck, whale locker." Barrel eyepatch brigantine. Yardarm aurora of the topgallant cannon with bilge seaworthy?
+                "Barnacle salt, starboard helm avast." Deck land brine easterly figurehead. Southerly bucko, gangplank bucko crow’s nest locker. Lover maybe sea spyglass salt? "Shipmate cannon, avast." Windward and the landlubber, treasure galley because of easterly the ol’ ale bilge.
+                Sail because of crow’s nest barrel parrot. Northerly heave or port –  oar. Ahoy or ocean cannon!</p>
+            <p>Seafaring quartermaster cannon aurora. Seafaring heave with compass without quartermaster quartermaster. "Mast rigging because of barnacle whale sail blubber." "Alley and helm with jolly hornpipe deck, whale locker." Barrel eyepatch brigantine. Yardarm aurora of the topgallant cannon with bilge seaworthy?
+                "Barnacle salt, starboard helm avast." Deck land brine easterly figurehead. Southerly bucko, gangplank bucko crow’s nest locker. Lover maybe sea spyglass salt? "Shipmate cannon, avast." Windward and the landlubber, treasure galley because of easterly the ol’ ale bilge.
+                Sail because of crow’s nest barrel parrot. Northerly heave or port –  oar. Ahoy or ocean cannon!</p>
+            <p>Seafaring quartermaster cannon aurora. Seafaring heave with compass without quartermaster quartermaster. "Mast rigging because of barnacle whale sail blubber." "Alley and helm with jolly hornpipe deck, whale locker." Barrel eyepatch brigantine. Yardarm aurora of the topgallant cannon with bilge seaworthy?
+                "Barnacle salt, starboard helm avast." Deck land brine easterly figurehead. Southerly bucko, gangplank bucko crow’s nest locker. Lover maybe sea spyglass salt? "Shipmate cannon, avast." Windward and the landlubber, treasure galley because of easterly the ol’ ale bilge.
+                Sail because of crow’s nest barrel parrot. Northerly heave or port –  oar. Ahoy or ocean cannon!</p>
         </div>
         <div class="subsection" data-xmb-target="z">
             <h2>Final</h2>
diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index 5a2e408..7756843 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -35,38 +35,70 @@ export default class extends Controller {
         }
     }
 
+    edgeBounceComplete(event) {
+        this.element.classList.remove('edge-bounce');
+    }
+
+    /**
+     * Navigates rightwards using the right arrow key.
+     */
     #xPositive() {
         const next = this.nextXTarget;
-        if (!next) {
-            return;
-        }
 
-        this.#setNewXTarget(next);
-        this.#setTranslation('x', -this.previousXTarget.getBoundingClientRect().width);
+        if (next) {
+            this.#setNewXTarget(next);
+            this.#setTranslation('x', -this.previousXTarget.getBoundingClientRect().width);
+        } else {
+            this.element.style.setProperty(`--x-edge-bounce`, `-100px`);
+            if (this.element.classList.contains('edge-bounce')) {
+                this.element.classList.remove('edge-bounce');
+                void this.element.offsetWidth;
+            }
+            this.element.classList.add('edge-bounce');
+        }
     }
 
+    /**
+     * Navigates leftwards using the left arrow key.
+     */
     #xNegative() {
         const prev = this.previousXTarget;
-        if (!prev) {
-            return;
-        }
 
-        this.#setTranslation('x', this.previousXTarget.getBoundingClientRect().width);
-        this.#setNewXTarget(prev);
+        if (prev) {
+            this.#setTranslation('x', this.previousXTarget.getBoundingClientRect().width);
+            this.#setNewXTarget(prev);
+        } else {
+            this.element.style.setProperty(`--x-edge-bounce`, `100px`);
+            if (this.element.classList.contains('edge-bounce')) {
+                this.element.classList.remove('edge-bounce');
+                void this.element.offsetWidth;
+            }
+            this.element.classList.add('edge-bounce');
+        }
     }
 
+    /**
+     * Navigates backwards to the target behind the user's camera using the up arrow key.
+     */
     #zPositive() {
-        this.#zTargets();
         const active = this.#activeZTarget();
-        active.previousElementSibling.setAttribute(this.zAxisTargetDataAttr, '');
-        active.removeAttribute(this.zAxisTargetDataAttr);
-    }
 
+        if (active.previousElementSibling?.hasAttribute('data-xmb-target')) {
+            active.previousElementSibling.setAttribute(this.zAxisTargetDataAttr, '');
+            active.removeAttribute(this.zAxisTargetDataAttr);
+        }
+    }
 
+    /**
+     * Navigates forwards to the next target in front of the user's camera using the down arrow key.
+     */
     #zNegative() {
         const active = this.#activeZTarget();
-        active.nextElementSibling.setAttribute(this.zAxisTargetDataAttr, '');
-        this.#activeZTarget().removeAttribute(this.zAxisTargetDataAttr);
+
+        if (active.nextElementSibling) {
+            active.nextElementSibling.setAttribute(this.zAxisTargetDataAttr, '');
+            this.#activeZTarget().removeAttribute(this.zAxisTargetDataAttr);
+        }
     }
 
     #currentTranslation() {
@@ -87,10 +119,21 @@ export default class extends Controller {
         newTarget.setAttribute(this.xAxisTargetDataAttr, '');
     }
 
+    /**
+     * Retrieve all `z` targets for the currently active `x` target.
+     *
+     * @returns {HTMLElement[]}
+     */
     #zTargets() {
         return this.zTargets.filter(zt => zt.parentElement === this.activeXTarget);
     }
 
+    /**
+     * Retrieves the currently active `z` target for the currently active `x` target. One element is always active,
+     * so this should never return `undefined`.
+     *
+     * @returns {HTMLElement}
+     */
     #activeZTarget() {
         return this.#zTargets().find(zt => zt.hasAttribute(this.zAxisTargetDataAttr));
     }
diff --git a/styles/xmb.css b/styles/xmb.css
index ed8717b..fa2ee23 100644
--- a/styles/xmb.css
+++ b/styles/xmb.css
@@ -1,13 +1,29 @@
+@keyframes edge-bounce {
+  to, from {
+    transform: translateX(var(--x-translation));
+  }
+  50% {
+    transform: translateX(calc(var(--x-translation) + var(--x-edge-bounce)));
+  }
+}
+
 main {
   --x-duration: 200ms;
   --z-duration: 500ms;
-  --x-translation: 0;
-  --z-translation: 0;
+  --x-translation: 0px;
+  --z-translation: 0px;
+  --z-perspective: 100px;
+  --x-edge-bounce: 100px;
 
   display: flex;
   margin-block-start: 10em;
   transition: transform var(--x-duration) ease;
   transform: translateX(var(--x-translation));
+  animation-play-state: paused;
+}
+
+main.edge-bounce {
+  animation: 200ms edge-bounce ease-in-out forwards;
 }
 
 section {
@@ -25,7 +41,7 @@ section[data-xmb-x-active] {
 }
 
 /* Why not simply apply `display: none;` to `.subsection`? This breaks the starting style for the transitions, causing
- transitions from hidden to visible to not animate properly. */
+ transitions from hidden to visible to not animate properly. This could be improved by using a cascade layer. */
 section:not([data-xmb-x-active]) .subsection {
   display: none;
 }
@@ -41,25 +57,17 @@ section:not([data-xmb-x-active]) .subsection {
     filter 500ms ease-out,
     opacity 500ms ease-out;
     transition-behavior: allow-discrete;
-
-    @starting-style {
-      display: block;
-    }
   }
 
   .subsection[data-xmb-z-active] {
     pointer-events: auto;
     display: block;
     opacity: 1;
-    transform: perspective(100px) translate3D(0,0,0);
+    transform: perspective(var(--z-perspective)) translate3D(0,0,0);
     transition: transform var(--z-duration) ease,
     opacity var(--z-duration) ease,
     display var(--z-duration) ease;
     transition-behavior: allow-discrete;
-
-    @starting-style {
-      display: block;
-    }
   }
 
   /* All subsections that are not the immediate one beneath the active subsection should be hidden. The immediate next
@@ -70,7 +78,7 @@ section:not([data-xmb-x-active]) .subsection {
 
   .subsection[data-xmb-z-active] + .subsection {
     display: block;
-    transform: perspective(100px) translate3D(200px, -25px, -50px);
+    transform: perspective(var(--z-perspective)) translate3D(200px, -25px, -50px);
     transition: transform var(--z-duration) cubic-bezier(0,1,1,1),
     filter 500ms ease,
     opacity 500ms ease-out,
@@ -78,22 +86,17 @@ section:not([data-xmb-x-active]) .subsection {
     transition-behavior: allow-discrete;
     opacity: 0.2;
     filter: blur(5px);
-
-    @starting-style {
-      display: block;
-    }
   }
 
   /* Select the subsection in the z-stack that is "behind" the user's screen. */
   .subsection:has(~ .subsection[data-xmb-z-active]) {
     opacity: 0;
-    transform: perspective(100px) translate3D(-200px, 25px, 50px);
+    transform: perspective(var(--z-perspective)) translate3D(-200px, 25px, 50px);
     transition: transform var(--z-duration) ease, opacity var(--z-duration) ease, display var(--z-duration) ease;
     transition-behavior: allow-discrete;
 
     @starting-style {
       display: block;
-
     }
   }
 }

From c2b9c2f0f3cd001565ebc3f2d192c8dabe60ef60 Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Mon, 20 Oct 2025 21:32:20 +1300
Subject: [PATCH 07/32] refactor: consistent class and css custom property
 naming

---
 index.html                            | 126 ++++++++++++++------------
 scripts/controllers/xmb_controller.js |  51 ++++++++---
 styles/xmb.css                        |  93 +++++++++++++------
 3 files changed, 170 insertions(+), 100 deletions(-)

diff --git a/index.html b/index.html
index 9e6f895..312a5d1 100644
--- a/index.html
+++ b/index.html
@@ -100,12 +100,28 @@
     </defs>
 </svg>
 
-<main data-controller="xmb" data-action="keydown@window->xmb#handleKeydown animationend->xmb#edgeBounceComplete">
-    <section data-xmb-target="x" data-xmb-x-active>
+<main class="xmb" data-controller="xmb" data-action="keydown@window->xmb#handleKeydown animationend->xmb#bounceComplete">
+    <section class="xmb__x-item" data-xmb-target="x" data-xmb-x-active>
         <h1>Hello!</h1>
-        <div class="subsection" data-xmb-target="z" data-xmb-z-active>
-            <h2>👋</h2>
-            <div class="container">
+        <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
+            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active>
+                <h2>👋</h2>
+                <div class="xmb__z-item-container">
+                    <p>This site uses an intersectional interface reminiscent of the XrossMediaBar (XMB) on the PlayStation Portable and PS3.</p>
+                    <p>Navigate this site using your keyboard arrows, click the on-screen arrows with your mouse, or scroll to move through the Z-axis of the currently selected header.</p>
+                    <p>Seafaring quartermaster cannon aurora. Seafaring heave with compass without quartermaster quartermaster. "Mast rigging because of barnacle whale sail blubber." "Alley and helm with jolly hornpipe deck, whale locker." Barrel eyepatch brigantine. Yardarm aurora of the topgallant cannon with bilge seaworthy?
+                        "Barnacle salt, starboard helm avast." Deck land brine easterly figurehead. Southerly bucko, gangplank bucko crow’s nest locker. Lover maybe sea spyglass salt? "Shipmate cannon, avast." Windward and the landlubber, treasure galley because of easterly the ol’ ale bilge.
+                        Sail because of crow’s nest barrel parrot. Northerly heave or port –  oar. Ahoy or ocean cannon!</p>
+                    <p>Seafaring quartermaster cannon aurora. Seafaring heave with compass without quartermaster quartermaster. "Mast rigging because of barnacle whale sail blubber." "Alley and helm with jolly hornpipe deck, whale locker." Barrel eyepatch brigantine. Yardarm aurora of the topgallant cannon with bilge seaworthy?
+                        "Barnacle salt, starboard helm avast." Deck land brine easterly figurehead. Southerly bucko, gangplank bucko crow’s nest locker. Lover maybe sea spyglass salt? "Shipmate cannon, avast." Windward and the landlubber, treasure galley because of easterly the ol’ ale bilge.
+                        Sail because of crow’s nest barrel parrot. Northerly heave or port –  oar. Ahoy or ocean cannon!</p>
+                    <p>Seafaring quartermaster cannon aurora. Seafaring heave with compass without quartermaster quartermaster. "Mast rigging because of barnacle whale sail blubber." "Alley and helm with jolly hornpipe deck, whale locker." Barrel eyepatch brigantine. Yardarm aurora of the topgallant cannon with bilge seaworthy?
+                        "Barnacle salt, starboard helm avast." Deck land brine easterly figurehead. Southerly bucko, gangplank bucko crow’s nest locker. Lover maybe sea spyglass salt? "Shipmate cannon, avast." Windward and the landlubber, treasure galley because of easterly the ol’ ale bilge.
+                        Sail because of crow’s nest barrel parrot. Northerly heave or port –  oar. Ahoy or ocean cannon!</p>
+                </div>
+            </section>
+            <section class="xmb__z-item" data-xmb-target="z">
+                <h2>Site Navigation</h2>
                 <p>This site uses an intersectional interface reminiscent of the XrossMediaBar (XMB) on the PlayStation Portable and PS3.</p>
                 <p>Navigate this site using your keyboard arrows, click the on-screen arrows with your mouse, or scroll to move through the Z-axis of the currently selected header.</p>
                 <p>Seafaring quartermaster cannon aurora. Seafaring heave with compass without quartermaster quartermaster. "Mast rigging because of barnacle whale sail blubber." "Alley and helm with jolly hornpipe deck, whale locker." Barrel eyepatch brigantine. Yardarm aurora of the topgallant cannon with bilge seaworthy?
@@ -117,78 +133,74 @@ <h2>👋</h2>
                 <p>Seafaring quartermaster cannon aurora. Seafaring heave with compass without quartermaster quartermaster. "Mast rigging because of barnacle whale sail blubber." "Alley and helm with jolly hornpipe deck, whale locker." Barrel eyepatch brigantine. Yardarm aurora of the topgallant cannon with bilge seaworthy?
                     "Barnacle salt, starboard helm avast." Deck land brine easterly figurehead. Southerly bucko, gangplank bucko crow’s nest locker. Lover maybe sea spyglass salt? "Shipmate cannon, avast." Windward and the landlubber, treasure galley because of easterly the ol’ ale bilge.
                     Sail because of crow’s nest barrel parrot. Northerly heave or port –  oar. Ahoy or ocean cannon!</p>
-            </div>
-        </div>
-        <div class="subsection" data-xmb-target="z">
-            <h2>Site Navigation</h2>
-            <p>This site uses an intersectional interface reminiscent of the XrossMediaBar (XMB) on the PlayStation Portable and PS3.</p>
-            <p>Navigate this site using your keyboard arrows, click the on-screen arrows with your mouse, or scroll to move through the Z-axis of the currently selected header.</p>
-            <p>Seafaring quartermaster cannon aurora. Seafaring heave with compass without quartermaster quartermaster. "Mast rigging because of barnacle whale sail blubber." "Alley and helm with jolly hornpipe deck, whale locker." Barrel eyepatch brigantine. Yardarm aurora of the topgallant cannon with bilge seaworthy?
-                "Barnacle salt, starboard helm avast." Deck land brine easterly figurehead. Southerly bucko, gangplank bucko crow’s nest locker. Lover maybe sea spyglass salt? "Shipmate cannon, avast." Windward and the landlubber, treasure galley because of easterly the ol’ ale bilge.
-                Sail because of crow’s nest barrel parrot. Northerly heave or port –  oar. Ahoy or ocean cannon!</p>
-            <p>Seafaring quartermaster cannon aurora. Seafaring heave with compass without quartermaster quartermaster. "Mast rigging because of barnacle whale sail blubber." "Alley and helm with jolly hornpipe deck, whale locker." Barrel eyepatch brigantine. Yardarm aurora of the topgallant cannon with bilge seaworthy?
-                "Barnacle salt, starboard helm avast." Deck land brine easterly figurehead. Southerly bucko, gangplank bucko crow’s nest locker. Lover maybe sea spyglass salt? "Shipmate cannon, avast." Windward and the landlubber, treasure galley because of easterly the ol’ ale bilge.
-                Sail because of crow’s nest barrel parrot. Northerly heave or port –  oar. Ahoy or ocean cannon!</p>
-            <p>Seafaring quartermaster cannon aurora. Seafaring heave with compass without quartermaster quartermaster. "Mast rigging because of barnacle whale sail blubber." "Alley and helm with jolly hornpipe deck, whale locker." Barrel eyepatch brigantine. Yardarm aurora of the topgallant cannon with bilge seaworthy?
-                "Barnacle salt, starboard helm avast." Deck land brine easterly figurehead. Southerly bucko, gangplank bucko crow’s nest locker. Lover maybe sea spyglass salt? "Shipmate cannon, avast." Windward and the landlubber, treasure galley because of easterly the ol’ ale bilge.
-                Sail because of crow’s nest barrel parrot. Northerly heave or port –  oar. Ahoy or ocean cannon!</p>
-        </div>
-        <div class="subsection" data-xmb-target="z">
-            <h2>Final</h2>
-            <p>Foo bar</p>
+            </section>
+            <section class="xmb__z-item" data-xmb-target="z">
+                <h2>Final</h2>
+                <p>Foo bar</p>
+            </section>
         </div>
     </section>
 
-    <section data-xmb-target="x">
+    <section class="xmb__x-item" data-xmb-target="x">
         <h1>Posts</h1>
-        <div class="subsection" data-xmb-target="z" data-xmb-z-active>
-            <h2>Recent Post A</h2>
-        </div>
-        <div class="subsection" data-xmb-target="z">
-            <h2>Recent Post B</h2>
-        </div>
-        <div class="subsection" data-xmb-target="z">
-            <h2>Recent Post C</h2>
+        <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
+            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active>
+                <h2>Recent Post A</h2>
+            </section>
+            <section class="xmb__z-item" data-xmb-target="z">
+                <h2>Recent Post B</h2>
+            </section>
+            <section class="xmb__z-item" data-xmb-target="z">
+                <h2>Recent Post C</h2>
+            </section>
         </div>
     </section>
 
-    <section data-xmb-target="x">
+    <section class="xmb__x-item" data-xmb-target="x">
         <h1>Hobbies</h1>
-        <div class="subsection" data-xmb-target="z" data-xmb-z-active>
-            <h2>Foo</h2>
-        </div>
-        <div class="subsection" data-xmb-target="z">
-            <h2>Bar</h2>
+        <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
+            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active>
+                <h2>Foo</h2>
+            </section>
+            <section class="xmb__z-item" data-xmb-target="z">
+                <h2>Bar</h2>
+            </section>
         </div>
     </section>
 
-    <section data-xmb-target="x">
+    <section class="xmb__x-item" data-xmb-target="x">
         <h1>Projects</h1>
-        <div class="subsection" data-xmb-target="z" data-xmb-z-active>
-            <h2>Foo</h2>
-        </div>
-        <div class="subsection" data-xmb-target="z">
-            <h2>Bar</h2>
+        <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
+            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active>
+                <h2>Foo</h2>
+            </section>
+            <section class="xmb__z-item" data-xmb-target="z">
+                <h2>Bar</h2>
+            </section>
         </div>
     </section>
 
-    <section data-xmb-target="x">
+    <section class="xmb__x-item" data-xmb-target="x">
         <h1>Work</h1>
-        <div class="subsection" data-xmb-target="z" data-xmb-z-active>
-            <h2>Current</h2>
-        </div>
-        <div class="subsection" data-xmb-target="z">
-            <h2>Contact</h2>
+        <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
+            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active>
+                <h2>Current</h2>
+            </section>
+            <section class="xmb__z-item" data-xmb-target="z">
+                <h2>Contact</h2>
+            </section>
         </div>
     </section>
 
-    <section data-xmb-target="x">
+    <section class="xmb__x-item" data-xmb-target="x">
         <h1>About</h1>
-        <div class="subsection" data-xmb-target="z" data-xmb-z-active>
-            <h2>Principles</h2>
-        </div>
-        <div class="subsection" data-xmb-target="z">
-            <h2>Preferences</h2>
+        <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
+            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active>
+                <h2>Principles</h2>
+            </section>
+            <section class="xmb__z-item" data-xmb-target="z">
+                <h2>Preferences</h2>
+            </section>
         </div>
     </section>
 </main>
diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index 7756843..29a84b2 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -5,6 +5,9 @@ export default class extends Controller {
 
     xAxisTargetDataAttr = 'data-xmb-x-active';
     zAxisTargetDataAttr = 'data-xmb-z-active';
+    bounceClass = 'xmb--bounce';
+    zAxisBounce = 5;
+    xAxisBounce = 50;
 
     get previousXTarget() {
         return this.activeXTarget.previousElementSibling;
@@ -35,8 +38,14 @@ export default class extends Controller {
         }
     }
 
-    edgeBounceComplete(event) {
-        this.element.classList.remove('edge-bounce');
+    /**
+     * When a bounce animation is complete, signifying the end of the axis to the user when they attempted to navigate
+     * further, remove the bounce class that was added to trigger the CSS animation.
+     *
+     * @param event
+     */
+    bounceComplete(event) {
+        event.target.classList.remove(this.bounceClass);
     }
 
     /**
@@ -49,12 +58,12 @@ export default class extends Controller {
             this.#setNewXTarget(next);
             this.#setTranslation('x', -this.previousXTarget.getBoundingClientRect().width);
         } else {
-            this.element.style.setProperty(`--x-edge-bounce`, `-100px`);
-            if (this.element.classList.contains('edge-bounce')) {
-                this.element.classList.remove('edge-bounce');
+            this.element.style.setProperty(`--x-translation-bounce`, `-50px`);
+            if (this.element.classList.contains(this.bounceClass)) {
+                this.element.classList.remove(this.bounceClass);
                 void this.element.offsetWidth;
             }
-            this.element.classList.add('edge-bounce');
+            this.element.classList.add(this.bounceClass);
         }
     }
 
@@ -68,12 +77,12 @@ export default class extends Controller {
             this.#setTranslation('x', this.previousXTarget.getBoundingClientRect().width);
             this.#setNewXTarget(prev);
         } else {
-            this.element.style.setProperty(`--x-edge-bounce`, `100px`);
-            if (this.element.classList.contains('edge-bounce')) {
-                this.element.classList.remove('edge-bounce');
+            this.element.style.setProperty(`--x-translation-bounce`, `50px`);
+            if (this.element.classList.contains(this.bounceClass)) {
+                this.element.classList.remove(this.bounceClass);
                 void this.element.offsetWidth;
             }
-            this.element.classList.add('edge-bounce');
+            this.element.classList.add(this.bounceClass);
         }
     }
 
@@ -83,9 +92,17 @@ export default class extends Controller {
     #zPositive() {
         const active = this.#activeZTarget();
 
-        if (active.previousElementSibling?.hasAttribute('data-xmb-target')) {
+        if (active.previousElementSibling) {
             active.previousElementSibling.setAttribute(this.zAxisTargetDataAttr, '');
             active.removeAttribute(this.zAxisTargetDataAttr);
+        } else {
+            this.element.style.setProperty(`--z-translation-z-bounce`, `-5px`);
+            const el = this.activeXTarget.querySelector('.xmb__z-stack');
+            if (el.classList.contains(this.bounceClass)) {
+                el.classList.remove(this.bounceClass);
+                void el.offsetWidth;
+            }
+            el.classList.add(this.bounceClass);
         }
     }
 
@@ -97,7 +114,15 @@ export default class extends Controller {
 
         if (active.nextElementSibling) {
             active.nextElementSibling.setAttribute(this.zAxisTargetDataAttr, '');
-            this.#activeZTarget().removeAttribute(this.zAxisTargetDataAttr);
+            active.removeAttribute(this.zAxisTargetDataAttr);
+        } else {
+            this.element.style.setProperty(`--z-translation-z-bounce`, `5px`);
+            const el = this.activeXTarget.querySelector('.xmb__z-stack');
+            if (el.classList.contains(this.bounceClass)) {
+                el.classList.remove(this.bounceClass);
+                void el.offsetWidth;
+            }
+            el.classList.add(this.bounceClass);
         }
     }
 
@@ -125,7 +150,7 @@ export default class extends Controller {
      * @returns {HTMLElement[]}
      */
     #zTargets() {
-        return this.zTargets.filter(zt => zt.parentElement === this.activeXTarget);
+        return this.zTargets.filter(zt => this.activeXTarget.contains(zt));
     }
 
     /**
diff --git a/styles/xmb.css b/styles/xmb.css
index fa2ee23..1a4d598 100644
--- a/styles/xmb.css
+++ b/styles/xmb.css
@@ -1,29 +1,46 @@
-@keyframes edge-bounce {
+@keyframes x-bounce {
   to, from {
     transform: translateX(var(--x-translation));
   }
   50% {
-    transform: translateX(calc(var(--x-translation) + var(--x-edge-bounce)));
+    transform: translateX(calc(var(--x-translation) + var(--x-translation-bounce)));
   }
 }
 
-main {
+@keyframes z-bounce {
+  to, from {
+    transform: perspective(var(--z-perspective)) translate3d(0,0,0);
+  }
+  50% {
+    transform: perspective(var(--z-perspective)) translate3d(
+      calc(var(--z-translation-z) * var(--z-translation-x-scale-factor)),
+      calc(var(--z-translation-z) * var(--z-translation-y-scale-factor)),
+      calc(var(--z-translation-z))
+    );
+  }
+}
+
+.xmb {
   --x-duration: 200ms;
-  --z-duration: 500ms;
   --x-translation: 0px;
-  --z-translation: 0px;
+  --x-translation-bounce: 50px;
+
+  --z-duration: 500ms;
+  --z-translation-z-bounce: -5px;
+  --z-translation-x-scale-factor: -4;
+  --z-translation-y-scale-factor: 1/2;
   --z-perspective: 100px;
-  --x-edge-bounce: 100px;
+  --z-translation-z: var(--z-translation-z-bounce);
 
   display: flex;
   margin-block-start: 10em;
   transition: transform var(--x-duration) ease;
   transform: translateX(var(--x-translation));
   animation-play-state: paused;
-}
 
-main.edge-bounce {
-  animation: 200ms edge-bounce ease-in-out forwards;
+  &.xmb--bounce {
+    animation: 200ms x-bounce ease-in-out forwards;
+  }
 }
 
 section {
@@ -31,54 +48,63 @@ section {
     font-weight: 500;
     opacity: 0.2;
   }
+
+  &[data-xmb-x-active] {
+    h1, h2, h3, h4, h5, h6 {
+      font-weight: 700;
+      opacity: 1;
+    }
+  }
 }
 
-section[data-xmb-x-active] {
-  h1, h2, h3, h4, h5, h6 {
-    font-weight: 700;
-    opacity: 1;
+/* Container for all subsections that are translated along the z-axis. `preserve-3d` ensures that child elements
+ maintain a three dimensional position relative to this element, their parent. */
+.xmb__z-stack {
+  transform: perspective(var(--z-perspective)) translate3d(0,0,0);
+  transform-style: preserve-3d;
+
+  &.xmb--bounce {
+    animation: 200ms z-bounce ease-in-out forwards;
   }
 }
 
 /* Why not simply apply `display: none;` to `.subsection`? This breaks the starting style for the transitions, causing
  transitions from hidden to visible to not animate properly. This could be improved by using a cascade layer. */
-section:not([data-xmb-x-active]) .subsection {
+.xmb__x-item:not([data-xmb-x-active]) .xmb__z-item {
   display: none;
 }
 
 [data-xmb-x-active] {
-  .subsection {
+  .xmb__z-item {
     transform-origin: 0 0;
     pointer-events: none;
     opacity: 1;
     position: absolute;
     width: 40em;
-    transition: transform var(--z-duration) ease,
-    filter 500ms ease-out,
-    opacity 500ms ease-out;
-    transition-behavior: allow-discrete;
+    transition: transform var(--z-duration) ease, filter 500ms ease-out, opacity 500ms ease-out;
   }
 
-  .subsection[data-xmb-z-active] {
+  .xmb__z-item[data-xmb-z-active] {
     pointer-events: auto;
     display: block;
     opacity: 1;
-    transform: perspective(var(--z-perspective)) translate3D(0,0,0);
-    transition: transform var(--z-duration) ease,
-    opacity var(--z-duration) ease,
-    display var(--z-duration) ease;
-    transition-behavior: allow-discrete;
+    transition: transform var(--z-duration) ease, opacity var(--z-duration) ease;
   }
 
   /* All subsections that are not the immediate one beneath the active subsection should be hidden. The immediate next
    subsection is handled using the `+` selector below. */
-  .subsection[data-xmb-z-active] ~ .subsection {
+  .xmb__z-item[data-xmb-z-active] ~ .xmb__z-item {
     display: none;
   }
 
-  .subsection[data-xmb-z-active] + .subsection {
+  .xmb__z-item[data-xmb-z-active] + .xmb__z-item {
+    --z-translation-z: -50px;
     display: block;
-    transform: perspective(var(--z-perspective)) translate3D(200px, -25px, -50px);
+    transform: translate3d(
+      calc(var(--z-translation-z) * var(--z-translation-x-scale-factor)),
+      calc(var(--z-translation-z) * var(--z-translation-y-scale-factor)),
+      calc(var(--z-translation-z))
+    );
     transition: transform var(--z-duration) cubic-bezier(0,1,1,1),
     filter 500ms ease,
     opacity 500ms ease-out,
@@ -89,9 +115,14 @@ section:not([data-xmb-x-active]) .subsection {
   }
 
   /* Select the subsection in the z-stack that is "behind" the user's screen. */
-  .subsection:has(~ .subsection[data-xmb-z-active]) {
+  .xmb__z-item:has(~ .xmb__z-item[data-xmb-z-active]) {
+    --z-translation-z: 50px;
     opacity: 0;
-    transform: perspective(var(--z-perspective)) translate3D(-200px, 25px, 50px);
+    transform: translate3d(
+      calc(var(--z-translation-z) * var(--z-translation-x-scale-factor)),
+      calc(var(--z-translation-z) * var(--z-translation-y-scale-factor)),
+      calc(var(--z-translation-z))
+    );
     transition: transform var(--z-duration) ease, opacity var(--z-duration) ease, display var(--z-duration) ease;
     transition-behavior: allow-discrete;
 
@@ -100,3 +131,5 @@ section:not([data-xmb-x-active]) .subsection {
     }
   }
 }
+
+

From d3a3a5c42c3ecc3cf70faae8dd12f25b6ba0740b Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Thu, 23 Oct 2025 21:28:58 +1300
Subject: [PATCH 08/32] refactor(emoji animation): make work within xmb

---
 index.html                  |  9 +++++----
 styles/components/emoji.css | 32 +++++++++++++++++---------------
 styles/styles.css           |  5 -----
 3 files changed, 22 insertions(+), 24 deletions(-)
 delete mode 100644 styles/styles.css

diff --git a/index.html b/index.html
index 312a5d1..898d428 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,6 @@
     <link rel="stylesheet" href="styles/type.css">
     <link rel="stylesheet" href="styles/variables.css">
     <link rel="stylesheet" href="styles/global.css">
-    <link rel="stylesheet" href="styles/styles.css">
     <link rel="stylesheet" href="styles/xmb.css">
     <link rel="stylesheet" href="styles/components/authenticity-sticker.css">
     <link rel="stylesheet" href="styles/components/emoji.css">
@@ -41,8 +40,8 @@
                     emojiContainerEl.prepend(nextEmojiEl);
 
                     if (emojiContainerEl.children.length > 1) {
-                        emojiContainerEl.lastChild.classList.add('emoji--transitioning-out');
-                        setTimeout(() => emojiContainerEl.lastChild.remove(), fadeOutDuration);
+                        emojiContainerEl.lastElementChild.classList.add('emoji--transitioning-out');
+                        setTimeout(() => emojiContainerEl.lastElementChild.remove(), fadeOutDuration);
                     }
                 }, transitionSpeed);
             }
@@ -105,7 +104,9 @@
         <h1>Hello!</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
             <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active>
-                <h2>👋</h2>
+                <h2 class="emoji-container">
+                    <span class="emoji">👋</span>
+                </h2>
                 <div class="xmb__z-item-container">
                     <p>This site uses an intersectional interface reminiscent of the XrossMediaBar (XMB) on the PlayStation Portable and PS3.</p>
                     <p>Navigate this site using your keyboard arrows, click the on-screen arrows with your mouse, or scroll to move through the Z-axis of the currently selected header.</p>
diff --git a/styles/components/emoji.css b/styles/components/emoji.css
index 5c1420d..5093cee 100644
--- a/styles/components/emoji.css
+++ b/styles/components/emoji.css
@@ -1,4 +1,4 @@
-@keyframes emoji-animation-drop-in {
+@keyframes emoji-drop-in {
     from {
         transform: translateY(-100%);
         opacity: 0;
@@ -8,27 +8,29 @@
     }
 }
 
-@keyframes emoji-animation-drop-out {
-    80% {
-        opacity: 0;
-    }
-    to {
-        opacity: 0;
-        transform: translateY(100%);
-    }
+@keyframes emoji-drop-out {
+  from {
+    position: absolute;
+    transform: translateY(0%);
+  }
+  80% {
+      opacity: 0;
+  }
+  to {
+      opacity: 0;
+      transform: translateY(100%);
+  }
 }
 
 .emoji-container {
-    /* Create a new positioning context for the emoji which require absolute positioning. */
-    position: relative;
-    left: -1.25em;
+  margin-block-end: 1.5em;
 }
 
 .emoji {
-    position: absolute;
-    animation: emoji-animation-drop-in 800ms cubic-bezier(0.6, 1.64, 0.8, 1) forwards;
+  position: absolute;
+  animation: emoji-drop-in 800ms cubic-bezier(0.6, 1.64, 0.8, 1) forwards;
 }
 
 .emoji--transitioning-out {
-    animation: emoji-animation-drop-out 1200ms cubic-bezier(0.5, 1, 0.33, 1) forwards;
+  animation: emoji-drop-out 1200ms cubic-bezier(0.5, 1, 0.33, 1) forwards;
 }
diff --git a/styles/styles.css b/styles/styles.css
deleted file mode 100644
index 0d99ff1..0000000
--- a/styles/styles.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.hed {
-    /* Introduce some margin such that emojis are positioned naturally to the headline text. */
-    margin-inline-start: 1.25em;
-    font: bold 4em var(--display-typeface);
-}

From 4fddd878f249723f58509f86c8b238e904846326 Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Fri, 24 Oct 2025 20:38:36 +1300
Subject: [PATCH 09/32] feat(xmb): support clicking x-axis items

---
 index.html                            | 12 ++++++------
 scripts/controllers/xmb_controller.js | 18 ++++++++++++++++++
 styles/global.css                     | 10 +++++++++-
 3 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 898d428..df882f0 100644
--- a/index.html
+++ b/index.html
@@ -101,7 +101,7 @@
 
 <main class="xmb" data-controller="xmb" data-action="keydown@window->xmb#handleKeydown animationend->xmb#bounceComplete">
     <section class="xmb__x-item" data-xmb-target="x" data-xmb-x-active>
-        <h1>Hello!</h1>
+        <h1 data-action="click->xmb#handleHeaderClick">Hello!</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
             <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active>
                 <h2 class="emoji-container">
@@ -143,7 +143,7 @@ <h2>Final</h2>
     </section>
 
     <section class="xmb__x-item" data-xmb-target="x">
-        <h1>Posts</h1>
+        <h1 data-action="click->xmb#handleHeaderClick">Posts</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
             <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active>
                 <h2>Recent Post A</h2>
@@ -158,7 +158,7 @@ <h2>Recent Post C</h2>
     </section>
 
     <section class="xmb__x-item" data-xmb-target="x">
-        <h1>Hobbies</h1>
+        <h1 data-action="click->xmb#handleHeaderClick">Hobbies</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
             <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active>
                 <h2>Foo</h2>
@@ -170,7 +170,7 @@ <h2>Bar</h2>
     </section>
 
     <section class="xmb__x-item" data-xmb-target="x">
-        <h1>Projects</h1>
+        <h1 data-action="click->xmb#handleHeaderClick">Projects</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
             <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active>
                 <h2>Foo</h2>
@@ -182,7 +182,7 @@ <h2>Bar</h2>
     </section>
 
     <section class="xmb__x-item" data-xmb-target="x">
-        <h1>Work</h1>
+        <h1 data-action="click->xmb#handleHeaderClick">Work</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
             <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active>
                 <h2>Current</h2>
@@ -194,7 +194,7 @@ <h2>Contact</h2>
     </section>
 
     <section class="xmb__x-item" data-xmb-target="x">
-        <h1>About</h1>
+        <h1 data-action="click->xmb#handleHeaderClick">About</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
             <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active>
                 <h2>Principles</h2>
diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index 29a84b2..8ac4664 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -38,6 +38,24 @@ export default class extends Controller {
         }
     }
 
+    /**
+     * Navigate to the recently clicked header element.
+     *
+     * @param event
+     */
+    handleHeaderClick(event) {
+        const prevTarget = this.activeXTarget;
+        const xTarget = this.xTargets.find(xt => xt.contains(event.target));
+
+        if (prevTarget.compareDocumentPosition(xTarget) & Node.DOCUMENT_POSITION_FOLLOWING) {
+            this.#setNewXTarget(xTarget);
+            this.#setTranslation('x', prevTarget.getBoundingClientRect().left - xTarget.getBoundingClientRect().left);
+        } else {
+            this.#setTranslation('x', prevTarget.getBoundingClientRect().left - xTarget.getBoundingClientRect().left);
+            this.#setNewXTarget(xTarget);
+        }
+    }
+
     /**
      * When a bounce animation is complete, signifying the end of the axis to the user when they attempted to navigate
      * further, remove the bounce class that was added to trigger the CSS animation.
diff --git a/styles/global.css b/styles/global.css
index 1d3c45a..32332cc 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -4,7 +4,7 @@
 
 html {
   min-height: 100%;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 body {
@@ -24,6 +24,14 @@ h1, h2, h3, h4, h5, h6 {
 
 h1 {
   font-size: 8em;
+  cursor: pointer;
+  transition: transform 100ms ease;
+  -webkit-user-select: none;
+  user-select: none;
+
+  &:active {
+    transform: scale(0.95);
+  }
 }
 
 h2 {

From db7dd7517aa04cd0013aa391010343b41eaf6e30 Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Sat, 25 Oct 2025 14:58:33 +1300
Subject: [PATCH 10/32] feat(xmb): support for scrolling sections vertically

---
 scripts/controllers/xmb_controller.js | 24 ++++++++++++++++++++++++
 styles/global.css                     | 10 ++++++----
 styles/xmb.css                        |  9 +++++++--
 3 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index 8ac4664..cafe47e 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -21,6 +21,13 @@ export default class extends Controller {
         return this.xTargets.find(xt => xt.hasAttribute(this.xAxisTargetDataAttr));
     }
 
+    /**
+     * On connection, compute the y-offset for the z-target.
+     */
+    connect() {
+        this.#computeYOffsetForZTarget(this.#activeZTarget());
+    }
+
     handleKeydown(event) {
         switch (event.key) {
             case 'ArrowUp':
@@ -113,6 +120,7 @@ export default class extends Controller {
         if (active.previousElementSibling) {
             active.previousElementSibling.setAttribute(this.zAxisTargetDataAttr, '');
             active.removeAttribute(this.zAxisTargetDataAttr);
+            this.#computeYOffsetForZTarget(this.#activeZTarget());
         } else {
             this.element.style.setProperty(`--z-translation-z-bounce`, `-5px`);
             const el = this.activeXTarget.querySelector('.xmb__z-stack');
@@ -133,6 +141,7 @@ export default class extends Controller {
         if (active.nextElementSibling) {
             active.nextElementSibling.setAttribute(this.zAxisTargetDataAttr, '');
             active.removeAttribute(this.zAxisTargetDataAttr);
+            this.#computeYOffsetForZTarget(this.#activeZTarget());
         } else {
             this.element.style.setProperty(`--z-translation-z-bounce`, `5px`);
             const el = this.activeXTarget.querySelector('.xmb__z-stack');
@@ -180,4 +189,19 @@ export default class extends Controller {
     #activeZTarget() {
         return this.#zTargets().find(zt => zt.hasAttribute(this.zAxisTargetDataAttr));
     }
+
+    /**
+     * Computes the `y` offset for the provided `z` target so it is initially in the same location as it was placed in
+     * the DOM, but allows for scrolling with the entirety of the y-axis of the viewport. This is only computed once
+     * for a `z` target, the first time it becomes active.
+     *
+     * @param target
+     */
+    #computeYOffsetForZTarget(target) {
+        if (target.style.top === '') {
+            const offset = target.getBoundingClientRect().top;
+            target.style.top = `-${offset}px`;
+            target.style.paddingBlockStart = `${offset}px`;
+        }
+    }
 }
diff --git a/styles/global.css b/styles/global.css
index 32332cc..c8db8ab 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -2,9 +2,10 @@
     box-sizing: border-box;
 }
 
-html {
-  min-height: 100%;
+html, body {
+  margin: 0;
   overflow: hidden;
+  height: 120dvh; /* TODO: Caclulate the actual height needed */
 }
 
 body {
@@ -12,8 +13,8 @@ body {
   background-color: var(--primary-bg--light-appearance);
   font: 400 1.1em var(--text-typeface);
   line-height: 1.5;
-  max-width: var(--content-width);
-  margin-inline: auto;
+  width: 100vw;
+  padding-inline: calc((100vw - var(--content-width)) / 2);
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -23,6 +24,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
+  margin-block-start: 1em;
   font-size: 8em;
   cursor: pointer;
   transition: transform 100ms ease;
diff --git a/styles/xmb.css b/styles/xmb.css
index 1a4d598..4dd7c43 100644
--- a/styles/xmb.css
+++ b/styles/xmb.css
@@ -33,7 +33,6 @@
   --z-translation-z: var(--z-translation-z-bounce);
 
   display: flex;
-  margin-block-start: 10em;
   transition: transform var(--x-duration) ease;
   transform: translateX(var(--x-translation));
   animation-play-state: paused;
@@ -80,7 +79,13 @@ section {
     pointer-events: none;
     opacity: 1;
     position: absolute;
-    width: 40em;
+    top:0;
+    padding-block-start: 0;
+    width: 100vw;
+    height: 100vh;
+    scrollbar-width: none;
+    overflow: scroll;
+    max-width: var(--content-width);
     transition: transform var(--z-duration) ease, filter 500ms ease-out, opacity 500ms ease-out;
   }
 

From 1c0ac13091c169a852a5f2e9a483e32e75ea1c2e Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Sun, 26 Oct 2025 21:54:02 +1300
Subject: [PATCH 11/32] feat(xmb): x-axis masking on z-item scroll

---
 index.html                            |  72 +++++-----
 scripts/controllers/xmb_controller.js | 197 +++++++++++++++++++-------
 styles/xmb.css                        |  43 ++++--
 3 files changed, 216 insertions(+), 96 deletions(-)

diff --git a/index.html b/index.html
index df882f0..b0c96e3 100644
--- a/index.html
+++ b/index.html
@@ -101,10 +101,10 @@
 
 <main class="xmb" data-controller="xmb" data-action="keydown@window->xmb#handleKeydown animationend->xmb#bounceComplete">
     <section class="xmb__x-item" data-xmb-target="x" data-xmb-x-active>
-        <h1 data-action="click->xmb#handleHeaderClick">Hello!</h1>
+        <h1 class="xmb__x-heading" data-action="click->xmb#handleHeaderClick" data-xmb-target="xHeading">Hello!</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
-            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active>
-                <h2 class="emoji-container">
+            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active data-action="scroll->xmb#onItemScroll">
+                <h2 class="xmb__z-heading emoji-container">
                     <span class="emoji">👋</span>
                 </h2>
                 <div class="xmb__z-item-container">
@@ -121,8 +121,8 @@ <h2 class="emoji-container">
                         Sail because of crow’s nest barrel parrot. Northerly heave or port –  oar. Ahoy or ocean cannon!</p>
                 </div>
             </section>
-            <section class="xmb__z-item" data-xmb-target="z">
-                <h2>Site Navigation</h2>
+            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#onItemScroll">
+                <h2 class="xmb__z-heading">Site Navigation</h2>
                 <p>This site uses an intersectional interface reminiscent of the XrossMediaBar (XMB) on the PlayStation Portable and PS3.</p>
                 <p>Navigate this site using your keyboard arrows, click the on-screen arrows with your mouse, or scroll to move through the Z-axis of the currently selected header.</p>
                 <p>Seafaring quartermaster cannon aurora. Seafaring heave with compass without quartermaster quartermaster. "Mast rigging because of barnacle whale sail blubber." "Alley and helm with jolly hornpipe deck, whale locker." Barrel eyepatch brigantine. Yardarm aurora of the topgallant cannon with bilge seaworthy?
@@ -135,72 +135,76 @@ <h2>Site Navigation</h2>
                     "Barnacle salt, starboard helm avast." Deck land brine easterly figurehead. Southerly bucko, gangplank bucko crow’s nest locker. Lover maybe sea spyglass salt? "Shipmate cannon, avast." Windward and the landlubber, treasure galley because of easterly the ol’ ale bilge.
                     Sail because of crow’s nest barrel parrot. Northerly heave or port –  oar. Ahoy or ocean cannon!</p>
             </section>
-            <section class="xmb__z-item" data-xmb-target="z">
-                <h2>Final</h2>
+            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#onItemScroll">
+                <h2 class="xmb__z-heading">Final</h2>
                 <p>Foo bar</p>
             </section>
         </div>
     </section>
 
     <section class="xmb__x-item" data-xmb-target="x">
-        <h1 data-action="click->xmb#handleHeaderClick">Posts</h1>
+        <h1 class="xmb__x-heading" data-action="click->xmb#handleHeaderClick" data-xmb-target="xHeading">Posts</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
-            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active>
-                <h2>Recent Post A</h2>
+            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active data-action="scroll->xmb#onItemScroll">
+                <h2 class="xmb__z-heading">Recent Post A</h2>
+                <div class="xmb__z-item-container">
+                </div>
             </section>
-            <section class="xmb__z-item" data-xmb-target="z">
-                <h2>Recent Post B</h2>
+            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#onItemScroll">
+                <h2 class="xmb__z-heading">Recent Post B</h2>
             </section>
-            <section class="xmb__z-item" data-xmb-target="z">
-                <h2>Recent Post C</h2>
+            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#onItemScroll">
+                <h2 class="xmb__z-heading">Recent Post C</h2>
             </section>
         </div>
     </section>
 
     <section class="xmb__x-item" data-xmb-target="x">
-        <h1 data-action="click->xmb#handleHeaderClick">Hobbies</h1>
+        <h1 class="xmb__x-heading" data-action="click->xmb#handleHeaderClick" data-xmb-target="xHeading">Hobbies</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
-            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active>
-                <h2>Foo</h2>
+            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active data-action="scroll->xmb#onItemScroll">
+                <h2 class="xmb__z-heading">Foo</h2>
+                <div class="xmb__z-item-container">
+                </div>
             </section>
-            <section class="xmb__z-item" data-xmb-target="z">
-                <h2>Bar</h2>
+            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#onItemScroll">
+                <h2 class="xmb__z-heading">Bar</h2>
             </section>
         </div>
     </section>
 
     <section class="xmb__x-item" data-xmb-target="x">
-        <h1 data-action="click->xmb#handleHeaderClick">Projects</h1>
+        <h1 class="xmb__x-heading" data-action="click->xmb#handleHeaderClick" data-xmb-target="xHeading">Projects</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
-            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active>
-                <h2>Foo</h2>
+            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active data-action="scroll->xmb#onItemScroll">
+                <h2 class="xmb__z-heading">Foo</h2>
             </section>
-            <section class="xmb__z-item" data-xmb-target="z">
-                <h2>Bar</h2>
+            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#onItemScroll">
+                <h2 class="xmb__z-heading">Bar</h2>
             </section>
         </div>
     </section>
 
     <section class="xmb__x-item" data-xmb-target="x">
-        <h1 data-action="click->xmb#handleHeaderClick">Work</h1>
+        <h1 class="xmb__x-heading" data-action="click->xmb#handleHeaderClick" data-xmb-target="xHeading">Work</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
-            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active>
-                <h2>Current</h2>
+            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active data-action="scroll->xmb#onItemScroll">
+                <h2 class="xmb__z-heading">Current</h2>
             </section>
-            <section class="xmb__z-item" data-xmb-target="z">
-                <h2>Contact</h2>
+            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#onItemScroll">
+                <h2 class="xmb__z-heading">Contact</h2>
             </section>
         </div>
     </section>
 
     <section class="xmb__x-item" data-xmb-target="x">
-        <h1 data-action="click->xmb#handleHeaderClick">About</h1>
+        <h1 class="xmb__x-heading" data-action="click->xmb#handleHeaderClick" data-xmb-target="xHeading">About</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
-            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active>
-                <h2>Principles</h2>
+            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active data-action="scroll->xmb#onItemScroll">
+                <h2 class="xmb__z-heading">Principles</h2>
             </section>
-            <section class="xmb__z-item" data-xmb-target="z">
-                <h2>Preferences</h2>
+            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#onItemScroll">
+                <h2 class="xmb__z-heading">Preferences</h2>
             </section>
         </div>
     </section>
diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index cafe47e..d297e85 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -1,13 +1,14 @@
 import {Controller} from "@hotwired/stimulus";
 
 export default class extends Controller {
-    static targets = ['x', 'z'];
+    static targets = ['x', 'xHeading', 'z'];
 
     xAxisTargetDataAttr = 'data-xmb-x-active';
     zAxisTargetDataAttr = 'data-xmb-z-active';
     bounceClass = 'xmb--bounce';
     zAxisBounce = 5;
     xAxisBounce = 50;
+    zItemBoundingClientRect = null;
 
     get previousXTarget() {
         return this.activeXTarget.previousElementSibling;
@@ -22,24 +23,30 @@ export default class extends Controller {
     }
 
     /**
-     * On connection, compute the y-offset for the z-target.
+     * On connection, compute the y-offset for the z-target, and pre-measure the boundingClientRect for the current
+     * z-item before any transformations are applied.
      */
     connect() {
         this.#computeYOffsetForZTarget(this.#activeZTarget());
+        this.zItemBoundingClientRect = this.#activeZTarget().getBoundingClientRect();
     }
 
     handleKeydown(event) {
         switch (event.key) {
             case 'ArrowUp':
+                event.preventDefault();
                 this.#zPositive();
                 break;
             case 'ArrowDown':
+                event.preventDefault();
                 this.#zNegative();
                 break;
             case 'ArrowRight':
+                event.preventDefault();
                 this.#xPositive();
                 break;
             case 'ArrowLeft':
+                event.preventDefault();
                 this.#xNegative();
                 break;
         }
@@ -48,6 +55,10 @@ export default class extends Controller {
     /**
      * Navigate to the recently clicked header element.
      *
+     * The order of setting a new active target and setting the x-axis translation must depend on the relative position
+     * of the previously active target and the newly active target because the font weight of the active target differs
+     * from inactive targets which makes the computed translation incorrect if done in the wrong order.
+     *
      * @param event
      */
     handleHeaderClick(event) {
@@ -55,11 +66,11 @@ export default class extends Controller {
         const xTarget = this.xTargets.find(xt => xt.contains(event.target));
 
         if (prevTarget.compareDocumentPosition(xTarget) & Node.DOCUMENT_POSITION_FOLLOWING) {
-            this.#setNewXTarget(xTarget);
-            this.#setTranslation('x', prevTarget.getBoundingClientRect().left - xTarget.getBoundingClientRect().left);
+            this.#setNewTarget('x', xTarget);
+            this.#setXTranslation(prevTarget.getBoundingClientRect().left - xTarget.getBoundingClientRect().left);
         } else {
-            this.#setTranslation('x', prevTarget.getBoundingClientRect().left - xTarget.getBoundingClientRect().left);
-            this.#setNewXTarget(xTarget);
+            this.#setXTranslation(prevTarget.getBoundingClientRect().left - xTarget.getBoundingClientRect().left);
+            this.#setNewTarget('x', xTarget);
         }
     }
 
@@ -73,6 +84,14 @@ export default class extends Controller {
         event.target.classList.remove(this.bounceClass);
     }
 
+    /**
+     *
+     * @param event
+     */
+    onItemScroll(event) {
+        this.#computeXAxisMask(event.target, 0);
+    }
+
     /**
      * Navigates rightwards using the right arrow key.
      */
@@ -80,10 +99,11 @@ export default class extends Controller {
         const next = this.nextXTarget;
 
         if (next) {
-            this.#setNewXTarget(next);
-            this.#setTranslation('x', -this.previousXTarget.getBoundingClientRect().width);
+            this.#setNewTarget('x', next);
+            this.#setXTranslation(-this.previousXTarget.getBoundingClientRect().width);
+            this.#computeXAxisMask(this.#activeZTarget(), -this.previousXTarget.getBoundingClientRect().width);
         } else {
-            this.element.style.setProperty(`--x-translation-bounce`, `-50px`);
+            this.element.style.setProperty(`--x-translation-bounce`, this.#asPx(this.xAxisBounce * -1));
             if (this.element.classList.contains(this.bounceClass)) {
                 this.element.classList.remove(this.bounceClass);
                 void this.element.offsetWidth;
@@ -99,10 +119,12 @@ export default class extends Controller {
         const prev = this.previousXTarget;
 
         if (prev) {
-            this.#setTranslation('x', this.previousXTarget.getBoundingClientRect().width);
-            this.#setNewXTarget(prev);
+            const prevWidth = prev.getBoundingClientRect().width;
+            this.#setXTranslation(prevWidth);
+            this.#setNewTarget('x', prev);
+            this.#computeXAxisMask(this.#activeZTarget(), prevWidth);
         } else {
-            this.element.style.setProperty(`--x-translation-bounce`, `50px`);
+            this.element.style.setProperty(`--x-translation-bounce`, this.#asPx(this.xAxisBounce));
             if (this.element.classList.contains(this.bounceClass)) {
                 this.element.classList.remove(this.bounceClass);
                 void this.element.offsetWidth;
@@ -118,17 +140,11 @@ export default class extends Controller {
         const active = this.#activeZTarget();
 
         if (active.previousElementSibling) {
-            active.previousElementSibling.setAttribute(this.zAxisTargetDataAttr, '');
-            active.removeAttribute(this.zAxisTargetDataAttr);
-            this.#computeYOffsetForZTarget(this.#activeZTarget());
+            this.#setNewTarget('z', active.previousElementSibling);
+            this.#computeXAxisMask(this.#activeZTarget(), 0);
         } else {
-            this.element.style.setProperty(`--z-translation-z-bounce`, `-5px`);
-            const el = this.activeXTarget.querySelector('.xmb__z-stack');
-            if (el.classList.contains(this.bounceClass)) {
-                el.classList.remove(this.bounceClass);
-                void el.offsetWidth;
-            }
-            el.classList.add(this.bounceClass);
+            this.element.style.setProperty(`--z-translation-z-bounce`, this.#asPx(this.zAxisBounce * -1));
+            this.#appendBounceClass();
         }
     }
 
@@ -139,36 +155,31 @@ export default class extends Controller {
         const active = this.#activeZTarget();
 
         if (active.nextElementSibling) {
-            active.nextElementSibling.setAttribute(this.zAxisTargetDataAttr, '');
-            active.removeAttribute(this.zAxisTargetDataAttr);
-            this.#computeYOffsetForZTarget(this.#activeZTarget());
+            this.#setNewTarget('z', active.nextElementSibling);
+            this.#computeXAxisMask(this.#activeZTarget(), 0);
         } else {
-            this.element.style.setProperty(`--z-translation-z-bounce`, `5px`);
-            const el = this.activeXTarget.querySelector('.xmb__z-stack');
-            if (el.classList.contains(this.bounceClass)) {
-                el.classList.remove(this.bounceClass);
-                void el.offsetWidth;
-            }
-            el.classList.add(this.bounceClass);
+            this.element.style.setProperty(`--z-translation-z-bounce`, this.#asPx(this.zAxisBounce));
+            this.#appendBounceClass();
         }
     }
 
-    #currentTranslation() {
-        const computedStyle = window.getComputedStyle(this.element);
-        return {
-            x: parseFloat(computedStyle.getPropertyValue('--x-translation')),
-            z: parseFloat(computedStyle.getPropertyValue('--z-translation'))
-        };
-    }
 
-    #setTranslation(axis, adjustment) {
-        const newValue = this.#currentTranslation()[axis] + adjustment;
-        this.element.style.setProperty(`--${axis}-translation`, `${newValue}px`);
+    #setXTranslation(adjustment) {
+        console.log(adjustment);
+        const currTranslation = parseFloat(
+            window.getComputedStyle(this.element).getPropertyValue('--x-translation')
+        );
+        this.element.style.setProperty(`--x-translation`, `${currTranslation + adjustment}px`);
     }
 
-    #setNewXTarget(newTarget) {
-        this.activeXTarget.removeAttribute(this.xAxisTargetDataAttr);
-        newTarget.setAttribute(this.xAxisTargetDataAttr, '');
+    #setNewTarget(axis, tgt) {
+        const active = axis === 'x' ? this.activeXTarget : this.#activeZTarget();
+        const dataAttr = axis === 'x' ? this.xAxisTargetDataAttr : this.zAxisTargetDataAttr;
+
+        active.removeAttribute(dataAttr);
+        tgt.setAttribute(dataAttr, '');
+
+        this.#computeYOffsetForZTarget(this.#activeZTarget());
     }
 
     /**
@@ -195,13 +206,97 @@ export default class extends Controller {
      * the DOM, but allows for scrolling with the entirety of the y-axis of the viewport. This is only computed once
      * for a `z` target, the first time it becomes active.
      *
-     * @param target
+     * @param tgt
+     */
+    #computeYOffsetForZTarget(tgt) {
+        if (tgt.style.top === '') {
+            const offset = tgt.getBoundingClientRect().top;
+            tgt.style.top = this.#asPx(-offset);
+            tgt.style.paddingBlockStart = this.#asPx(offset);
+        }
+    }
+
+    /**
+     * Returns a value as a `pixel`-denominated string.
+     *
+     * @param value
+     * @returns {string}
+     */
+    #asPx(value) {
+        return `${value}px`;
+    }
+
+    /**
+     *
+     */
+    #appendBounceClass() {
+        const el = this.activeXTarget.querySelector('.xmb__z-stack');
+        if (el.classList.contains(this.bounceClass)) {
+            el.classList.remove(this.bounceClass);
+            void el.offsetWidth;
+        }
+        el.classList.add(this.bounceClass);
+    }
+
+    /**
+     * Calculates how much of the `targetRect` is overlapped by the `overlappingRect`.
+     * Returns an object with top, right, bottom, and left values indicating the overlap distances.
+     *
+     * @param overlappingRect {DOMRect} The rectangle that may be overlapping the target
+     * @param targetRect {DOMRect} The target rectangle that we want to check for overlap
+     *
+     * @returns {{top: number, right: number, bottom: number, left: number}|null} Overlap measurements, or null if no
+     * overlap is present.
      */
-    #computeYOffsetForZTarget(target) {
-        if (target.style.top === '') {
-            const offset = target.getBoundingClientRect().top;
-            target.style.top = `-${offset}px`;
-            target.style.paddingBlockStart = `${offset}px`;
+    #overlappingBounds(overlappingRect, targetRect) {
+        // Is there any overlap at all?
+        if (overlappingRect.right < targetRect.left ||
+            overlappingRect.bottom < targetRect.top ||
+            overlappingRect.left > targetRect.right ||
+            overlappingRect.top > targetRect.bottom) {
+            return null;
         }
+
+        const left = Math.min(targetRect.width, Math.max(0, overlappingRect.left - targetRect.left));
+        const right = Math.max(0, Math.min(targetRect.width, overlappingRect.right - targetRect.left));
+        const top = Math.max(0, overlappingRect.top - targetRect.top);
+        const bottom = Math.min(targetRect.height, targetRect.bottom - Math.max(0, targetRect.bottom - overlappingRect.bottom));
+
+        return { top, right, left, bottom };
+    }
+
+    /**
+     * Given a z-axis target, compute the mask that should be applied to the x-axis headings. If the z-axis target has
+     * a non-zero scroll top value, then the mask should be applied to the headings.
+     *
+     * @param zTgt
+     * @param xTranslationAdjustment
+     */
+    #computeXAxisMask(zTgt, xTranslationAdjustment) {
+        console.log(xTranslationAdjustment);
+        this.xHeadingTargets.forEach(h => {
+            const headingRect = h.getBoundingClientRect();
+            const overlap = this.#overlappingBounds(this.zItemBoundingClientRect, {
+                left: headingRect.left + xTranslationAdjustment,
+                right: headingRect.right + xTranslationAdjustment,
+                top: headingRect.top,
+                bottom: headingRect.bottom,
+                width: headingRect.width,
+                height: headingRect.height
+            });
+
+            if (overlap) {
+                h.classList.add(`xmb__x-heading--masked`);
+                const maskTransparency = 100 - Math.min(100, zTgt.scrollTop);
+                h.style.setProperty(`--mask-transparency`, `${maskTransparency}%`);
+                h.style.setProperty('--overlap-left', `${overlap.left}px`);
+                h.style.setProperty('--overlap-right', `${overlap.right}px`);
+            } else {
+                h.classList.remove(`xmb__x-heading--masked`);
+                h.style.setProperty(`--mask-transparency`, `100%`);
+                h.style.setProperty('--overlap-left', `0px`);
+                h.style.setProperty('--overlap-right', `0px`);
+            }
+        });
     }
 }
diff --git a/styles/xmb.css b/styles/xmb.css
index 4dd7c43..5c7c8f1 100644
--- a/styles/xmb.css
+++ b/styles/xmb.css
@@ -42,18 +42,33 @@
   }
 }
 
-section {
-  h1, h2, h3, h4, h5, h6 {
-    font-weight: 500;
-    opacity: 0.2;
-  }
+.xmb__x-heading, .xmb__z-heading {
+  font-weight: 500;
+  color: oklch(0.8761 0 0);
+}
 
-  &[data-xmb-x-active] {
-    h1, h2, h3, h4, h5, h6 {
-      font-weight: 700;
-      opacity: 1;
-    }
-  }
+/* Apply some inline end padding as when letter-spacing is contracted, the titled */
+.xmb__x-heading {
+  padding-inline-end: 0.03em;
+}
+
+.xmb__x-item:not(:first-of-type) .xmb__x-heading {
+  margin-inline-start: -0.03em;
+}
+
+.xmb__x-heading--masked {
+  --overlap-right: 0px;
+  --overlap-left: 0px;
+  --mask-transparency: 0%;
+  mask: linear-gradient(
+    90deg,
+    oklch(0 0 0) 0%,
+    oklch(0 0 0) var(--overlap-left),
+    oklch(0 0 0 / var(--mask-transparency)) var(--overlap-left),
+    oklch(0 0 0 / var(--mask-transparency)) var(--overlap-right),
+    oklch(0 0 0) var(--overlap-right),
+    oklch(0 0 0) 110%
+  );
 }
 
 /* Container for all subsections that are translated along the z-axis. `preserve-3d` ensures that child elements
@@ -74,7 +89,13 @@ section {
 }
 
 [data-xmb-x-active] {
+  .xmb__x-heading, .xmb__z-heading {
+    font-weight: 700;
+    color: oklch(0 0 0);
+  }
+
   .xmb__z-item {
+    text-align: justify;
     transform-origin: 0 0;
     pointer-events: none;
     opacity: 1;

From 4b71ab0d546fdb21405541d69988bda7e6996d3a Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Mon, 27 Oct 2025 20:11:56 +1300
Subject: [PATCH 12/32] refactor: use default values in var() for mask instead
 of defining empty custom properties

---
 styles/xmb.css | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/styles/xmb.css b/styles/xmb.css
index 5c7c8f1..1cd7284 100644
--- a/styles/xmb.css
+++ b/styles/xmb.css
@@ -57,17 +57,14 @@
 }
 
 .xmb__x-heading--masked {
-  --overlap-right: 0px;
-  --overlap-left: 0px;
-  --mask-transparency: 0%;
   mask: linear-gradient(
     90deg,
     oklch(0 0 0) 0%,
-    oklch(0 0 0) var(--overlap-left),
-    oklch(0 0 0 / var(--mask-transparency)) var(--overlap-left),
-    oklch(0 0 0 / var(--mask-transparency)) var(--overlap-right),
-    oklch(0 0 0) var(--overlap-right),
-    oklch(0 0 0) 110%
+    oklch(0 0 0) var(--overlap-left, 0px),
+    oklch(0 0 0 / var(--mask-transparency, 0%)) var(--overlap-left, 0px),
+    oklch(0 0 0 / var(--mask-transparency, 0%)) var(--overlap-right, 0px),
+    oklch(0 0 0) var(--overlap-right, 0px),
+    oklch(0 0 0) 100%
   );
 }
 

From e62390ff4bb03db4ef93ee373d99185bf84d66fc Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Mon, 27 Oct 2025 21:19:15 +1300
Subject: [PATCH 13/32] fix: disallow clicking headings that have masks applied

---
 styles/xmb.css | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/styles/xmb.css b/styles/xmb.css
index 1cd7284..13c5564 100644
--- a/styles/xmb.css
+++ b/styles/xmb.css
@@ -57,6 +57,7 @@
 }
 
 .xmb__x-heading--masked {
+  pointer-events: none;
   mask: linear-gradient(
     90deg,
     oklch(0 0 0) 0%,
@@ -73,12 +74,20 @@
 .xmb__z-stack {
   transform: perspective(var(--z-perspective)) translate3d(0,0,0);
   transform-style: preserve-3d;
+  position: relative;
+  z-index: -1;
 
   &.xmb--bounce {
     animation: 200ms z-bounce ease-in-out forwards;
   }
 }
 
+/* The z-index of the stack must be set beneath that of the heading elements so the heading elements remain
+clickable due to the presence of `padding-block-start` on the `.xmb__z-stack` that's applied by Javascript. */
+.xmb:not(:has(.xmb__x-heading--masked)) .xmb__z-stack {
+
+}
+
 /* Why not simply apply `display: none;` to `.subsection`? This breaks the starting style for the transitions, causing
  transitions from hidden to visible to not animate properly. This could be improved by using a cascade layer. */
 .xmb__x-item:not([data-xmb-x-active]) .xmb__z-item {
@@ -154,5 +163,3 @@
     }
   }
 }
-
-

From 2f6c534dd978eea0fd924b7c243e1e26f442755a Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Mon, 27 Oct 2025 21:22:23 +1300
Subject: [PATCH 14/32] chore: note about body height

---
 styles/global.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/styles/global.css b/styles/global.css
index c8db8ab..caf6ec0 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -5,7 +5,8 @@
 html, body {
   margin: 0;
   overflow: hidden;
-  height: 120dvh; /* TODO: Caclulate the actual height needed */
+  /* TODO: Calculate the actual height needed, as this causes problems on iOS Safari 26. */
+  height: 100dvh;
 }
 
 body {

From ba9fd862fdf3fc04094aa7662f2129f6d8453121 Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Mon, 27 Oct 2025 21:45:58 +1300
Subject: [PATCH 15/32] fix: remove console.log's

---
 scripts/controllers/xmb_controller.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index d297e85..b7ffc60 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -165,7 +165,6 @@ export default class extends Controller {
 
 
     #setXTranslation(adjustment) {
-        console.log(adjustment);
         const currTranslation = parseFloat(
             window.getComputedStyle(this.element).getPropertyValue('--x-translation')
         );
@@ -273,7 +272,6 @@ export default class extends Controller {
      * @param xTranslationAdjustment
      */
     #computeXAxisMask(zTgt, xTranslationAdjustment) {
-        console.log(xTranslationAdjustment);
         this.xHeadingTargets.forEach(h => {
             const headingRect = h.getBoundingClientRect();
             const overlap = this.#overlappingBounds(this.zItemBoundingClientRect, {

From 31475f5ffb6df39c88ab8ae3f457a5b3fd3df5b5 Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Wed, 29 Oct 2025 21:02:33 +1300
Subject: [PATCH 16/32] feat: handle scrolling outside the z-item

---
 scripts/controllers/xmb_controller.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index b7ffc60..d8e3cc2 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -85,13 +85,27 @@ export default class extends Controller {
     }
 
     /**
+     * Scrolls within the currently active z-item should cause the x-axis mask on the headings to be recomputed.
      *
      * @param event
      */
-    onItemScroll(event) {
+    scrollWithinItem(event) {
         this.#computeXAxisMask(event.target, 0);
     }
 
+    /**
+     * Because the page itself is not scrolled, but rather the z-item container is, we need to associate scroll events
+     * that occur outside this container with the z-item, and scroll the z-item accordingly.
+     *
+     * @param event
+     */
+    handleWheelOutsideItem(event) {
+        if (!this.#activeZTarget().contains(event.target)) {
+            this.#activeZTarget().scrollTop += event.deltaY;
+            this.#computeXAxisMask(event.target, 0);
+        }
+    }
+
     /**
      * Navigates rightwards using the right arrow key.
      */

From d3d1d9058087d274994ed2906ff347775d7775bf Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Wed, 29 Oct 2025 22:20:44 +1300
Subject: [PATCH 17/32] refactor: move non-specific XMB functions into utils.js

---
 scripts/controllers/xmb_controller.js | 52 +++++----------------------
 scripts/utils.js                      | 37 +++++++++++++++++++
 2 files changed, 45 insertions(+), 44 deletions(-)
 create mode 100644 scripts/utils.js

diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index d8e3cc2..57cde37 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -1,4 +1,5 @@
 import {Controller} from "@hotwired/stimulus";
+import {asPx, overlappingBounds} from "../utils";
 
 export default class extends Controller {
     static targets = ['x', 'xHeading', 'z'];
@@ -117,7 +118,7 @@ export default class extends Controller {
             this.#setXTranslation(-this.previousXTarget.getBoundingClientRect().width);
             this.#computeXAxisMask(this.#activeZTarget(), -this.previousXTarget.getBoundingClientRect().width);
         } else {
-            this.element.style.setProperty(`--x-translation-bounce`, this.#asPx(this.xAxisBounce * -1));
+            this.element.style.setProperty(`--x-translation-bounce`, asPx(this.xAxisBounce * -1));
             if (this.element.classList.contains(this.bounceClass)) {
                 this.element.classList.remove(this.bounceClass);
                 void this.element.offsetWidth;
@@ -138,7 +139,7 @@ export default class extends Controller {
             this.#setNewTarget('x', prev);
             this.#computeXAxisMask(this.#activeZTarget(), prevWidth);
         } else {
-            this.element.style.setProperty(`--x-translation-bounce`, this.#asPx(this.xAxisBounce));
+            this.element.style.setProperty(`--x-translation-bounce`, asPx(this.xAxisBounce));
             if (this.element.classList.contains(this.bounceClass)) {
                 this.element.classList.remove(this.bounceClass);
                 void this.element.offsetWidth;
@@ -157,7 +158,7 @@ export default class extends Controller {
             this.#setNewTarget('z', active.previousElementSibling);
             this.#computeXAxisMask(this.#activeZTarget(), 0);
         } else {
-            this.element.style.setProperty(`--z-translation-z-bounce`, this.#asPx(this.zAxisBounce * -1));
+            this.element.style.setProperty(`--z-translation-z-bounce`, asPx(this.zAxisBounce * -1));
             this.#appendBounceClass();
         }
     }
@@ -172,7 +173,7 @@ export default class extends Controller {
             this.#setNewTarget('z', active.nextElementSibling);
             this.#computeXAxisMask(this.#activeZTarget(), 0);
         } else {
-            this.element.style.setProperty(`--z-translation-z-bounce`, this.#asPx(this.zAxisBounce));
+            this.element.style.setProperty(`--z-translation-z-bounce`, asPx(this.zAxisBounce));
             this.#appendBounceClass();
         }
     }
@@ -224,21 +225,11 @@ export default class extends Controller {
     #computeYOffsetForZTarget(tgt) {
         if (tgt.style.top === '') {
             const offset = tgt.getBoundingClientRect().top;
-            tgt.style.top = this.#asPx(-offset);
-            tgt.style.paddingBlockStart = this.#asPx(offset);
+            tgt.style.top = asPx(-offset);
+            tgt.style.paddingBlockStart = asPx(offset);
         }
     }
 
-    /**
-     * Returns a value as a `pixel`-denominated string.
-     *
-     * @param value
-     * @returns {string}
-     */
-    #asPx(value) {
-        return `${value}px`;
-    }
-
     /**
      *
      */
@@ -251,33 +242,6 @@ export default class extends Controller {
         el.classList.add(this.bounceClass);
     }
 
-    /**
-     * Calculates how much of the `targetRect` is overlapped by the `overlappingRect`.
-     * Returns an object with top, right, bottom, and left values indicating the overlap distances.
-     *
-     * @param overlappingRect {DOMRect} The rectangle that may be overlapping the target
-     * @param targetRect {DOMRect} The target rectangle that we want to check for overlap
-     *
-     * @returns {{top: number, right: number, bottom: number, left: number}|null} Overlap measurements, or null if no
-     * overlap is present.
-     */
-    #overlappingBounds(overlappingRect, targetRect) {
-        // Is there any overlap at all?
-        if (overlappingRect.right < targetRect.left ||
-            overlappingRect.bottom < targetRect.top ||
-            overlappingRect.left > targetRect.right ||
-            overlappingRect.top > targetRect.bottom) {
-            return null;
-        }
-
-        const left = Math.min(targetRect.width, Math.max(0, overlappingRect.left - targetRect.left));
-        const right = Math.max(0, Math.min(targetRect.width, overlappingRect.right - targetRect.left));
-        const top = Math.max(0, overlappingRect.top - targetRect.top);
-        const bottom = Math.min(targetRect.height, targetRect.bottom - Math.max(0, targetRect.bottom - overlappingRect.bottom));
-
-        return { top, right, left, bottom };
-    }
-
     /**
      * Given a z-axis target, compute the mask that should be applied to the x-axis headings. If the z-axis target has
      * a non-zero scroll top value, then the mask should be applied to the headings.
@@ -288,7 +252,7 @@ export default class extends Controller {
     #computeXAxisMask(zTgt, xTranslationAdjustment) {
         this.xHeadingTargets.forEach(h => {
             const headingRect = h.getBoundingClientRect();
-            const overlap = this.#overlappingBounds(this.zItemBoundingClientRect, {
+            const overlap = overlappingBounds(this.zItemBoundingClientRect, {
                 left: headingRect.left + xTranslationAdjustment,
                 right: headingRect.right + xTranslationAdjustment,
                 top: headingRect.top,
diff --git a/scripts/utils.js b/scripts/utils.js
new file mode 100644
index 0000000..e17f7f5
--- /dev/null
+++ b/scripts/utils.js
@@ -0,0 +1,37 @@
+/**
+ * Returns a value as a `pixel`-denominated string.
+ *
+ * @param value
+ *
+ * @returns {string}
+ */
+export function asPx(value) {
+    return `${value}px`;
+}
+
+/**
+ * Calculates how much of the `targetRect` is overlapped by the `overlappingRect`. Returns an object with top, right,
+ * bottom, and left values indicating the overlap distances.
+ *
+ * @param overlappingRect {DOMRect} The rectangle that may be overlapping the target
+ * @param targetRect {DOMRect} The target rectangle that we want to check for overlap
+ *
+ * @returns {{top: number, right: number, bottom: number, left: number}|null} Overlap measurements, or null if no
+ * overlap is present.
+ */
+export function overlappingBounds(overlappingRect, targetRect) {
+    // Is there any overlap at all?
+    if (overlappingRect.right < targetRect.left ||
+        overlappingRect.bottom < targetRect.top ||
+        overlappingRect.left > targetRect.right ||
+        overlappingRect.top > targetRect.bottom) {
+        return null;
+    }
+
+    const left = Math.min(targetRect.width, Math.max(0, overlappingRect.left - targetRect.left));
+    const right = Math.max(0, Math.min(targetRect.width, overlappingRect.right - targetRect.left));
+    const top = Math.max(0, overlappingRect.top - targetRect.top);
+    const bottom = Math.min(targetRect.height, targetRect.bottom - Math.max(0, targetRect.bottom - overlappingRect.bottom));
+
+    return { top, right, left, bottom };
+}

From 2bb06cee7cec269553ad9243bb623111c7e0b022 Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Wed, 29 Oct 2025 22:45:17 +1300
Subject: [PATCH 18/32] refactor: xmb_controller.js tidy up

---
 scripts/controllers/xmb_controller.js | 61 +++++++++++++++------------
 1 file changed, 33 insertions(+), 28 deletions(-)

diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index 57cde37..ef631b9 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -7,8 +7,18 @@ export default class extends Controller {
     xAxisTargetDataAttr = 'data-xmb-x-active';
     zAxisTargetDataAttr = 'data-xmb-z-active';
     bounceClass = 'xmb--bounce';
-    zAxisBounce = 5;
-    xAxisBounce = 50;
+    bounce = {
+        x: {
+            distance: 50,
+            customProperty: '--x-translation-bounce',
+            elementFn: () => this.element
+        },
+        z: {
+            distance: 5,
+            customProperty: '--z-translation-z-bounce',
+            elementFn: () => this.activeXTarget.querySelector('.xmb__z-stack')
+        }
+    };
     zItemBoundingClientRect = null;
 
     get previousXTarget() {
@@ -118,12 +128,7 @@ export default class extends Controller {
             this.#setXTranslation(-this.previousXTarget.getBoundingClientRect().width);
             this.#computeXAxisMask(this.#activeZTarget(), -this.previousXTarget.getBoundingClientRect().width);
         } else {
-            this.element.style.setProperty(`--x-translation-bounce`, asPx(this.xAxisBounce * -1));
-            if (this.element.classList.contains(this.bounceClass)) {
-                this.element.classList.remove(this.bounceClass);
-                void this.element.offsetWidth;
-            }
-            this.element.classList.add(this.bounceClass);
+            this.#performAxisBounce('x', -1);
         }
     }
 
@@ -139,17 +144,13 @@ export default class extends Controller {
             this.#setNewTarget('x', prev);
             this.#computeXAxisMask(this.#activeZTarget(), prevWidth);
         } else {
-            this.element.style.setProperty(`--x-translation-bounce`, asPx(this.xAxisBounce));
-            if (this.element.classList.contains(this.bounceClass)) {
-                this.element.classList.remove(this.bounceClass);
-                void this.element.offsetWidth;
-            }
-            this.element.classList.add(this.bounceClass);
+            this.#performAxisBounce('x', 1);
         }
     }
 
     /**
-     * Navigates backwards to the target behind the user's camera using the up arrow key.
+     * Navigates backwards to the target behind the user's camera using the up arrow key. If there is no previous
+     * target, performs a bounce animation to signify the end of the axis to the user.
      */
     #zPositive() {
         const active = this.#activeZTarget();
@@ -158,13 +159,13 @@ export default class extends Controller {
             this.#setNewTarget('z', active.previousElementSibling);
             this.#computeXAxisMask(this.#activeZTarget(), 0);
         } else {
-            this.element.style.setProperty(`--z-translation-z-bounce`, asPx(this.zAxisBounce * -1));
-            this.#appendBounceClass();
+            this.#performAxisBounce('z', -1);
         }
     }
 
     /**
-     * Navigates forwards to the next target in front of the user's camera using the down arrow key.
+     * Navigates forwards to the next target in front of the user's camera using the down arrow key. If there is no
+     * next target, performs a bounce animation to signify the end of the axis to the user.
      */
     #zNegative() {
         const active = this.#activeZTarget();
@@ -173,17 +174,15 @@ export default class extends Controller {
             this.#setNewTarget('z', active.nextElementSibling);
             this.#computeXAxisMask(this.#activeZTarget(), 0);
         } else {
-            this.element.style.setProperty(`--z-translation-z-bounce`, asPx(this.zAxisBounce));
-            this.#appendBounceClass();
+            this.#performAxisBounce('z', 1);
         }
     }
 
-
     #setXTranslation(adjustment) {
         const currTranslation = parseFloat(
             window.getComputedStyle(this.element).getPropertyValue('--x-translation')
         );
-        this.element.style.setProperty(`--x-translation`, `${currTranslation + adjustment}px`);
+        this.element.style.setProperty(`--x-translation`, asPx(currTranslation + adjustment));
     }
 
     #setNewTarget(axis, tgt) {
@@ -231,10 +230,16 @@ export default class extends Controller {
     }
 
     /**
+     * When the end of an axis is reached, a bounce animation should be performed to signify this to the user. The
+     * parameters and properties of the bounce animation are contained within the `bounce` property of this controller.
      *
+     * @param axis
+     * @param dir
      */
-    #appendBounceClass() {
-        const el = this.activeXTarget.querySelector('.xmb__z-stack');
+    #performAxisBounce(axis, dir) {
+        this.element.style.setProperty(this.bounce[axis].customProperty, asPx(this.bounce[axis].distance * dir));
+        const el = this.bounce[axis].elementFn();
+
         if (el.classList.contains(this.bounceClass)) {
             el.classList.remove(this.bounceClass);
             void el.offsetWidth;
@@ -265,13 +270,13 @@ export default class extends Controller {
                 h.classList.add(`xmb__x-heading--masked`);
                 const maskTransparency = 100 - Math.min(100, zTgt.scrollTop);
                 h.style.setProperty(`--mask-transparency`, `${maskTransparency}%`);
-                h.style.setProperty('--overlap-left', `${overlap.left}px`);
-                h.style.setProperty('--overlap-right', `${overlap.right}px`);
+                h.style.setProperty('--overlap-left', asPx(overlap.left));
+                h.style.setProperty('--overlap-right', asPx(overlap.right));
             } else {
                 h.classList.remove(`xmb__x-heading--masked`);
                 h.style.setProperty(`--mask-transparency`, `100%`);
-                h.style.setProperty('--overlap-left', `0px`);
-                h.style.setProperty('--overlap-right', `0px`);
+                h.style.setProperty('--overlap-left', asPx(0));
+                h.style.setProperty('--overlap-right', asPx(0));
             }
         });
     }

From e801344e4b5d4d21bc4d75d14d00efcd14b8b9f6 Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Fri, 31 Oct 2025 21:29:40 +1300
Subject: [PATCH 19/32] fix: correct x mask computation on header click

---
 scripts/controllers/xmb_controller.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index ef631b9..82ea155 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -78,10 +78,14 @@ export default class extends Controller {
 
         if (prevTarget.compareDocumentPosition(xTarget) & Node.DOCUMENT_POSITION_FOLLOWING) {
             this.#setNewTarget('x', xTarget);
-            this.#setXTranslation(prevTarget.getBoundingClientRect().left - xTarget.getBoundingClientRect().left);
+            const translation = prevTarget.getBoundingClientRect().left - xTarget.getBoundingClientRect().left
+            this.#setXTranslation(translation);
+            this.#computeXAxisMask(this.#activeZTarget(), translation);
         } else {
-            this.#setXTranslation(prevTarget.getBoundingClientRect().left - xTarget.getBoundingClientRect().left);
+            const translation = prevTarget.getBoundingClientRect().left - xTarget.getBoundingClientRect().left;
+            this.#setXTranslation(translation);
             this.#setNewTarget('x', xTarget);
+            this.#computeXAxisMask(this.#activeZTarget(), translation);
         }
     }
 
@@ -125,8 +129,9 @@ export default class extends Controller {
 
         if (next) {
             this.#setNewTarget('x', next);
-            this.#setXTranslation(-this.previousXTarget.getBoundingClientRect().width);
-            this.#computeXAxisMask(this.#activeZTarget(), -this.previousXTarget.getBoundingClientRect().width);
+            const prevWidth = -this.previousXTarget.getBoundingClientRect().width;
+            this.#setXTranslation(prevWidth);
+            this.#computeXAxisMask(this.#activeZTarget(), prevWidth);
         } else {
             this.#performAxisBounce('x', -1);
         }

From a0d9aacb33791dabd8e734e3b79b2535d77fe787 Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Sat, 1 Nov 2025 10:54:33 +1300
Subject: [PATCH 20/32] fix: scrolling in the headers should not reveal the
 underlying headers

---
 scripts/controllers/xmb_controller.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index 82ea155..b7f13aa 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -117,7 +117,7 @@ export default class extends Controller {
     handleWheelOutsideItem(event) {
         if (!this.#activeZTarget().contains(event.target)) {
             this.#activeZTarget().scrollTop += event.deltaY;
-            this.#computeXAxisMask(event.target, 0);
+            this.#computeXAxisMask(this.#activeZTarget(), 0);
         }
     }
 

From bab7a9f00b302510cee70bd230e8b828cd770a70 Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Sat, 1 Nov 2025 12:02:05 +1300
Subject: [PATCH 21/32] refactor: tidy up

---
 scripts/utils.js  |  2 +-
 styles/global.css |  8 --------
 styles/xmb.css    | 18 +++++++++++++-----
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/scripts/utils.js b/scripts/utils.js
index e17f7f5..9bd966e 100644
--- a/scripts/utils.js
+++ b/scripts/utils.js
@@ -11,7 +11,7 @@ export function asPx(value) {
 
 /**
  * Calculates how much of the `targetRect` is overlapped by the `overlappingRect`. Returns an object with top, right,
- * bottom, and left values indicating the overlap distances.
+ * bottom, and left values indicating the boundaries of the overlap relative to the `targetRect`.
  *
  * @param overlappingRect {DOMRect} The rectangle that may be overlapping the target
  * @param targetRect {DOMRect} The target rectangle that we want to check for overlap
diff --git a/styles/global.css b/styles/global.css
index caf6ec0..838b7df 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -27,14 +27,6 @@ h1, h2, h3, h4, h5, h6 {
 h1 {
   margin-block-start: 1em;
   font-size: 8em;
-  cursor: pointer;
-  transition: transform 100ms ease;
-  -webkit-user-select: none;
-  user-select: none;
-
-  &:active {
-    transform: scale(0.95);
-  }
 }
 
 h2 {
diff --git a/styles/xmb.css b/styles/xmb.css
index 13c5564..66cb492 100644
--- a/styles/xmb.css
+++ b/styles/xmb.css
@@ -21,10 +21,12 @@
 }
 
 .xmb {
+  /* x-axis properties */
   --x-duration: 200ms;
   --x-translation: 0px;
   --x-translation-bounce: 50px;
 
+  /* z-axis properties */
   --z-duration: 500ms;
   --z-translation-z-bounce: -5px;
   --z-translation-x-scale-factor: -4;
@@ -35,7 +37,6 @@
   display: flex;
   transition: transform var(--x-duration) ease;
   transform: translateX(var(--x-translation));
-  animation-play-state: paused;
 
   &.xmb--bounce {
     animation: 200ms x-bounce ease-in-out forwards;
@@ -43,11 +44,20 @@
 }
 
 .xmb__x-heading, .xmb__z-heading {
-  font-weight: 500;
   color: oklch(0.8761 0 0);
+  cursor: pointer;
+  font-weight: 500;
+  transition: transform 100ms ease;
+  -webkit-user-select: none;
+  user-select: none;
+
+  &:active {
+    transform: scale(0.95);
+  }
 }
 
-/* Apply some inline end padding as when letter-spacing is contracted, the titled */
+/* Apply some inline end padding as when letter-spacing is contracted, the titles escape the bounding box and don't
+ have a mask properly applied. */
 .xmb__x-heading {
   padding-inline-end: 0.03em;
 }
@@ -57,7 +67,6 @@
 }
 
 .xmb__x-heading--masked {
-  pointer-events: none;
   mask: linear-gradient(
     90deg,
     oklch(0 0 0) 0%,
@@ -118,7 +127,6 @@ clickable due to the presence of `padding-block-start` on the `.xmb__z-stack` th
 
   .xmb__z-item[data-xmb-z-active] {
     pointer-events: auto;
-    display: block;
     opacity: 1;
     transition: transform var(--z-duration) ease, opacity var(--z-duration) ease;
   }

From 0c4e2acfabc3bf8d297c3043b847705364d48c58 Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Sat, 1 Nov 2025 13:03:15 +1300
Subject: [PATCH 22/32] fix: ensure headings cannot be clicked when z-item is
 scrolled upwards

---
 scripts/controllers/xmb_controller.js |  2 +-
 styles/xmb.css                        | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index b7f13aa..37a747e 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -271,7 +271,7 @@ export default class extends Controller {
                 height: headingRect.height
             });
 
-            if (overlap) {
+            if (overlap && this.#activeZTarget().scrollTop > 0) {
                 h.classList.add(`xmb__x-heading--masked`);
                 const maskTransparency = 100 - Math.min(100, zTgt.scrollTop);
                 h.style.setProperty(`--mask-transparency`, `${maskTransparency}%`);
diff --git a/styles/xmb.css b/styles/xmb.css
index 66cb492..fd7859b 100644
--- a/styles/xmb.css
+++ b/styles/xmb.css
@@ -104,6 +104,17 @@ clickable due to the presence of `padding-block-start` on the `.xmb__z-stack` th
 }
 
 [data-xmb-x-active] {
+
+  &:has(.xmb__x-heading--masked) {
+    z-index: 1;
+  }
+  
+  /* Set the z-index of the headings to be  */
+  .xmb__x-heading--masked {
+    position: relative;
+    z-index: -1;
+  }
+
   .xmb__x-heading, .xmb__z-heading {
     font-weight: 700;
     color: oklch(0 0 0);

From f92461864306df55356e2462cd60e936bc3e463f Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Tue, 4 Nov 2025 07:27:19 +1300
Subject: [PATCH 23/32] refactor: stimulus method naming

---
 index.html                            | 28 +++++++++++++--------------
 scripts/controllers/xmb_controller.js |  2 +-
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index b0c96e3..fb09679 100644
--- a/index.html
+++ b/index.html
@@ -103,7 +103,7 @@
     <section class="xmb__x-item" data-xmb-target="x" data-xmb-x-active>
         <h1 class="xmb__x-heading" data-action="click->xmb#handleHeaderClick" data-xmb-target="xHeading">Hello!</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
-            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active data-action="scroll->xmb#onItemScroll">
+            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active data-action="scroll->xmb#scrollWithinItem">
                 <h2 class="xmb__z-heading emoji-container">
                     <span class="emoji">👋</span>
                 </h2>
@@ -121,7 +121,7 @@ <h2 class="xmb__z-heading emoji-container">
                         Sail because of crow’s nest barrel parrot. Northerly heave or port –  oar. Ahoy or ocean cannon!</p>
                 </div>
             </section>
-            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#onItemScroll">
+            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#scrollWithinItem">
                 <h2 class="xmb__z-heading">Site Navigation</h2>
                 <p>This site uses an intersectional interface reminiscent of the XrossMediaBar (XMB) on the PlayStation Portable and PS3.</p>
                 <p>Navigate this site using your keyboard arrows, click the on-screen arrows with your mouse, or scroll to move through the Z-axis of the currently selected header.</p>
@@ -135,7 +135,7 @@ <h2 class="xmb__z-heading">Site Navigation</h2>
                     "Barnacle salt, starboard helm avast." Deck land brine easterly figurehead. Southerly bucko, gangplank bucko crow’s nest locker. Lover maybe sea spyglass salt? "Shipmate cannon, avast." Windward and the landlubber, treasure galley because of easterly the ol’ ale bilge.
                     Sail because of crow’s nest barrel parrot. Northerly heave or port –  oar. Ahoy or ocean cannon!</p>
             </section>
-            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#onItemScroll">
+            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#scrollWithinItem">
                 <h2 class="xmb__z-heading">Final</h2>
                 <p>Foo bar</p>
             </section>
@@ -145,15 +145,15 @@ <h2 class="xmb__z-heading">Final</h2>
     <section class="xmb__x-item" data-xmb-target="x">
         <h1 class="xmb__x-heading" data-action="click->xmb#handleHeaderClick" data-xmb-target="xHeading">Posts</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
-            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active data-action="scroll->xmb#onItemScroll">
+            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active data-action="scroll->xmb#scrollWithinItem">
                 <h2 class="xmb__z-heading">Recent Post A</h2>
                 <div class="xmb__z-item-container">
                 </div>
             </section>
-            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#onItemScroll">
+            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#scrollWithinItem">
                 <h2 class="xmb__z-heading">Recent Post B</h2>
             </section>
-            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#onItemScroll">
+            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#scrollWithinItem">
                 <h2 class="xmb__z-heading">Recent Post C</h2>
             </section>
         </div>
@@ -162,12 +162,12 @@ <h2 class="xmb__z-heading">Recent Post C</h2>
     <section class="xmb__x-item" data-xmb-target="x">
         <h1 class="xmb__x-heading" data-action="click->xmb#handleHeaderClick" data-xmb-target="xHeading">Hobbies</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
-            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active data-action="scroll->xmb#onItemScroll">
+            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active data-action="scroll->xmb#scrollWithinItem">
                 <h2 class="xmb__z-heading">Foo</h2>
                 <div class="xmb__z-item-container">
                 </div>
             </section>
-            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#onItemScroll">
+            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#scrollWithinItem">
                 <h2 class="xmb__z-heading">Bar</h2>
             </section>
         </div>
@@ -176,10 +176,10 @@ <h2 class="xmb__z-heading">Bar</h2>
     <section class="xmb__x-item" data-xmb-target="x">
         <h1 class="xmb__x-heading" data-action="click->xmb#handleHeaderClick" data-xmb-target="xHeading">Projects</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
-            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active data-action="scroll->xmb#onItemScroll">
+            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active data-action="scroll->xmb#scrollWithinItem">
                 <h2 class="xmb__z-heading">Foo</h2>
             </section>
-            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#onItemScroll">
+            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#scrollWithinItem">
                 <h2 class="xmb__z-heading">Bar</h2>
             </section>
         </div>
@@ -188,10 +188,10 @@ <h2 class="xmb__z-heading">Bar</h2>
     <section class="xmb__x-item" data-xmb-target="x">
         <h1 class="xmb__x-heading" data-action="click->xmb#handleHeaderClick" data-xmb-target="xHeading">Work</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
-            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active data-action="scroll->xmb#onItemScroll">
+            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active data-action="scroll->xmb#scrollWithinItem">
                 <h2 class="xmb__z-heading">Current</h2>
             </section>
-            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#onItemScroll">
+            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#scrollWithinItem">
                 <h2 class="xmb__z-heading">Contact</h2>
             </section>
         </div>
@@ -200,10 +200,10 @@ <h2 class="xmb__z-heading">Contact</h2>
     <section class="xmb__x-item" data-xmb-target="x">
         <h1 class="xmb__x-heading" data-action="click->xmb#handleHeaderClick" data-xmb-target="xHeading">About</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
-            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active data-action="scroll->xmb#onItemScroll">
+            <section class="xmb__z-item" data-xmb-target="z" data-xmb-z-active data-action="scroll->xmb#scrollWithinItem">
                 <h2 class="xmb__z-heading">Principles</h2>
             </section>
-            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#onItemScroll">
+            <section class="xmb__z-item" data-xmb-target="z" data-action="scroll->xmb#scrollWithinItem">
                 <h2 class="xmb__z-heading">Preferences</h2>
             </section>
         </div>
diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index 37a747e..436d1fa 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -105,7 +105,7 @@ export default class extends Controller {
      * @param event
      */
     scrollWithinItem(event) {
-        this.#computeXAxisMask(event.target, 0);
+        this.#computeXAxisMask(this.#activeZTarget(), 0);
     }
 
     /**

From 1d0479f1746ab1f2afc8c5806a8731f63a2db9ad Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Wed, 5 Nov 2025 22:33:20 +1300
Subject: [PATCH 24/32] refactor: improved masking

---
 index.html                            |  2 +-
 scripts/controllers/xmb_controller.js | 93 +++++++++++++++++++--------
 scripts/utils.js                      |  6 +-
 3 files changed, 71 insertions(+), 30 deletions(-)

diff --git a/index.html b/index.html
index fb09679..6c82146 100644
--- a/index.html
+++ b/index.html
@@ -99,7 +99,7 @@
     </defs>
 </svg>
 
-<main class="xmb" data-controller="xmb" data-action="keydown@window->xmb#handleKeydown animationend->xmb#bounceComplete">
+<main class="xmb" data-controller="xmb" data-action="keydown@window->xmb#keyNavigation wheel@window->xmb#wheelOutsideItem animationend->xmb#bounceComplete">
     <section class="xmb__x-item" data-xmb-target="x" data-xmb-x-active>
         <h1 class="xmb__x-heading" data-action="click->xmb#handleHeaderClick" data-xmb-target="xHeading">Hello!</h1>
         <div class="xmb__z-stack" data-action="animationend->xmb#bounceComplete">
diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index 436d1fa..bab376f 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -19,7 +19,6 @@ export default class extends Controller {
             elementFn: () => this.activeXTarget.querySelector('.xmb__z-stack')
         }
     };
-    zItemBoundingClientRect = null;
 
     get previousXTarget() {
         return this.activeXTarget.previousElementSibling;
@@ -34,15 +33,22 @@ export default class extends Controller {
     }
 
     /**
-     * On connection, compute the y-offset for the z-target, and pre-measure the boundingClientRect for the current
+     * On connection, compute the y-offset for the z-target, and pre-measure the bounding client DOMRect for the current
      * z-item before any transformations are applied.
      */
     connect() {
         this.#computeYOffsetForZTarget(this.#activeZTarget());
         this.zItemBoundingClientRect = this.#activeZTarget().getBoundingClientRect();
+        // A wrap in setTimeout ensures the mask computation occurs in the next task.
+        setTimeout(() => this.#computeXAxisMaskOverlap());
     }
 
-    handleKeydown(event) {
+    /**
+     * Support navigating the XMB via arrow keys.
+     *
+     * @param event
+     */
+    keyNavigation(event) {
         switch (event.key) {
             case 'ArrowUp':
                 event.preventDefault();
@@ -100,24 +106,24 @@ export default class extends Controller {
     }
 
     /**
-     * Scrolls within the currently active z-item should cause the x-axis mask on the headings to be recomputed.
-     *
-     * @param event
+     * Scrolls within the currently active z-item should cause the transparency of the x-axis mask to be recomputed
+     * only (and not the position of the mask itself).
      */
-    scrollWithinItem(event) {
-        this.#computeXAxisMask(this.#activeZTarget(), 0);
+    scrollWithinItem() {
+        this.#computeXAxisMaskTransparency();
     }
 
     /**
      * Because the page itself is not scrolled, but rather the z-item container is, we need to associate scroll events
-     * that occur outside this container with the z-item, and scroll the z-item accordingly.
+     * that occur outside this container with the z-item, and scroll the z-item accordingly. Once complete, we also
+     * need to recompute the x-axis mask transparency.
      *
      * @param event
      */
-    handleWheelOutsideItem(event) {
+    wheelOutsideItem(event) {
         if (!this.#activeZTarget().contains(event.target)) {
             this.#activeZTarget().scrollTop += event.deltaY;
-            this.#computeXAxisMask(this.#activeZTarget(), 0);
+            this.scrollWithinItem();
         }
     }
 
@@ -162,7 +168,7 @@ export default class extends Controller {
 
         if (active.previousElementSibling) {
             this.#setNewTarget('z', active.previousElementSibling);
-            this.#computeXAxisMask(this.#activeZTarget(), 0);
+            this.#computeXAxisMaskTransparency();
         } else {
             this.#performAxisBounce('z', -1);
         }
@@ -177,7 +183,7 @@ export default class extends Controller {
 
         if (active.nextElementSibling) {
             this.#setNewTarget('z', active.nextElementSibling);
-            this.#computeXAxisMask(this.#activeZTarget(), 0);
+            this.#computeXAxisMaskTransparency();
         } else {
             this.#performAxisBounce('z', 1);
         }
@@ -259,22 +265,12 @@ export default class extends Controller {
      * @param zTgt
      * @param xTranslationAdjustment
      */
-    #computeXAxisMask(zTgt, xTranslationAdjustment) {
+    #computeXAxisMask(zTgt, xTranslationAdjustment = 0) {
         this.xHeadingTargets.forEach(h => {
-            const headingRect = h.getBoundingClientRect();
-            const overlap = overlappingBounds(this.zItemBoundingClientRect, {
-                left: headingRect.left + xTranslationAdjustment,
-                right: headingRect.right + xTranslationAdjustment,
-                top: headingRect.top,
-                bottom: headingRect.bottom,
-                width: headingRect.width,
-                height: headingRect.height
-            });
-
-            if (overlap && this.#activeZTarget().scrollTop > 0) {
+            const overlap = this.#overlapForZItemHeading(h, xTranslationAdjustment);
+            if (overlap) {
                 h.classList.add(`xmb__x-heading--masked`);
-                const maskTransparency = 100 - Math.min(100, zTgt.scrollTop);
-                h.style.setProperty(`--mask-transparency`, `${maskTransparency}%`);
+                h.style.setProperty(`--mask-transparency`, `${100 - Math.min(100, zTgt.scrollTop)}%`);
                 h.style.setProperty('--overlap-left', asPx(overlap.left));
                 h.style.setProperty('--overlap-right', asPx(overlap.right));
             } else {
@@ -285,4 +281,47 @@ export default class extends Controller {
             }
         });
     }
+
+    #computeXAxisMaskOverlap() {
+        this.xHeadingTargets.forEach(h => {
+            const overlap = this.#overlapForZItemHeading(h);
+            if (overlap) {
+                h.classList.add(`xmb__x-heading--masked`);
+                h.style.setProperty(`--mask-transparency`, `100%`);
+                h.style.setProperty('--overlap-left', asPx(overlap.left));
+                h.style.setProperty('--overlap-right', asPx(overlap.right));
+            }
+        });
+    }
+
+    #computeXAxisMaskTransparency() {
+        if (this.#activeZTarget().scrollTop > 0) {
+            this.xHeadingTargets.forEach(h => {
+                h.classList.add(`xmb__x-heading--masked`);
+                h.style.setProperty(`--mask-transparency`, `${100 - Math.min(100, this.#activeZTarget().scrollTop)}%`);
+            });
+        } else {
+            this.xHeadingTargets.forEach(h => {
+                h.classList.remove(`xmb__x-heading--masked`);
+            });
+        }
+    }
+
+    /**
+     *
+     * @param heading
+     * @param adjustment
+     *
+     * @returns {{top: number, right: number, bottom: number, left: number}|null}
+     */
+    #overlapForZItemHeading(heading, adjustment = 0) {
+        const { left, right, top, bottom, width, height } = heading.getBoundingClientRect();
+        return overlappingBounds(
+            this.zItemBoundingClientRect,
+            { left: left + adjustment, right: right + adjustment, top, bottom, width, height }
+        );
+    }
 }
+
+// TODO: Add comments about why IntersectionObserver does not work for this use case.
+// TODO: Add comments about how x-axis navigation causes a `scroll` event to fire.
diff --git a/scripts/utils.js b/scripts/utils.js
index 9bd966e..f31b28a 100644
--- a/scripts/utils.js
+++ b/scripts/utils.js
@@ -13,8 +13,10 @@ export function asPx(value) {
  * Calculates how much of the `targetRect` is overlapped by the `overlappingRect`. Returns an object with top, right,
  * bottom, and left values indicating the boundaries of the overlap relative to the `targetRect`.
  *
- * @param overlappingRect {DOMRect} The rectangle that may be overlapping the target
- * @param targetRect {DOMRect} The target rectangle that we want to check for overlap
+ * @param overlappingRect {Pick<DOMRect, 'left' | 'right' | 'top' | 'bottom' | 'width' | 'height'>} The rectangle that
+ * may be overlapping the target
+ * @param targetRect {Pick<DOMRect, 'left' | 'right' | 'top' | 'bottom' | 'width' | 'height'>} The target rectangle that
+ * we want to check for overlap.
  *
  * @returns {{top: number, right: number, bottom: number, left: number}|null} Overlap measurements, or null if no
  * overlap is present.

From 78bb12464d34937bf3b7bb58386c867e7d5ebbfd Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Fri, 7 Nov 2025 12:56:51 +1300
Subject: [PATCH 25/32] refactor: x-axis mask management refinements

---
 scripts/controllers/xmb_controller.js | 52 +++++++++++++++------------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index bab376f..7f6ccef 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -40,7 +40,7 @@ export default class extends Controller {
         this.#computeYOffsetForZTarget(this.#activeZTarget());
         this.zItemBoundingClientRect = this.#activeZTarget().getBoundingClientRect();
         // A wrap in setTimeout ensures the mask computation occurs in the next task.
-        setTimeout(() => this.#computeXAxisMaskOverlap());
+        setTimeout(() => this.#computeXAxisMask(this.#activeZTarget()));
     }
 
     /**
@@ -81,18 +81,19 @@ export default class extends Controller {
     handleHeaderClick(event) {
         const prevTarget = this.activeXTarget;
         const xTarget = this.xTargets.find(xt => xt.contains(event.target));
+        let translation;
 
         if (prevTarget.compareDocumentPosition(xTarget) & Node.DOCUMENT_POSITION_FOLLOWING) {
             this.#setNewTarget('x', xTarget);
-            const translation = prevTarget.getBoundingClientRect().left - xTarget.getBoundingClientRect().left
+            translation = prevTarget.getBoundingClientRect().left - xTarget.getBoundingClientRect().left
             this.#setXTranslation(translation);
-            this.#computeXAxisMask(this.#activeZTarget(), translation);
         } else {
-            const translation = prevTarget.getBoundingClientRect().left - xTarget.getBoundingClientRect().left;
+            translation = prevTarget.getBoundingClientRect().left - xTarget.getBoundingClientRect().left;
             this.#setXTranslation(translation);
             this.#setNewTarget('x', xTarget);
-            this.#computeXAxisMask(this.#activeZTarget(), translation);
         }
+
+        this.#computeXAxisMask(this.#activeZTarget(), translation);
     }
 
     /**
@@ -262,6 +263,17 @@ export default class extends Controller {
      * Given a z-axis target, compute the mask that should be applied to the x-axis headings. If the z-axis target has
      * a non-zero scroll top value, then the mask should be applied to the headings.
      *
+     * Why do this and not use an `IntersectionObserver`? There are three main drawbacks to the `IntersectionObserver`
+     * approach:
+     *
+     * 1. Thresholds must be specified in the `IntersectionObserver` configuration for each percentage threshold that
+     * should trigger a callback, this means without an extraordinarily large number of thresholds, the mask might
+     * appear inaccurately.
+     * 2. The `IntersectionObserver` is reactive, responding to changes in intersection after they occur. This causes
+     * a visible delay in the mask effect when transitioning between x-axis items.
+     * 3. The viewport element must be a parent of the observed child elements. This isn't necessarily what we want as
+     * the "viewport" in our case should be the z-item, which is a child of a sibling of the observed elements.
+     *
      * @param zTgt
      * @param xTranslationAdjustment
      */
@@ -282,23 +294,22 @@ export default class extends Controller {
         });
     }
 
-    #computeXAxisMaskOverlap() {
-        this.xHeadingTargets.forEach(h => {
-            const overlap = this.#overlapForZItemHeading(h);
-            if (overlap) {
-                h.classList.add(`xmb__x-heading--masked`);
-                h.style.setProperty(`--mask-transparency`, `100%`);
-                h.style.setProperty('--overlap-left', asPx(overlap.left));
-                h.style.setProperty('--overlap-right', asPx(overlap.right));
-            }
-        });
-    }
-
+    /**
+     * Computes the transparency of the x-axis mask only, based on the scroll position of the currently active z-item.
+     *
+     * Although this function provides a computational speed-up for z-item navigations where the position of the mask
+     * would not need to be adjusted, it is also necessary to avoid a situation in Firefox where after an x-axis
+     * navigation, a `scroll` event is seemingly fired _after_ the key navigation. If the `scroll` handler were to use
+     * the full `#computeXAxisMask` method, the mask position would be incorrectly computed based on the previous x-axis
+     * item.
+     */
     #computeXAxisMaskTransparency() {
-        if (this.#activeZTarget().scrollTop > 0) {
+        const scrollTop = this.#activeZTarget().scrollTop;
+
+        if (scrollTop > 0) {
             this.xHeadingTargets.forEach(h => {
                 h.classList.add(`xmb__x-heading--masked`);
-                h.style.setProperty(`--mask-transparency`, `${100 - Math.min(100, this.#activeZTarget().scrollTop)}%`);
+                h.style.setProperty(`--mask-transparency`, `${100 - Math.min(100, scrollTop)}%`);
             });
         } else {
             this.xHeadingTargets.forEach(h => {
@@ -322,6 +333,3 @@ export default class extends Controller {
         );
     }
 }
-
-// TODO: Add comments about why IntersectionObserver does not work for this use case.
-// TODO: Add comments about how x-axis navigation causes a `scroll` event to fire.

From 65b858999890131a4ff5da176d7e51251afb6d01 Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Fri, 7 Nov 2025 17:50:38 +1300
Subject: [PATCH 26/32] feat: wasd key support

---
 scripts/controllers/xmb_controller.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index 7f6ccef..2dbf717 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -44,25 +44,34 @@ export default class extends Controller {
     }
 
     /**
-     * Support navigating the XMB via arrow keys.
+     * Support navigating the XMB via arrow keys or WASD. A modifier key or if `isComposing` is true will prevent
+     * navigation.
      *
      * @param event
      */
     keyNavigation(event) {
+        if (event.isComposing || event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) {
+            return;
+        }
+
         switch (event.key) {
             case 'ArrowUp':
+            case 'w':
                 event.preventDefault();
                 this.#zPositive();
                 break;
             case 'ArrowDown':
+            case 's':
                 event.preventDefault();
                 this.#zNegative();
                 break;
             case 'ArrowRight':
+            case 'd':
                 event.preventDefault();
                 this.#xPositive();
                 break;
             case 'ArrowLeft':
+            case 'a':
                 event.preventDefault();
                 this.#xNegative();
                 break;

From 7daec1d5b1aa81940ee36c0d2536495502c5bde0 Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Sat, 8 Nov 2025 08:38:09 +1300
Subject: [PATCH 27/32] fix: only set `--masked` if the scrollTop parameter of
 the z-target is greater than 0

---
 scripts/controllers/xmb_controller.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index 2dbf717..3b34c95 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -290,7 +290,9 @@ export default class extends Controller {
         this.xHeadingTargets.forEach(h => {
             const overlap = this.#overlapForZItemHeading(h, xTranslationAdjustment);
             if (overlap) {
-                h.classList.add(`xmb__x-heading--masked`);
+                if (zTgt.scrollTop > 0) {
+                    h.classList.add(`xmb__x-heading--masked`);
+                }
                 h.style.setProperty(`--mask-transparency`, `${100 - Math.min(100, zTgt.scrollTop)}%`);
                 h.style.setProperty('--overlap-left', asPx(overlap.left));
                 h.style.setProperty('--overlap-right', asPx(overlap.right));

From bc501bffd67f9eb9b45cbf63d61c88928156517f Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Sat, 8 Nov 2025 08:38:25 +1300
Subject: [PATCH 28/32] refactor: wrap mask transparency update in
 requestAnimationFrame

---
 scripts/controllers/xmb_controller.js | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/scripts/controllers/xmb_controller.js b/scripts/controllers/xmb_controller.js
index 3b34c95..ee436c6 100644
--- a/scripts/controllers/xmb_controller.js
+++ b/scripts/controllers/xmb_controller.js
@@ -315,18 +315,20 @@ export default class extends Controller {
      * item.
      */
     #computeXAxisMaskTransparency() {
-        const scrollTop = this.#activeZTarget().scrollTop;
+        window.requestAnimationFrame(() => {
+            const scrollTop = this.#activeZTarget().scrollTop;
 
-        if (scrollTop > 0) {
-            this.xHeadingTargets.forEach(h => {
-                h.classList.add(`xmb__x-heading--masked`);
-                h.style.setProperty(`--mask-transparency`, `${100 - Math.min(100, scrollTop)}%`);
-            });
-        } else {
-            this.xHeadingTargets.forEach(h => {
-                h.classList.remove(`xmb__x-heading--masked`);
-            });
-        }
+            if (scrollTop > 0) {
+                this.xHeadingTargets.forEach(h => {
+                    h.classList.add(`xmb__x-heading--masked`);
+                    h.style.setProperty(`--mask-transparency`, `${100 - Math.min(100, scrollTop)}%`);
+                });
+            } else {
+                this.xHeadingTargets.forEach(h => {
+                    h.classList.remove(`xmb__x-heading--masked`);
+                });
+            }
+        });
     }
 
     /**

From f151e614cd28e1683aafd2054a779b13c38426c0 Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Sat, 8 Nov 2025 08:44:09 +1300
Subject: [PATCH 29/32] chore: use custom property for heading adjustment value

---
 styles/xmb.css | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/styles/xmb.css b/styles/xmb.css
index fd7859b..55fc3d2 100644
--- a/styles/xmb.css
+++ b/styles/xmb.css
@@ -43,6 +43,15 @@
   }
 }
 
+.xmb__x-item {
+  --heading-adjustment: 0.03em;
+
+  /* Pull the heading leftwards by the same distance that padding is added to the right-hand side. */
+  &:not(:first-of-type) .xmb__x-heading {
+    margin-inline-start: calc(var(--heading-adjustment) * -1);
+  }
+}
+
 .xmb__x-heading, .xmb__z-heading {
   color: oklch(0.8761 0 0);
   cursor: pointer;
@@ -59,11 +68,7 @@
 /* Apply some inline end padding as when letter-spacing is contracted, the titles escape the bounding box and don't
  have a mask properly applied. */
 .xmb__x-heading {
-  padding-inline-end: 0.03em;
-}
-
-.xmb__x-item:not(:first-of-type) .xmb__x-heading {
-  margin-inline-start: -0.03em;
+  padding-inline-end: var(--heading-adjustment);
 }
 
 .xmb__x-heading--masked {

From 302a9ce8c76cbd78b90ca1230a38e6931a9b955d Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Sat, 8 Nov 2025 08:54:14 +1300
Subject: [PATCH 30/32] refactor: fix scrolling issue on iOS Safari where the
 z-index of the would change on scroll

---
 styles/xmb.css | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/styles/xmb.css b/styles/xmb.css
index 55fc3d2..07ed167 100644
--- a/styles/xmb.css
+++ b/styles/xmb.css
@@ -46,10 +46,18 @@
 .xmb__x-item {
   --heading-adjustment: 0.03em;
 
+  z-index: 1;
+
   /* Pull the heading leftwards by the same distance that padding is added to the right-hand side. */
   &:not(:first-of-type) .xmb__x-heading {
     margin-inline-start: calc(var(--heading-adjustment) * -1);
   }
+
+  /* When a masked heading is present, the containing `.xmb__x-item` should have a lower z-index value to ensure it
+   cannot be clicked when the z-item has been scrolled upwards. */
+  &:not([data-xmb-x-active]):has(.xmb__x-heading--masked) {
+    z-index: -1;
+  }
 }
 
 .xmb__x-heading, .xmb__z-heading {
@@ -109,12 +117,7 @@ clickable due to the presence of `padding-block-start` on the `.xmb__z-stack` th
 }
 
 [data-xmb-x-active] {
-
-  &:has(.xmb__x-heading--masked) {
-    z-index: 1;
-  }
-  
-  /* Set the z-index of the headings to be  */
+  /* Disallow clicking of the active x-item's title when the z-item has been scrolled upwards. */
   .xmb__x-heading--masked {
     position: relative;
     z-index: -1;

From ac0bd875cc2bbf42ccef8ded1e49b65932d19102 Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Sat, 8 Nov 2025 11:54:06 +1300
Subject: [PATCH 31/32] refactor: inline padding around z items

---
 styles/global.css    | 4 +++-
 styles/variables.css | 2 +-
 styles/xmb.css       | 6 ++++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/styles/global.css b/styles/global.css
index 838b7df..4941f5b 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -6,10 +6,12 @@ html, body {
   margin: 0;
   overflow: hidden;
   /* TODO: Calculate the actual height needed, as this causes problems on iOS Safari 26. */
-  height: 100dvh;
+  height: 100vh;
 }
 
 body {
+  --gutter: 0.5em;
+
   color: var(--primary-text--light-appearance);
   background-color: var(--primary-bg--light-appearance);
   font: 400 1.1em var(--text-typeface);
diff --git a/styles/variables.css b/styles/variables.css
index 2c0a32c..7fa4958 100644
--- a/styles/variables.css
+++ b/styles/variables.css
@@ -5,5 +5,5 @@
     --display-typeface: 'Neue Haas Grotesk Display Pro';
     --text-typeface: 'Neue Haas Grotesk Text Pro';
 
-    --content-width: 36em;
+    --content-width: 36rem;
 }
diff --git a/styles/xmb.css b/styles/xmb.css
index 07ed167..daa7db2 100644
--- a/styles/xmb.css
+++ b/styles/xmb.css
@@ -137,11 +137,17 @@ clickable due to the presence of `padding-block-start` on the `.xmb__z-stack` th
     top:0;
     padding-block-start: 0;
     width: 100vw;
+    padding-inline: 1rem;
     height: 100vh;
     scrollbar-width: none;
     overflow: scroll;
     max-width: var(--content-width);
     transition: transform var(--z-duration) ease, filter 500ms ease-out, opacity 500ms ease-out;
+
+    /* When the width exceeds the `--content-width` and 2rem's of inline padding, remove the inline padding. */
+    @media (min-width: 38rem) {
+      padding-inline: 0;
+    }
   }
 
   .xmb__z-item[data-xmb-z-active] {

From e1624c46df4a06004bdca22605e091d9b6207cb8 Mon Sep 17 00:00:00 2001
From: lukeify <5379845+lukeify@users.noreply.github.com>
Date: Sat, 8 Nov 2025 15:44:15 +1300
Subject: [PATCH 32/32] chore: move xmb.css

---
 styles/{ => components}/xmb.css | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename styles/{ => components}/xmb.css (100%)

diff --git a/styles/xmb.css b/styles/components/xmb.css
similarity index 100%
rename from styles/xmb.css
rename to styles/components/xmb.css