From 529b464b9b8bcfd9d1d8b7f6ec4e238a7ee7942b Mon Sep 17 00:00:00 2001
From: Scott Motte <mot@mot.la>
Date: Fri, 10 Apr 2026 08:54:39 -0700
Subject: [PATCH 01/17] fortress

---
 .../v1/components/three-fortress-rect.html    | 387 ++++++++++++++++++
 assets/css/main.css                           |   2 +-
 ops/index.md                                  |  24 +-
 3 files changed, 407 insertions(+), 6 deletions(-)
 create mode 100644 _includes/v1/components/three-fortress-rect.html

diff --git a/_includes/v1/components/three-fortress-rect.html b/_includes/v1/components/three-fortress-rect.html
new file mode 100644
index 0000000..a8387dc
--- /dev/null
+++ b/_includes/v1/components/three-fortress-rect.html
@@ -0,0 +1,387 @@
+<div
+  class="{{ include.class }} relative overflow-hidden"
+  data-ops-fortress
+  style="height: {{ include.height | default: '320px' }};"
+>
+  <canvas
+    class="block h-full w-full"
+    style="opacity: 0; -webkit-mask-image: radial-gradient(120% 112% at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,0.92) 74%, rgba(0,0,0,0.48) 85%, rgba(0,0,0,0.1) 93%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(120% 112% at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,0.92) 74%, rgba(0,0,0,0.48) 85%, rgba(0,0,0,0.1) 93%, rgba(0,0,0,0) 100%);"
+  ></canvas>
+</div>
+
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://unpkg.com/three@0.167.1/build/three.module.js",
+    "three/addons/": "https://unpkg.com/three@0.167.1/examples/jsm/"
+  }
+}
+</script>
+
+<script type="module">
+  import * as THREE from 'three';
+  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+  import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
+
+  const root = document.querySelector('[data-ops-fortress]:not([data-three-mounted])');
+  if (!root) {
+    throw new Error('ops-fortress mount target not found');
+  }
+
+  root.setAttribute('data-three-mounted', 'true');
+  const canvas = root.querySelector('canvas');
+  canvas.style.transition = 'opacity 300ms ease-out';
+
+  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+  const scene = new THREE.Scene();
+  const desktopMinFrustumSize = 4.4;
+  const mobileMinFrustumSize = 1.95;
+  const includeZoom = Number({{ include.zoom | default: 1 }});
+  const zoomFactor = Number.isFinite(includeZoom) && includeZoom > 0 ? includeZoom : 1;
+  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 100);
+
+  scene.background = null;
+  renderer.setClearColor(0x000000, 0);
+  camera.up.set(0, 1, 0);
+  camera.position.set(0, 6, 0.001);
+  camera.lookAt(0, 0.74, 0);
+
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+  renderer.outputColorSpace = THREE.SRGBColorSpace;
+  renderer.toneMapping = THREE.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 1.26;
+  renderer.physicallyCorrectLights = true;
+
+  const pmremGenerator = new THREE.PMREMGenerator(renderer);
+  const envRT = pmremGenerator.fromScene(new RoomEnvironment(), 0.04);
+  scene.environment = envRT.texture;
+  pmremGenerator.dispose();
+
+  scene.add(new THREE.AmbientLight(0xffffff, 0.65));
+  const keyLight = new THREE.DirectionalLight(0xbfe3ff, 2.8);
+  keyLight.position.set(3, 5, 4);
+  scene.add(keyLight);
+  const rimLight = new THREE.DirectionalLight(0xffffff, 2.2);
+  rimLight.position.set(-4, 2.5, -3);
+  scene.add(rimLight);
+
+  const boxGeometry = new THREE.BoxGeometry(0.12, 0.1662, 0.12);
+  const edgeGeometry = new THREE.EdgesGeometry(boxGeometry);
+  const edgeHighlightMaterial = new THREE.LineBasicMaterial({
+    color: 0xc8d0de,
+    transparent: true,
+    opacity: 0.16,
+    toneMapped: false
+  });
+  const glowShellMaterial = new THREE.MeshBasicMaterial({
+    color: 0xe7c96f,
+    transparent: true,
+    opacity: 0.12,
+    blending: THREE.AdditiveBlending,
+    side: THREE.BackSide,
+    depthWrite: false,
+    toneMapped: false
+  });
+
+  const labelTextureCache = new Map();
+  const materialCache = new Map();
+  const faceMaterials = [];
+  const baseEnvMapIntensity = 1.35;
+  const baseRoughness = 0.055;
+  const baseThickness = 1.1;
+  const baseEdgeOpacity = edgeHighlightMaterial.opacity;
+  const baseGlowOpacity = glowShellMaterial.opacity;
+
+  const isMobileViewport = () => window.matchMedia('(max-width: 767px)').matches;
+  const fortifyDelayMs = 700;
+  let fortifyMix = 0;
+  let fortifyTarget = 0;
+  let hoverTimerId = null;
+  let pointerOverFortress = false;
+
+  const buildLabelTexture = (label) => {
+    const c = document.createElement('canvas');
+    c.width = 128;
+    c.height = 128;
+    const ctx = c.getContext('2d');
+    ctx.clearRect(0, 0, 128, 128);
+    ctx.fillStyle = 'rgba(99, 104, 113, 0.24)';
+    ctx.fillRect(0, 0, 128, 128);
+    ctx.fillStyle = 'rgba(217, 191, 117, 0.82)';
+    ctx.font = '500 16px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(label, 64, 64);
+    const texture = new THREE.CanvasTexture(c);
+    texture.colorSpace = THREE.SRGBColorSpace;
+    texture.needsUpdate = true;
+    return texture;
+  };
+
+  const getLabelTexture = (label) => {
+    if (!labelTextureCache.has(label)) {
+      labelTextureCache.set(label, buildLabelTexture(label));
+    }
+    return labelTextureCache.get(label);
+  };
+
+  const getFaceMaterial = (label) => {
+    if (!materialCache.has(label)) {
+      materialCache.set(label, new THREE.MeshPhysicalMaterial({
+        color: 0xfff7e3,
+        transparent: true,
+        opacity: 0.55,
+        map: getLabelTexture(label),
+        metalness: 0.0,
+        roughness: baseRoughness,
+        transmission: 0.94,
+        thickness: baseThickness,
+        ior: 1.5,
+        clearcoat: 1.0,
+        clearcoatRoughness: 0.05,
+        attenuationColor: 0x7a8394,
+        attenuationDistance: 1.6,
+        envMapIntensity: baseEnvMapIntensity
+      }));
+    }
+    return materialCache.get(label);
+  };
+
+  const createFaceMaterialVariant = (label, roughnessOffset, thicknessOffset, faceRole) => {
+    const mat = getFaceMaterial(label).clone();
+    mat.roughness = THREE.MathUtils.clamp(baseRoughness + roughnessOffset, 0.006, 0.06);
+    mat.thickness = THREE.MathUtils.clamp(baseThickness + thicknessOffset, 1.35, 1.9);
+    if (faceRole === 'top') {
+      mat.opacity = 0.14;
+      mat.transmission = 0.99;
+      mat.roughness = Math.min(0.07, mat.roughness + 0.01);
+      mat.thickness = 0.18;
+      mat.clearcoatRoughness = 0.05;
+    } else if (faceRole === 'bottom') {
+      mat.opacity = 0.28;
+      mat.transmission = 0.88;
+      mat.thickness = 0.5;
+      mat.clearcoatRoughness = 0.06;
+    } else {
+      mat.opacity = 0.25;
+      mat.transmission = 0.98;
+      mat.thickness = 0.42;
+      mat.clearcoatRoughness = 0.04;
+    }
+    mat.userData.baseOpacity = mat.opacity;
+    mat.userData.baseEnvMapIntensity = mat.envMapIntensity;
+    mat.userData.baseTransmission = mat.transmission;
+    mat.userData.baseThickness = mat.thickness;
+    faceMaterials.push(mat);
+    return mat;
+  };
+
+  const createBox = ({ position = [0, 0.74, 0] } = {}) => {
+    const roughnessOffset = (Math.random() - 0.5) * 0.02;
+    const thicknessOffset = (Math.random() - 0.5) * 0.18;
+    const mesh = new THREE.Mesh(boxGeometry, [
+      createFaceMaterialVariant('s1', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('s2', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('t', roughnessOffset, thicknessOffset, 'top'),
+      createFaceMaterialVariant('b', roughnessOffset, thicknessOffset, 'bottom'),
+      createFaceMaterialVariant('s3', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('s4', roughnessOffset, thicknessOffset, 'side')
+    ]);
+    mesh.position.set(position[0], position[1], position[2]);
+
+    const edgeLines = new THREE.LineSegments(edgeGeometry, edgeHighlightMaterial);
+    edgeLines.renderOrder = 2;
+    mesh.add(edgeLines);
+
+    const glowShell = new THREE.Mesh(boxGeometry, glowShellMaterial);
+    glowShell.scale.set(1.12, 1.12, 1.12);
+    glowShell.renderOrder = 0;
+    mesh.add(glowShell);
+    return mesh;
+  };
+
+  const fortressGroup = new THREE.Group();
+  const blocks = [];
+  const raycaster = new THREE.Raycaster();
+  const pointer = new THREE.Vector2();
+
+  const pitch = 0.125;
+  const yLift = 0.152;
+  const baseY = 0.36;
+
+  const addStack = (x, z, height) => {
+    for (let level = 0; level < height; level += 1) {
+      const box = createBox({ position: [x * pitch, baseY + level * yLift, z * pitch] });
+      blocks.push(box);
+      fortressGroup.add(box);
+    }
+  };
+
+  for (let x = -9; x <= 9; x += 1) {
+    for (let z = -9; z <= 9; z += 1) {
+      const edge = Math.max(Math.abs(x), Math.abs(z)) === 9;
+      if (!edge) continue;
+
+      const isGate = z === 9 && x >= -1 && x <= 1;
+      if (isGate) continue;
+
+      let wallHeight = 5;
+      const isCorner = Math.abs(x) === 9 && Math.abs(z) === 9;
+      if (isCorner) wallHeight = 7;
+      addStack(x, z, wallHeight);
+
+      const crenel = ((x + z) & 1) === 0;
+      if (crenel && !isCorner) {
+        addStack(x, z, wallHeight + 1);
+      }
+    }
+  }
+
+  for (let x = -7; x <= 7; x += 1) {
+    addStack(x, -7, 2);
+  }
+  for (let z = -6; z <= -2; z += 1) {
+    addStack(-7, z, 2);
+    addStack(7, z, 2);
+  }
+
+  for (let x = -2; x <= 2; x += 1) {
+    for (let z = -2; z <= 2; z += 1) {
+      const keepHeight = (Math.abs(x) <= 1 && Math.abs(z) <= 1) ? 7 : 6;
+      addStack(x, z, keepHeight);
+    }
+  }
+
+  for (let x = -1; x <= 1; x += 1) {
+    addStack(x, 8, 3);
+  }
+  addStack(-2, 9, 4);
+  addStack(2, 9, 4);
+
+  fortressGroup.rotation.x = 0.215;
+  fortressGroup.rotation.y = -0.17;
+  fortressGroup.rotation.z = -0.03;
+  const fortressBaseY = fortressGroup.position.y;
+  scene.add(fortressGroup);
+
+  const bounds = new THREE.Box3().setFromObject(fortressGroup);
+  const fortressCenter = new THREE.Vector3();
+  const fortressSize = new THREE.Vector3();
+  bounds.getCenter(fortressCenter);
+  bounds.getSize(fortressSize);
+  const fitFrustumSize = Math.max(fortressSize.x, fortressSize.y, fortressSize.z) * 1.14;
+
+  camera.position.set(fortressCenter.x + 1.48, fortressCenter.y + 1.84, fortressCenter.z + 3.1);
+  camera.lookAt(fortressCenter.x - 0.03, fortressCenter.y + 0.48, fortressCenter.z + 0.3);
+
+  const controls = new OrbitControls(camera, canvas);
+  controls.enableDamping = false;
+  controls.enableZoom = false;
+  controls.enablePan = false;
+  controls.enableRotate = false;
+  controls.autoRotate = false;
+  controls.target.set(fortressCenter.x, fortressCenter.y + 0.4, fortressCenter.z);
+  controls.update();
+
+  const resize = () => {
+    const width = root.clientWidth || 1;
+    const height = root.clientHeight || 1;
+    const aspect = width / height;
+    const minFrustumSize = isMobileViewport() ? mobileMinFrustumSize : desktopMinFrustumSize;
+    const fitSize = fitFrustumSize * (isMobileViewport() ? 0.58 : 1);
+    const baseFrustumSize = Math.max(minFrustumSize, fitSize);
+    const frustumSize = baseFrustumSize / zoomFactor;
+
+    camera.left = -0.5 * frustumSize * aspect;
+    camera.right = 0.5 * frustumSize * aspect;
+    camera.top = 0.5 * frustumSize;
+    camera.bottom = -0.5 * frustumSize;
+    camera.updateProjectionMatrix();
+    renderer.setSize(width, height, false);
+    controls.enableRotate = false;
+  };
+
+  const setFortifyState = (enabled) => {
+    fortifyTarget = enabled ? 1 : 0;
+  };
+
+  const clearHoverTimer = () => {
+    if (hoverTimerId !== null) {
+      clearTimeout(hoverTimerId);
+      hoverTimerId = null;
+    }
+  };
+
+  const setPointerFromEvent = (event) => {
+    const rect = canvas.getBoundingClientRect();
+    pointer.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+    pointer.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+  };
+
+  const isPointerIntersectingFortress = (event) => {
+    setPointerFromEvent(event);
+    raycaster.setFromCamera(pointer, camera);
+    return raycaster.intersectObjects(blocks, false).length > 0;
+  };
+
+  canvas.addEventListener('pointermove', (event) => {
+    if (event.pointerType === 'touch') {
+      pointerOverFortress = false;
+      clearHoverTimer();
+      setFortifyState(false);
+      return;
+    }
+    pointerOverFortress = isPointerIntersectingFortress(event);
+    if (pointerOverFortress) {
+      if (hoverTimerId === null && fortifyTarget < 1) {
+        hoverTimerId = setTimeout(() => {
+          hoverTimerId = null;
+          if (pointerOverFortress) {
+            setFortifyState(true);
+          }
+        }, fortifyDelayMs);
+      }
+    } else {
+      clearHoverTimer();
+      setFortifyState(false);
+    }
+  });
+
+  canvas.addEventListener('pointerleave', () => {
+    pointerOverFortress = false;
+    clearHoverTimer();
+    setFortifyState(false);
+  });
+
+  resize();
+  if ('ResizeObserver' in window) {
+    const observer = new ResizeObserver(resize);
+    observer.observe(root);
+  } else {
+    window.addEventListener('resize', resize);
+  }
+
+  const animate = () => {
+    fortifyMix = THREE.MathUtils.lerp(fortifyMix, fortifyTarget, 0.12);
+
+    for (let i = 0; i < faceMaterials.length; i += 1) {
+      const mat = faceMaterials[i];
+      mat.opacity = Math.min(0.74, mat.userData.baseOpacity * (1 + fortifyMix * 0.95));
+      mat.envMapIntensity = mat.userData.baseEnvMapIntensity * (1 + fortifyMix * 0.58);
+      mat.transmission = THREE.MathUtils.clamp(mat.userData.baseTransmission * (1 - fortifyMix * 0.38), 0.46, 1.0);
+      mat.thickness = mat.userData.baseThickness * (1 + fortifyMix * 0.42);
+    }
+    edgeHighlightMaterial.opacity = Math.min(0.62, baseEdgeOpacity * (1 + fortifyMix * 2.1));
+    glowShellMaterial.opacity = Math.min(0.42, baseGlowOpacity * (1 + fortifyMix * 1.4));
+    fortressGroup.scale.setScalar(1);
+    fortressGroup.position.y = fortressBaseY;
+
+    controls.update();
+    renderer.render(scene, camera);
+    if (canvas.style.opacity !== '1') {
+      canvas.style.opacity = '1';
+    }
+    requestAnimationFrame(animate);
+  };
+  animate();
+</script>
diff --git a/assets/css/main.css b/assets/css/main.css
index 77010ba..a07c308 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -735,7 +735,7 @@ width: 100%;
     position: static;
   }
 
-  .feature-card-head {
+.feature-card-head {
     flex-direction: column;
     align-items: flex-start;
   }
diff --git a/ops/index.md b/ops/index.md
index 10dabb6..6d05ca8 100644
--- a/ops/index.md
+++ b/ops/index.md
@@ -2,9 +2,23 @@
 title: "Dotenvx Ops"
 ---
 
-<main class="min-h-[50vh] w-full flex flex-col gap-3 items-center justify-center px-6">
-  <p class="text-lg sm:text-xl text-zinc-900 dark:text-zinc-100 tracking-tight">
-    <strong class="font-black">dotenvx-ops.</strong> ⛨  ARMORED KEYS: Harden your private keys.
-  </p>
-  <P class="">coming soon</p>
+<main class="min-h-[65vh] w-full max-w-6xl mx-auto px-6 py-14 md:py-20">
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-14 items-center">
+    <section>
+      <p class="text-xs uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400">Dotenvx Ops</p>
+      <h1 class="mt-4 text-5xl md:text-6xl font-canela font-normal tracking-tight text-zinc-900 dark:text-zinc-100 leading-[0.98]">
+        Secrets, under guard.
+      </h1>
+      <p class="mt-4 text-lg text-zinc-700 dark:text-zinc-300 max-w-[36ch]">
+        Inspired by the ghost key on the home page, but forged into a fortress for Ops.
+      </p>
+      <p class="mt-6 inline-flex items-center rounded-full border border-zinc-300 dark:border-zinc-700 px-4 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
+        Coming soon
+      </p>
+    </section>
+
+    <section class="flex justify-center lg:justify-end">
+      {% include v1/components/three-fortress-rect.html height="170px" class="w-full max-w-[24rem] md:max-w-[27rem] md:!h-[460px]" %}
+    </section>
+  </div>
 </main>

From dc5c4bb5b0017696e6d34c99ff95932842397d68 Mon Sep 17 00:00:00 2001
From: Scott Motte <mot@mot.la>
Date: Fri, 10 Apr 2026 15:10:02 -0700
Subject: [PATCH 02/17] citadel

---
 .../v1/components/three-citadel-rect.html     | 401 ++++++++++++++++++
 .../components/three-fortress-gated-rect.html | 355 ++++++++++++++++
 .../v1/components/three-fortress-rect.html    |   2 +
 ops/index.md                                  |   4 +-
 4 files changed, 761 insertions(+), 1 deletion(-)
 create mode 100644 _includes/v1/components/three-citadel-rect.html
 create mode 100644 _includes/v1/components/three-fortress-gated-rect.html

diff --git a/_includes/v1/components/three-citadel-rect.html b/_includes/v1/components/three-citadel-rect.html
new file mode 100644
index 0000000..e77a36e
--- /dev/null
+++ b/_includes/v1/components/three-citadel-rect.html
@@ -0,0 +1,401 @@
+<div
+  class="{{ include.class }} relative overflow-hidden"
+  data-ops-citadel
+  style="height: {{ include.height | default: '320px' }};"
+>
+  <canvas
+    class="block h-full w-full"
+    style="opacity: 0; -webkit-mask-image: radial-gradient(120% 112% at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,0.92) 74%, rgba(0,0,0,0.48) 85%, rgba(0,0,0,0.1) 93%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(120% 112% at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,0.92) 74%, rgba(0,0,0,0.48) 85%, rgba(0,0,0,0.1) 93%, rgba(0,0,0,0) 100%);"
+  ></canvas>
+</div>
+
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://unpkg.com/three@0.167.1/build/three.module.js",
+    "three/addons/": "https://unpkg.com/three@0.167.1/examples/jsm/"
+  }
+}
+</script>
+
+<script type="module">
+  import * as THREE from 'three';
+  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+  import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
+
+  const root = document.querySelector('[data-ops-citadel]:not([data-three-mounted])');
+  if (!root) {
+    throw new Error('ops-citadel mount target not found');
+  }
+
+  root.setAttribute('data-three-mounted', 'true');
+  const canvas = root.querySelector('canvas');
+  canvas.style.transition = 'opacity 300ms ease-out';
+
+  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+  const scene = new THREE.Scene();
+  const desktopMinFrustumSize = 4.4;
+  const mobileMinFrustumSize = 1.95;
+  const includeZoom = Number({{ include.zoom | default: 1 }});
+  const zoomFactor = Number.isFinite(includeZoom) && includeZoom > 0 ? includeZoom : 1;
+  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 100);
+
+  scene.background = null;
+  renderer.setClearColor(0x000000, 0);
+  camera.up.set(0, 1, 0);
+  camera.position.set(0, 6, 0.001);
+  camera.lookAt(0, 0.74, 0);
+
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+  renderer.outputColorSpace = THREE.SRGBColorSpace;
+  renderer.toneMapping = THREE.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 1.26;
+  renderer.physicallyCorrectLights = true;
+
+  const pmremGenerator = new THREE.PMREMGenerator(renderer);
+  const envRT = pmremGenerator.fromScene(new RoomEnvironment(), 0.04);
+  scene.environment = envRT.texture;
+  pmremGenerator.dispose();
+
+  scene.add(new THREE.AmbientLight(0xffffff, 0.65));
+  const keyLight = new THREE.DirectionalLight(0xbfe3ff, 2.8);
+  keyLight.position.set(3, 5, 4);
+  scene.add(keyLight);
+  const rimLight = new THREE.DirectionalLight(0xffffff, 2.2);
+  rimLight.position.set(-4, 2.5, -3);
+  scene.add(rimLight);
+
+  const boxGeometry = new THREE.BoxGeometry(0.12, 0.1662, 0.12);
+  const edgeGeometry = new THREE.EdgesGeometry(boxGeometry);
+  const edgeHighlightMaterial = new THREE.LineBasicMaterial({
+    color: 0xc8d0de,
+    transparent: true,
+    opacity: 0.16,
+    toneMapped: false
+  });
+  const glowShellMaterial = new THREE.MeshBasicMaterial({
+    color: 0xe7c96f,
+    transparent: true,
+    opacity: 0.12,
+    blending: THREE.AdditiveBlending,
+    side: THREE.BackSide,
+    depthWrite: false,
+    toneMapped: false
+  });
+
+  const labelTextureCache = new Map();
+  const materialCache = new Map();
+  const faceMaterials = [];
+  const baseEnvMapIntensity = 1.35;
+  const baseRoughness = 0.055;
+  const baseThickness = 1.1;
+  const baseEdgeOpacity = edgeHighlightMaterial.opacity;
+  const baseGlowOpacity = glowShellMaterial.opacity;
+
+  const isMobileViewport = () => window.matchMedia('(max-width: 767px)').matches;
+  const fortifyDelayMs = 700;
+  let fortifyMix = 0;
+  let fortifyTarget = 0;
+  let hoverTimerId = null;
+  let pointerOverFortress = false;
+
+  const buildLabelTexture = (label) => {
+    const c = document.createElement('canvas');
+    c.width = 128;
+    c.height = 128;
+    const ctx = c.getContext('2d');
+    ctx.clearRect(0, 0, 128, 128);
+    ctx.fillStyle = 'rgba(99, 104, 113, 0.24)';
+    ctx.fillRect(0, 0, 128, 128);
+    ctx.fillStyle = 'rgba(217, 191, 117, 0.82)';
+    ctx.font = '500 16px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(label, 64, 64);
+    const texture = new THREE.CanvasTexture(c);
+    texture.colorSpace = THREE.SRGBColorSpace;
+    texture.needsUpdate = true;
+    return texture;
+  };
+
+  const getLabelTexture = (label) => {
+    if (!labelTextureCache.has(label)) {
+      labelTextureCache.set(label, buildLabelTexture(label));
+    }
+    return labelTextureCache.get(label);
+  };
+
+  const getFaceMaterial = (label) => {
+    if (!materialCache.has(label)) {
+      materialCache.set(label, new THREE.MeshPhysicalMaterial({
+        color: 0xfff7e3,
+        transparent: true,
+        opacity: 0.55,
+        map: getLabelTexture(label),
+        metalness: 0.0,
+        roughness: baseRoughness,
+        transmission: 0.94,
+        thickness: baseThickness,
+        ior: 1.5,
+        clearcoat: 1.0,
+        clearcoatRoughness: 0.05,
+        attenuationColor: 0x7a8394,
+        attenuationDistance: 1.6,
+        envMapIntensity: baseEnvMapIntensity
+      }));
+    }
+    return materialCache.get(label);
+  };
+
+  const createFaceMaterialVariant = (label, roughnessOffset, thicknessOffset, faceRole) => {
+    const mat = getFaceMaterial(label).clone();
+    mat.roughness = THREE.MathUtils.clamp(baseRoughness + roughnessOffset, 0.006, 0.06);
+    mat.thickness = THREE.MathUtils.clamp(baseThickness + thicknessOffset, 1.35, 1.9);
+    if (faceRole === 'top') {
+      mat.opacity = 0.14;
+      mat.transmission = 0.99;
+      mat.roughness = Math.min(0.07, mat.roughness + 0.01);
+      mat.thickness = 0.18;
+      mat.clearcoatRoughness = 0.05;
+    } else if (faceRole === 'bottom') {
+      mat.opacity = 0.28;
+      mat.transmission = 0.88;
+      mat.thickness = 0.5;
+      mat.clearcoatRoughness = 0.06;
+    } else {
+      mat.opacity = 0.25;
+      mat.transmission = 0.98;
+      mat.thickness = 0.42;
+      mat.clearcoatRoughness = 0.04;
+    }
+    mat.userData.baseOpacity = mat.opacity;
+    mat.userData.baseEnvMapIntensity = mat.envMapIntensity;
+    mat.userData.baseTransmission = mat.transmission;
+    mat.userData.baseThickness = mat.thickness;
+    faceMaterials.push(mat);
+    return mat;
+  };
+
+  const createBox = ({ position = [0, 0.74, 0] } = {}) => {
+    const roughnessOffset = (Math.random() - 0.5) * 0.02;
+    const thicknessOffset = (Math.random() - 0.5) * 0.18;
+    const mesh = new THREE.Mesh(boxGeometry, [
+      createFaceMaterialVariant('s1', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('s2', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('t', roughnessOffset, thicknessOffset, 'top'),
+      createFaceMaterialVariant('b', roughnessOffset, thicknessOffset, 'bottom'),
+      createFaceMaterialVariant('s3', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('s4', roughnessOffset, thicknessOffset, 'side')
+    ]);
+    mesh.position.set(position[0], position[1], position[2]);
+
+    const edgeLines = new THREE.LineSegments(edgeGeometry, edgeHighlightMaterial);
+    edgeLines.renderOrder = 2;
+    mesh.add(edgeLines);
+
+    const glowShell = new THREE.Mesh(boxGeometry, glowShellMaterial);
+    glowShell.scale.set(1.12, 1.12, 1.12);
+    glowShell.renderOrder = 0;
+    mesh.add(glowShell);
+    return mesh;
+  };
+
+  const fortressGroup = new THREE.Group();
+  const blocks = [];
+  const raycaster = new THREE.Raycaster();
+  const pointer = new THREE.Vector2();
+
+  const pitch = 0.125;
+  const yLift = 0.152;
+  const baseY = 0.36;
+
+  const addStack = (x, z, height) => {
+    for (let level = 0; level < height; level += 1) {
+      const box = createBox({ position: [x * pitch, baseY + level * yLift, z * pitch] });
+      blocks.push(box);
+      fortressGroup.add(box);
+    }
+  };
+
+  for (let x = -9; x <= 9; x += 1) {
+    for (let z = -9; z <= 9; z += 1) {
+      const edge = Math.max(Math.abs(x), Math.abs(z)) === 9;
+      if (!edge) continue;
+
+      const gateGap = z === 9 && x >= -1 && x <= 1;
+      if (gateGap) continue;
+
+      const corner = Math.abs(x) === 9 && Math.abs(z) === 9;
+      const wallHeight = corner ? 7 : 4;
+      addStack(x, z, wallHeight);
+
+      if (!corner && ((x + z) & 1) === 0) {
+        addStack(x, z, wallHeight + 1);
+      }
+    }
+  }
+
+  for (let x = -6; x <= 6; x += 1) {
+    for (let z = -6; z <= 6; z += 1) {
+      const edge = Math.max(Math.abs(x), Math.abs(z)) === 6;
+      if (!edge) continue;
+      const gateGap = z === 6 && x >= -1 && x <= 1;
+      if (gateGap) continue;
+      addStack(x, z, 3);
+      if (((x + z) & 1) === 0) addStack(x, z, 4);
+    }
+  }
+
+  const towerSpecs = [
+    [-9, -9, 9], [9, -9, 9], [-9, 9, 8], [9, 9, 8],
+    [-3, 9, 8], [3, 9, 8],
+    [0, -9, 10], [-9, 0, 8], [9, 0, 8]
+  ];
+  for (let i = 0; i < towerSpecs.length; i += 1) {
+    const [tx, tz, h] = towerSpecs[i];
+    addStack(tx, tz, h);
+    addStack(tx - 1, tz, Math.max(5, h - 2));
+    addStack(tx + 1, tz, Math.max(5, h - 2));
+    addStack(tx, tz - 1, Math.max(5, h - 2));
+    addStack(tx, tz + 1, Math.max(5, h - 2));
+  }
+
+  for (let x = -2; x <= 2; x += 1) {
+    for (let z = -2; z <= 2; z += 1) {
+      const h = (Math.abs(x) <= 1 && Math.abs(z) <= 1) ? 7 : 6;
+      addStack(x, z, h);
+    }
+  }
+  addStack(0, 0, 10);
+  addStack(0, -1, 8);
+  addStack(-1, 0, 8);
+  addStack(1, 0, 8);
+  addStack(0, 1, 8);
+
+  fortressGroup.rotation.x = 0.215;
+  fortressGroup.rotation.y = -0.17;
+  fortressGroup.rotation.z = -0.03;
+  const fortressBaseY = fortressGroup.position.y;
+  scene.add(fortressGroup);
+
+  const bounds = new THREE.Box3().setFromObject(fortressGroup);
+  const fortressCenter = new THREE.Vector3();
+  const fortressSize = new THREE.Vector3();
+  bounds.getCenter(fortressCenter);
+  bounds.getSize(fortressSize);
+  const fitFrustumSize = Math.max(fortressSize.x, fortressSize.y, fortressSize.z) * 1.14;
+
+  camera.position.set(fortressCenter.x + 1.48, fortressCenter.y + 1.84, fortressCenter.z + 3.1);
+  camera.lookAt(fortressCenter.x - 0.03, fortressCenter.y + 0.48, fortressCenter.z + 0.3);
+
+  const controls = new OrbitControls(camera, canvas);
+  controls.enableDamping = false;
+  controls.enableZoom = false;
+  controls.enablePan = false;
+  controls.enableRotate = false;
+  controls.autoRotate = false;
+  controls.target.set(fortressCenter.x, fortressCenter.y + 0.4, fortressCenter.z);
+  controls.update();
+
+  const resize = () => {
+    const width = root.clientWidth || 1;
+    const height = root.clientHeight || 1;
+    const aspect = width / height;
+    const minFrustumSize = isMobileViewport() ? mobileMinFrustumSize : desktopMinFrustumSize;
+    const fitSize = fitFrustumSize * (isMobileViewport() ? 0.58 : 1);
+    const baseFrustumSize = Math.max(minFrustumSize, fitSize);
+    const frustumSize = baseFrustumSize / zoomFactor;
+
+    camera.left = -0.5 * frustumSize * aspect;
+    camera.right = 0.5 * frustumSize * aspect;
+    camera.top = 0.5 * frustumSize;
+    camera.bottom = -0.5 * frustumSize;
+    camera.updateProjectionMatrix();
+    renderer.setSize(width, height, false);
+    controls.enableRotate = false;
+  };
+
+  const setFortifyState = (enabled) => {
+    fortifyTarget = enabled ? 1 : 0;
+  };
+
+  const clearHoverTimer = () => {
+    if (hoverTimerId !== null) {
+      clearTimeout(hoverTimerId);
+      hoverTimerId = null;
+    }
+  };
+
+  const setPointerFromEvent = (event) => {
+    const rect = canvas.getBoundingClientRect();
+    pointer.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+    pointer.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+  };
+
+  const isPointerIntersectingFortress = (event) => {
+    setPointerFromEvent(event);
+    raycaster.setFromCamera(pointer, camera);
+    return raycaster.intersectObjects(blocks, false).length > 0;
+  };
+
+  canvas.addEventListener('pointermove', (event) => {
+    if (event.pointerType === 'touch') {
+      pointerOverFortress = false;
+      clearHoverTimer();
+      setFortifyState(false);
+      return;
+    }
+    pointerOverFortress = isPointerIntersectingFortress(event);
+    if (pointerOverFortress) {
+      if (hoverTimerId === null && fortifyTarget < 1) {
+        hoverTimerId = setTimeout(() => {
+          hoverTimerId = null;
+          if (pointerOverFortress) {
+            setFortifyState(true);
+          }
+        }, fortifyDelayMs);
+      }
+    } else {
+      clearHoverTimer();
+      setFortifyState(false);
+    }
+  });
+
+  canvas.addEventListener('pointerleave', () => {
+    pointerOverFortress = false;
+    clearHoverTimer();
+    setFortifyState(false);
+  });
+
+  resize();
+  if ('ResizeObserver' in window) {
+    const observer = new ResizeObserver(resize);
+    observer.observe(root);
+  } else {
+    window.addEventListener('resize', resize);
+  }
+
+  const animate = () => {
+    fortifyMix = THREE.MathUtils.lerp(fortifyMix, fortifyTarget, 0.12);
+
+    for (let i = 0; i < faceMaterials.length; i += 1) {
+      const mat = faceMaterials[i];
+      mat.opacity = Math.min(0.74, mat.userData.baseOpacity * (1 + fortifyMix * 0.95));
+      mat.envMapIntensity = mat.userData.baseEnvMapIntensity * (1 + fortifyMix * 0.58);
+      mat.transmission = THREE.MathUtils.clamp(mat.userData.baseTransmission * (1 - fortifyMix * 0.38), 0.46, 1.0);
+      mat.thickness = mat.userData.baseThickness * (1 + fortifyMix * 0.42);
+    }
+    edgeHighlightMaterial.opacity = Math.min(0.62, baseEdgeOpacity * (1 + fortifyMix * 2.1));
+    glowShellMaterial.opacity = Math.min(0.42, baseGlowOpacity * (1 + fortifyMix * 1.4));
+    fortressGroup.scale.setScalar(1);
+    fortressGroup.position.y = fortressBaseY;
+
+    controls.update();
+    renderer.render(scene, camera);
+    if (canvas.style.opacity !== '1') {
+      canvas.style.opacity = '1';
+    }
+    requestAnimationFrame(animate);
+  };
+  animate();
+</script>
diff --git a/_includes/v1/components/three-fortress-gated-rect.html b/_includes/v1/components/three-fortress-gated-rect.html
new file mode 100644
index 0000000..2988124
--- /dev/null
+++ b/_includes/v1/components/three-fortress-gated-rect.html
@@ -0,0 +1,355 @@
+<div
+  class="{{ include.class }} relative overflow-hidden"
+  data-ops-fortress-gated
+  style="height: {{ include.height | default: '320px' }};"
+>
+  <canvas
+    class="block h-full w-full"
+    style="opacity: 0; -webkit-mask-image: radial-gradient(120% 112% at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,0.92) 74%, rgba(0,0,0,0.48) 85%, rgba(0,0,0,0.1) 93%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(120% 112% at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,0.92) 74%, rgba(0,0,0,0.48) 85%, rgba(0,0,0,0.1) 93%, rgba(0,0,0,0) 100%);"
+  ></canvas>
+</div>
+
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://unpkg.com/three@0.167.1/build/three.module.js",
+    "three/addons/": "https://unpkg.com/three@0.167.1/examples/jsm/"
+  }
+}
+</script>
+
+<script type="module">
+  import * as THREE from 'three';
+  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+  import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
+
+  const root = document.querySelector('[data-ops-fortress-gated]:not([data-three-mounted])');
+  if (!root) {
+    throw new Error('ops-fortress-gated mount target not found');
+  }
+
+  root.setAttribute('data-three-mounted', 'true');
+  const canvas = root.querySelector('canvas');
+  canvas.style.transition = 'opacity 300ms ease-out';
+
+  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+  const scene = new THREE.Scene();
+  const desktopMinFrustumSize = 5.2;
+  const mobileMinFrustumSize = 2.2;
+  const includeZoom = Number({{ include.zoom | default: 1 }});
+  const zoomFactor = Number.isFinite(includeZoom) && includeZoom > 0 ? includeZoom : 1;
+  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 100);
+
+  scene.background = null;
+  renderer.setClearColor(0x000000, 0);
+  camera.up.set(0, 1, 0);
+  camera.position.set(0, 6, 0.001);
+  camera.lookAt(0, 0.74, 0);
+
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+  renderer.outputColorSpace = THREE.SRGBColorSpace;
+  renderer.toneMapping = THREE.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 1.26;
+  renderer.physicallyCorrectLights = true;
+
+  const pmremGenerator = new THREE.PMREMGenerator(renderer);
+  const envRT = pmremGenerator.fromScene(new RoomEnvironment(), 0.04);
+  scene.environment = envRT.texture;
+  pmremGenerator.dispose();
+
+  scene.add(new THREE.AmbientLight(0xffffff, 0.65));
+  const keyLight = new THREE.DirectionalLight(0xbfe3ff, 2.8);
+  keyLight.position.set(3, 5, 4);
+  scene.add(keyLight);
+  const rimLight = new THREE.DirectionalLight(0xffffff, 2.2);
+  rimLight.position.set(-4, 2.5, -3);
+  scene.add(rimLight);
+
+  const boxGeometry = new THREE.BoxGeometry(0.12, 0.1662, 0.12);
+  const edgeGeometry = new THREE.EdgesGeometry(boxGeometry);
+  const edgeHighlightMaterial = new THREE.LineBasicMaterial({
+    color: 0xf1dfab,
+    transparent: true,
+    opacity: 0.28,
+    toneMapped: false
+  });
+  const glowShellMaterial = new THREE.MeshBasicMaterial({
+    color: 0xffe9a8,
+    transparent: true,
+    opacity: 0.2,
+    blending: THREE.AdditiveBlending,
+    side: THREE.BackSide,
+    depthWrite: false,
+    toneMapped: false
+  });
+
+  const labelTextureCache = new Map();
+  const materialCache = new Map();
+  const faceMaterials = [];
+  const baseEnvMapIntensity = 1.35;
+  const baseRoughness = 0.045;
+  const baseThickness = 1.1;
+  const baseEdgeOpacity = edgeHighlightMaterial.opacity;
+  const baseGlowOpacity = glowShellMaterial.opacity;
+
+  const isMobileViewport = () => window.matchMedia('(max-width: 767px)').matches;
+  const fortifyMix = 1;
+
+  const buildLabelTexture = (label) => {
+    const c = document.createElement('canvas');
+    c.width = 128;
+    c.height = 128;
+    const ctx = c.getContext('2d');
+    ctx.clearRect(0, 0, 128, 128);
+    ctx.fillStyle = 'rgba(99, 104, 113, 0.24)';
+    ctx.fillRect(0, 0, 128, 128);
+    ctx.fillStyle = 'rgba(217, 191, 117, 0.82)';
+    ctx.font = '500 16px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(label, 64, 64);
+    const texture = new THREE.CanvasTexture(c);
+    texture.colorSpace = THREE.SRGBColorSpace;
+    texture.needsUpdate = true;
+    return texture;
+  };
+
+  const getLabelTexture = (label) => {
+    if (!labelTextureCache.has(label)) {
+      labelTextureCache.set(label, buildLabelTexture(label));
+    }
+    return labelTextureCache.get(label);
+  };
+
+  const getFaceMaterial = (label) => {
+    if (!materialCache.has(label)) {
+      materialCache.set(label, new THREE.MeshPhysicalMaterial({
+        color: 0xfff6d1,
+        transparent: true,
+        opacity: 0.72,
+        map: getLabelTexture(label),
+        metalness: 0.0,
+        roughness: baseRoughness,
+        transmission: 0.88,
+        thickness: baseThickness,
+        ior: 1.5,
+        clearcoat: 1.0,
+        clearcoatRoughness: 0.035,
+        attenuationColor: 0xc7bb8c,
+        attenuationDistance: 2.2,
+        envMapIntensity: 1.9
+      }));
+    }
+    return materialCache.get(label);
+  };
+
+  const createFaceMaterialVariant = (label, roughnessOffset, thicknessOffset, faceRole) => {
+    const mat = getFaceMaterial(label).clone();
+    mat.roughness = THREE.MathUtils.clamp(baseRoughness + roughnessOffset, 0.006, 0.06);
+    mat.thickness = THREE.MathUtils.clamp(baseThickness + thicknessOffset, 1.35, 1.9);
+    if (faceRole === 'top') {
+      mat.opacity = 0.36;
+      mat.transmission = 0.92;
+      mat.roughness = Math.min(0.06, mat.roughness + 0.004);
+      mat.thickness = 0.24;
+      mat.clearcoatRoughness = 0.03;
+    } else if (faceRole === 'bottom') {
+      mat.opacity = 0.44;
+      mat.transmission = 0.8;
+      mat.thickness = 0.58;
+      mat.clearcoatRoughness = 0.05;
+    } else {
+      mat.opacity = 0.46;
+      mat.transmission = 0.9;
+      mat.thickness = 0.5;
+      mat.clearcoatRoughness = 0.032;
+    }
+    mat.userData.baseOpacity = mat.opacity;
+    mat.userData.baseEnvMapIntensity = mat.envMapIntensity;
+    mat.userData.baseTransmission = mat.transmission;
+    mat.userData.baseThickness = mat.thickness;
+    faceMaterials.push(mat);
+    return mat;
+  };
+
+  const createBox = ({ position = [0, 0.74, 0] } = {}) => {
+    const roughnessOffset = (Math.random() - 0.5) * 0.02;
+    const thicknessOffset = (Math.random() - 0.5) * 0.18;
+    const mesh = new THREE.Mesh(boxGeometry, [
+      createFaceMaterialVariant('s1', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('s2', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('t', roughnessOffset, thicknessOffset, 'top'),
+      createFaceMaterialVariant('b', roughnessOffset, thicknessOffset, 'bottom'),
+      createFaceMaterialVariant('s3', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('s4', roughnessOffset, thicknessOffset, 'side')
+    ]);
+    mesh.position.set(position[0], position[1], position[2]);
+
+    const edgeLines = new THREE.LineSegments(edgeGeometry, edgeHighlightMaterial);
+    edgeLines.renderOrder = 2;
+    mesh.add(edgeLines);
+
+    const glowShell = new THREE.Mesh(boxGeometry, glowShellMaterial);
+    glowShell.scale.set(1.12, 1.12, 1.12);
+    glowShell.renderOrder = 0;
+    mesh.add(glowShell);
+    return mesh;
+  };
+
+  const fortressGroup = new THREE.Group();
+  const blocks = [];
+  const checkpoints = [];
+
+  const pitch = 0.125;
+  const yLift = 0.152;
+  const baseY = 0.36;
+
+  const addStack = (x, z, height) => {
+    for (let level = 0; level < height; level += 1) {
+      const box = createBox({ position: [x * pitch, baseY + level * yLift, z * pitch] });
+      blocks.push(box);
+      fortressGroup.add(box);
+    }
+  };
+
+  const addRing = ({ radius, height, gateHalfWidth, cornerExtra = 2 }) => {
+    for (let x = -radius; x <= radius; x += 1) {
+      for (let z = -radius; z <= radius; z += 1) {
+        const edge = Math.max(Math.abs(x), Math.abs(z)) === radius;
+        if (!edge) continue;
+        const isFrontGate = z === radius && x >= -gateHalfWidth && x <= gateHalfWidth;
+        if (isFrontGate) continue;
+
+        const corner = Math.abs(x) === radius && Math.abs(z) === radius;
+        const wallHeight = corner ? height + cornerExtra : height;
+        addStack(x, z, wallHeight);
+
+        if (!corner && ((x + z) & 1) === 0) {
+          addStack(x, z, wallHeight + 1);
+        }
+      }
+    }
+  };
+
+  addRing({ radius: 12, height: 3, gateHalfWidth: 2, cornerExtra: 2 });
+  addRing({ radius: 7, height: 5, gateHalfWidth: 1, cornerExtra: 1 });
+
+  // Inner gate side caps: +2 blocks on each side of the opening.
+  for (let level = 5; level <= 6; level += 1) {
+    const innerGateCapY = baseY + level * yLift;
+    const innerGateCapL = createBox({ position: [-2 * pitch, innerGateCapY, 7 * pitch] });
+    const innerGateCapR = createBox({ position: [2 * pitch, innerGateCapY, 7 * pitch] });
+    blocks.push(innerGateCapL, innerGateCapR);
+    fortressGroup.add(innerGateCapL, innerGateCapR);
+  }
+
+  addStack(-3, 12, 5);
+  addStack(3, 12, 5);
+  for (let x = -2; x <= 2; x += 1) {
+    for (let z = -2; z <= 2; z += 1) {
+      const keepHeight = (Math.abs(x) <= 1 && Math.abs(z) <= 1) ? 8 : 7;
+      addStack(x, z, keepHeight);
+    }
+  }
+  addStack(0, 0, 11);
+  addStack(0, -1, 9);
+  addStack(0, 1, 9);
+  addStack(-1, 0, 9);
+  addStack(1, 0, 9);
+
+  const checkpointMaterial = new THREE.MeshBasicMaterial({
+    color: 0xf1dc91,
+    transparent: true,
+    opacity: 0.24,
+    toneMapped: false
+  });
+  const checkpointGeometry = new THREE.BoxGeometry(0.06, 0.06, 0.06);
+  const checkpointPath = [8.2, 5.2, 1.3];
+  for (let i = 0; i < checkpointPath.length; i += 1) {
+    const marker = new THREE.Mesh(checkpointGeometry, checkpointMaterial.clone());
+    marker.position.set(0, baseY + 0.34, checkpointPath[i] * pitch);
+    marker.userData.baseY = marker.position.y;
+    checkpoints.push(marker);
+    fortressGroup.add(marker);
+  }
+
+  fortressGroup.rotation.x = 0.115;
+  fortressGroup.rotation.y = -0.169;
+  fortressGroup.rotation.z = -0.03;
+  const fortressBaseY = fortressGroup.position.y;
+  scene.add(fortressGroup);
+
+  const bounds = new THREE.Box3().setFromObject(fortressGroup);
+  const fortressCenter = new THREE.Vector3();
+  const fortressSize = new THREE.Vector3();
+  bounds.getCenter(fortressCenter);
+  bounds.getSize(fortressSize);
+  const fitFrustumSize = Math.max(fortressSize.x, fortressSize.y, fortressSize.z) * 1.12;
+
+  camera.position.set(fortressCenter.x + 1.72, fortressCenter.y + 1.28, fortressCenter.z + 3.3);
+  camera.lookAt(fortressCenter.x - 0.04, fortressCenter.y + 0.2, fortressCenter.z + 0.4);
+
+  const controls = new OrbitControls(camera, canvas);
+  controls.enableDamping = false;
+  controls.enableZoom = false;
+  controls.enablePan = false;
+  controls.enableRotate = false;
+  controls.autoRotate = false;
+  controls.target.set(fortressCenter.x, fortressCenter.y + 0.4, fortressCenter.z);
+  controls.update();
+
+  const resize = () => {
+    const width = root.clientWidth || 1;
+    const height = root.clientHeight || 1;
+    const aspect = width / height;
+    const minFrustumSize = isMobileViewport() ? mobileMinFrustumSize : desktopMinFrustumSize;
+    const fitSize = fitFrustumSize * (isMobileViewport() ? 0.58 : 1);
+    const baseFrustumSize = Math.max(minFrustumSize, fitSize);
+    const frustumSize = baseFrustumSize / zoomFactor;
+
+    camera.left = -0.5 * frustumSize * aspect;
+    camera.right = 0.5 * frustumSize * aspect;
+    camera.top = 0.5 * frustumSize;
+    camera.bottom = -0.5 * frustumSize;
+    camera.updateProjectionMatrix();
+    renderer.setSize(width, height, false);
+    controls.enableRotate = false;
+  };
+
+  resize();
+  if ('ResizeObserver' in window) {
+    const observer = new ResizeObserver(resize);
+    observer.observe(root);
+  } else {
+    window.addEventListener('resize', resize);
+  }
+
+  const animate = () => {
+    for (let i = 0; i < faceMaterials.length; i += 1) {
+      const mat = faceMaterials[i];
+      mat.opacity = Math.min(0.74, mat.userData.baseOpacity * (1 + fortifyMix * 0.95));
+      mat.envMapIntensity = mat.userData.baseEnvMapIntensity * (1 + fortifyMix * 0.58);
+      mat.transmission = THREE.MathUtils.clamp(mat.userData.baseTransmission * (1 - fortifyMix * 0.38), 0.46, 1.0);
+      mat.thickness = mat.userData.baseThickness * (1 + fortifyMix * 0.42);
+    }
+    edgeHighlightMaterial.opacity = Math.min(0.62, baseEdgeOpacity * (1 + fortifyMix * 2.1));
+    glowShellMaterial.opacity = Math.min(0.42, baseGlowOpacity * (1 + fortifyMix * 1.4));
+    fortressGroup.scale.setScalar(1);
+    fortressGroup.position.y = fortressBaseY;
+
+    for (let i = 0; i < checkpoints.length; i += 1) {
+      const marker = checkpoints[i];
+      const depthFalloff = 1 - (i / Math.max(1, checkpoints.length - 1)) * 0.35;
+      marker.material.opacity = 0.58 * depthFalloff;
+      marker.scale.set(1.2, 1.2, 1.2);
+    }
+
+    controls.update();
+    renderer.render(scene, camera);
+    if (canvas.style.opacity !== '1') {
+      canvas.style.opacity = '1';
+    }
+    requestAnimationFrame(animate);
+  };
+  animate();
+</script>
diff --git a/_includes/v1/components/three-fortress-rect.html b/_includes/v1/components/three-fortress-rect.html
index a8387dc..ef05840 100644
--- a/_includes/v1/components/three-fortress-rect.html
+++ b/_includes/v1/components/three-fortress-rect.html
@@ -217,6 +217,7 @@
     }
   };
 
+
   for (let x = -9; x <= 9; x += 1) {
     for (let z = -9; z <= 9; z += 1) {
       const edge = Math.max(Math.abs(x), Math.abs(z)) === 9;
@@ -258,6 +259,7 @@
   addStack(-2, 9, 4);
   addStack(2, 9, 4);
 
+
   fortressGroup.rotation.x = 0.215;
   fortressGroup.rotation.y = -0.17;
   fortressGroup.rotation.z = -0.03;
diff --git a/ops/index.md b/ops/index.md
index 6d05ca8..942cd30 100644
--- a/ops/index.md
+++ b/ops/index.md
@@ -18,7 +18,9 @@ title: "Dotenvx Ops"
     </section>
 
     <section class="flex justify-center lg:justify-end">
-      {% include v1/components/three-fortress-rect.html height="170px" class="w-full max-w-[24rem] md:max-w-[27rem] md:!h-[460px]" %}
+      {% include v1/components/three-fortress-gated-rect.html height="170px" class="w-full max-w-[24rem] md:max-w-[27rem] md:!h-[460px]" %}
+      {% comment %}{% include v1/components/three-fortress-rect.html height="170px" class="w-full max-w-[24rem] md:max-w-[27rem] md:!h-[460px]" %}{% endcomment %}
+      {% comment %}{% include v1/components/three-citadel-rect.html height="170px" class="w-full max-w-[24rem] md:max-w-[27rem] md:!h-[460px]" %}{% endcomment %}
     </section>
   </div>
 </main>

From 73078caa7222e96b764d80b21496652a80ce4824 Mon Sep 17 00:00:00 2001
From: Scott Motte <mot@mot.la>
Date: Fri, 10 Apr 2026 15:42:57 -0700
Subject: [PATCH 03/17] steel

---
 .../components/three-fortress-gated-rect.html | 16 ++++----
 assets/css/main.css                           |  8 ++++
 ops/index.md                                  | 37 ++++++++-----------
 3 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/_includes/v1/components/three-fortress-gated-rect.html b/_includes/v1/components/three-fortress-gated-rect.html
index 2988124..8addeb9 100644
--- a/_includes/v1/components/three-fortress-gated-rect.html
+++ b/_includes/v1/components/three-fortress-gated-rect.html
@@ -68,13 +68,13 @@
   const boxGeometry = new THREE.BoxGeometry(0.12, 0.1662, 0.12);
   const edgeGeometry = new THREE.EdgesGeometry(boxGeometry);
   const edgeHighlightMaterial = new THREE.LineBasicMaterial({
-    color: 0xf1dfab,
+    color: 0xdfe6ef,
     transparent: true,
     opacity: 0.28,
     toneMapped: false
   });
   const glowShellMaterial = new THREE.MeshBasicMaterial({
-    color: 0xffe9a8,
+    color: 0xc7d8ea,
     transparent: true,
     opacity: 0.2,
     blending: THREE.AdditiveBlending,
@@ -103,7 +103,7 @@
     ctx.clearRect(0, 0, 128, 128);
     ctx.fillStyle = 'rgba(99, 104, 113, 0.24)';
     ctx.fillRect(0, 0, 128, 128);
-    ctx.fillStyle = 'rgba(217, 191, 117, 0.82)';
+    ctx.fillStyle = 'rgba(210, 220, 233, 0.84)';
     ctx.font = '500 16px sans-serif';
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
@@ -124,7 +124,7 @@
   const getFaceMaterial = (label) => {
     if (!materialCache.has(label)) {
       materialCache.set(label, new THREE.MeshPhysicalMaterial({
-        color: 0xfff6d1,
+        color: 0xf2f6fb,
         transparent: true,
         opacity: 0.72,
         map: getLabelTexture(label),
@@ -135,9 +135,9 @@
         ior: 1.5,
         clearcoat: 1.0,
         clearcoatRoughness: 0.035,
-        attenuationColor: 0xc7bb8c,
+        attenuationColor: 0x90a4ba,
         attenuationDistance: 2.2,
-        envMapIntensity: 1.9
+        envMapIntensity: 2.05
       }));
     }
     return materialCache.get(label);
@@ -258,13 +258,13 @@
   addStack(1, 0, 9);
 
   const checkpointMaterial = new THREE.MeshBasicMaterial({
-    color: 0xf1dc91,
+    color: 0xd8e5f3,
     transparent: true,
     opacity: 0.24,
     toneMapped: false
   });
   const checkpointGeometry = new THREE.BoxGeometry(0.06, 0.06, 0.06);
-  const checkpointPath = [8.2, 5.2, 1.3];
+  const checkpointPath = [1.3];
   for (let i = 0; i < checkpointPath.length; i += 1) {
     const marker = new THREE.Mesh(checkpointGeometry, checkpointMaterial.clone());
     marker.position.set(0, baseY + 0.34, checkpointPath[i] * pitch);
diff --git a/assets/css/main.css b/assets/css/main.css
index a07c308..975f8d0 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -280,6 +280,14 @@ html.dark .contact-muted-link:hover,
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 24px rgba(11, 7, 2, 0.34);
 }
 
+.hero-title-steel {
+  background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 22%, #e9edf2 48%, #cfd7e0 74%, #b6c0cc 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 14px 28px rgba(5, 8, 12, 0.38);
+}
+
 
 blockquote { @apply text-zinc-800 dark:text-zinc-300; }
 p { @apply leading-relaxed; }
diff --git a/ops/index.md b/ops/index.md
index 942cd30..11a2489 100644
--- a/ops/index.md
+++ b/ops/index.md
@@ -2,25 +2,20 @@
 title: "Dotenvx Ops"
 ---
 
-<main class="min-h-[65vh] w-full max-w-6xl mx-auto px-6 py-14 md:py-20">
-  <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-14 items-center">
-    <section>
-      <p class="text-xs uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400">Dotenvx Ops</p>
-      <h1 class="mt-4 text-5xl md:text-6xl font-canela font-normal tracking-tight text-zinc-900 dark:text-zinc-100 leading-[0.98]">
-        Secrets, under guard.
-      </h1>
-      <p class="mt-4 text-lg text-zinc-700 dark:text-zinc-300 max-w-[36ch]">
-        Inspired by the ghost key on the home page, but forged into a fortress for Ops.
-      </p>
-      <p class="mt-6 inline-flex items-center rounded-full border border-zinc-300 dark:border-zinc-700 px-4 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
-        Coming soon
-      </p>
-    </section>
-
-    <section class="flex justify-center lg:justify-end">
-      {% include v1/components/three-fortress-gated-rect.html height="170px" class="w-full max-w-[24rem] md:max-w-[27rem] md:!h-[460px]" %}
-      {% comment %}{% include v1/components/three-fortress-rect.html height="170px" class="w-full max-w-[24rem] md:max-w-[27rem] md:!h-[460px]" %}{% endcomment %}
-      {% comment %}{% include v1/components/three-citadel-rect.html height="170px" class="w-full max-w-[24rem] md:max-w-[27rem] md:!h-[460px]" %}{% endcomment %}
-    </section>
+<section class="hero-top-adaptive hero-no-select relative w-full max-w-7xl mx-auto px-6 mb-32 md:mb-40 lg:mb-44 mt-20">
+  <div class="relative z-10 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] gap-x-0 items-center">
+    <div class="order-2 md:order-1 flex flex-col gap-4 md:gap-6 hero-copy-enter pl-0 lg:pl-12">
+      <div class="mx-auto md:mx-0 mb-1 md:mb-0 flex items-center gap-2 text-center md:text-left text-xs md:text-sm font-semibold tracking-[0.08em] uppercase text-zinc-500 dark:text-zinc-400">Dotenvx Ops</div>
+      <h1 class="hero-title-steel font-canela font-normal tracking-[-0.018em] text-[4.00rem] md:text-[4.62rem] lg:text-[5.38rem] text-center md:text-left leading-[1.02] md:leading-[1.00] pb-2">Armor for Dotenvx</h1>
+      <p class="mx-auto md:mx-0 text-center md:text-left text-[1.07rem] md:text-[1.16rem] leading-[1.34] md:leading-[1.32]">Layered walls and controls around your secrets. Defense in depth for environments, keys, and runtime access.</p>
+      <div class="flex flex-col md:flex-row gap-3 md:gap-4 my-2 items-center md:items-start justify-center md:justify-start w-full mx-auto">
+        <p class="inline-flex items-center rounded-full border border-zinc-300 dark:border-zinc-700 px-4 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">Coming soon</p>
+      </div>
+    </div>
+    <div class="order-1 md:order-2 w-full max-w-[24rem] md:max-w-none mx-auto md:mx-0 md:justify-self-stretch">
+      {% include v1/components/three-fortress-gated-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}
+      {% comment %}{% include v1/components/three-fortress-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}{% endcomment %}
+      {% comment %}{% include v1/components/three-citadel-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}{% endcomment %}
+    </div>
   </div>
-</main>
+</section>

From 8257cda858855266ca28921edbf6bce2b952d6fe Mon Sep 17 00:00:00 2001
From: Scott Motte <mot@mot.la>
Date: Fri, 10 Apr 2026 18:32:04 -0700
Subject: [PATCH 04/17] mace

---
 .../v1/components/three-gauntlet-rect.html    | 320 +++++++++++++++++
 _includes/v1/components/three-mace-rect.html  | 325 ++++++++++++++++++
 ops/index.md                                  |   4 +-
 3 files changed, 648 insertions(+), 1 deletion(-)
 create mode 100644 _includes/v1/components/three-gauntlet-rect.html
 create mode 100644 _includes/v1/components/three-mace-rect.html

diff --git a/_includes/v1/components/three-gauntlet-rect.html b/_includes/v1/components/three-gauntlet-rect.html
new file mode 100644
index 0000000..69c516b
--- /dev/null
+++ b/_includes/v1/components/three-gauntlet-rect.html
@@ -0,0 +1,320 @@
+<div
+  class="{{ include.class }} relative overflow-hidden"
+  data-ops-gauntlet
+  style="height: {{ include.height | default: '320px' }};"
+>
+  <canvas
+    class="block h-full w-full"
+    style="opacity: 0; -webkit-mask-image: radial-gradient(120% 112% at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,0.92) 74%, rgba(0,0,0,0.48) 85%, rgba(0,0,0,0.1) 93%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(120% 112% at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,0.92) 74%, rgba(0,0,0,0.48) 85%, rgba(0,0,0,0.1) 93%, rgba(0,0,0,0) 100%);"
+  ></canvas>
+</div>
+
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://unpkg.com/three@0.167.1/build/three.module.js",
+    "three/addons/": "https://unpkg.com/three@0.167.1/examples/jsm/"
+  }
+}
+</script>
+
+<script type="module">
+  import * as THREE from 'three';
+  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+  import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
+
+  const root = document.querySelector('[data-ops-gauntlet]:not([data-three-mounted])');
+  if (!root) {
+    throw new Error('ops-gauntlet mount target not found');
+  }
+
+  root.setAttribute('data-three-mounted', 'true');
+  const canvas = root.querySelector('canvas');
+  canvas.style.transition = 'opacity 300ms ease-out';
+
+  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+  const scene = new THREE.Scene();
+  const desktopMinFrustumSize = 4.8;
+  const mobileMinFrustumSize = 2.1;
+  const includeZoom = Number({{ include.zoom | default: 1 }});
+  const zoomFactor = Number.isFinite(includeZoom) && includeZoom > 0 ? includeZoom : 1;
+  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 100);
+
+  scene.background = null;
+  renderer.setClearColor(0x000000, 0);
+  camera.up.set(0, 1, 0);
+  camera.position.set(0, 6, 0.001);
+  camera.lookAt(0, 0.74, 0);
+
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+  renderer.outputColorSpace = THREE.SRGBColorSpace;
+  renderer.toneMapping = THREE.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 1.28;
+  renderer.physicallyCorrectLights = true;
+
+  const pmremGenerator = new THREE.PMREMGenerator(renderer);
+  const envRT = pmremGenerator.fromScene(new RoomEnvironment(), 0.04);
+  scene.environment = envRT.texture;
+  pmremGenerator.dispose();
+
+  scene.add(new THREE.AmbientLight(0xffffff, 0.65));
+  const keyLight = new THREE.DirectionalLight(0xbfe3ff, 2.8);
+  keyLight.position.set(3, 5, 4);
+  scene.add(keyLight);
+  const rimLight = new THREE.DirectionalLight(0xffffff, 2.2);
+  rimLight.position.set(-4, 2.5, -3);
+  scene.add(rimLight);
+
+  const boxGeometry = new THREE.BoxGeometry(0.12, 0.1662, 0.12);
+  const edgeGeometry = new THREE.EdgesGeometry(boxGeometry);
+  const edgeHighlightMaterial = new THREE.LineBasicMaterial({
+    color: 0xdfe6ef,
+    transparent: true,
+    opacity: 0.28,
+    toneMapped: false
+  });
+  const glowShellMaterial = new THREE.MeshBasicMaterial({
+    color: 0xc7d8ea,
+    transparent: true,
+    opacity: 0.2,
+    blending: THREE.AdditiveBlending,
+    side: THREE.BackSide,
+    depthWrite: false,
+    toneMapped: false
+  });
+
+  const labelTextureCache = new Map();
+  const materialCache = new Map();
+  const faceMaterials = [];
+  const baseRoughness = 0.045;
+  const baseThickness = 1.1;
+  const baseEdgeOpacity = edgeHighlightMaterial.opacity;
+  const baseGlowOpacity = glowShellMaterial.opacity;
+  const isMobileViewport = () => window.matchMedia('(max-width: 767px)').matches;
+
+  const buildLabelTexture = (label) => {
+    const c = document.createElement('canvas');
+    c.width = 128;
+    c.height = 128;
+    const ctx = c.getContext('2d');
+    ctx.clearRect(0, 0, 128, 128);
+    ctx.fillStyle = 'rgba(99, 104, 113, 0.24)';
+    ctx.fillRect(0, 0, 128, 128);
+    ctx.fillStyle = 'rgba(210, 220, 233, 0.84)';
+    ctx.font = '500 16px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(label, 64, 64);
+    const texture = new THREE.CanvasTexture(c);
+    texture.colorSpace = THREE.SRGBColorSpace;
+    texture.needsUpdate = true;
+    return texture;
+  };
+
+  const getLabelTexture = (label) => {
+    if (!labelTextureCache.has(label)) {
+      labelTextureCache.set(label, buildLabelTexture(label));
+    }
+    return labelTextureCache.get(label);
+  };
+
+  const getFaceMaterial = (label) => {
+    if (!materialCache.has(label)) {
+      materialCache.set(label, new THREE.MeshPhysicalMaterial({
+        color: 0xf2f6fb,
+        transparent: true,
+        opacity: 0.72,
+        map: getLabelTexture(label),
+        metalness: 0.0,
+        roughness: baseRoughness,
+        transmission: 0.88,
+        thickness: baseThickness,
+        ior: 1.5,
+        clearcoat: 1.0,
+        clearcoatRoughness: 0.035,
+        attenuationColor: 0x90a4ba,
+        attenuationDistance: 2.2,
+        envMapIntensity: 2.05
+      }));
+    }
+    return materialCache.get(label);
+  };
+
+  const createFaceMaterialVariant = (label, roughnessOffset, thicknessOffset, faceRole) => {
+    const mat = getFaceMaterial(label).clone();
+    mat.roughness = THREE.MathUtils.clamp(baseRoughness + roughnessOffset, 0.006, 0.06);
+    mat.thickness = THREE.MathUtils.clamp(baseThickness + thicknessOffset, 1.35, 1.9);
+    if (faceRole === 'top') {
+      mat.opacity = 0.36;
+      mat.transmission = 0.92;
+      mat.roughness = Math.min(0.06, mat.roughness + 0.004);
+      mat.thickness = 0.24;
+      mat.clearcoatRoughness = 0.03;
+    } else if (faceRole === 'bottom') {
+      mat.opacity = 0.44;
+      mat.transmission = 0.8;
+      mat.thickness = 0.58;
+      mat.clearcoatRoughness = 0.05;
+    } else {
+      mat.opacity = 0.46;
+      mat.transmission = 0.9;
+      mat.thickness = 0.5;
+      mat.clearcoatRoughness = 0.032;
+    }
+    mat.userData.baseOpacity = mat.opacity;
+    mat.userData.baseEnvMapIntensity = mat.envMapIntensity;
+    mat.userData.baseTransmission = mat.transmission;
+    mat.userData.baseThickness = mat.thickness;
+    faceMaterials.push(mat);
+    return mat;
+  };
+
+  const createBox = ({ position = [0, 0.74, 0] } = {}) => {
+    const roughnessOffset = (Math.random() - 0.5) * 0.02;
+    const thicknessOffset = (Math.random() - 0.5) * 0.18;
+    const mesh = new THREE.Mesh(boxGeometry, [
+      createFaceMaterialVariant('s1', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('s2', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('t', roughnessOffset, thicknessOffset, 'top'),
+      createFaceMaterialVariant('b', roughnessOffset, thicknessOffset, 'bottom'),
+      createFaceMaterialVariant('s3', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('s4', roughnessOffset, thicknessOffset, 'side')
+    ]);
+    mesh.position.set(position[0], position[1], position[2]);
+
+    const edgeLines = new THREE.LineSegments(edgeGeometry, edgeHighlightMaterial);
+    edgeLines.renderOrder = 2;
+    mesh.add(edgeLines);
+
+    const glowShell = new THREE.Mesh(boxGeometry, glowShellMaterial);
+    glowShell.scale.set(1.12, 1.12, 1.12);
+    glowShell.renderOrder = 0;
+    mesh.add(glowShell);
+    return mesh;
+  };
+
+  const gauntletGroup = new THREE.Group();
+  const blocks = [];
+  const pitch = 0.125;
+  const yLift = 0.152;
+  const baseY = 0.36;
+
+  const addStack = (x, z, height) => {
+    for (let level = 0; level < height; level += 1) {
+      const box = createBox({ position: [x * pitch, baseY + level * yLift, z * pitch] });
+      blocks.push(box);
+      gauntletGroup.add(box);
+    }
+  };
+
+  const addPrism = (xMin, xMax, zMin, zMax, height) => {
+    for (let x = xMin; x <= xMax; x += 1) {
+      for (let z = zMin; z <= zMax; z += 1) {
+        addStack(x, z, height);
+      }
+    }
+  };
+
+  // Rear forearm/wrist block.
+  addPrism(-10, -1, 3, 11, 4);
+  addPrism(-8, 1, 1, 8, 5);
+
+  // Main fist cube mass (rear/top section).
+  addPrism(-6, 5, -1, 7, 6);
+  addPrism(-4, 3, -2, 5, 7);
+
+  // Knuckle plate top (3x3 raised tiles feel).
+  addPrism(-5, -3, -1, 1, 8);
+  addPrism(-2, 0, -1, 1, 8);
+  addPrism(1, 3, -1, 1, 8);
+  addPrism(-4, -2, 2, 4, 8);
+  addPrism(-1, 1, 2, 4, 8);
+  addPrism(2, 4, 2, 4, 8);
+
+  // Forward curled striking section.
+  addPrism(3, 10, -8, -2, 4);
+  addPrism(4, 11, -10, -5, 4);
+  addPrism(6, 11, -12, -8, 3);
+
+  // Thumb / palm lock joining rear and front masses.
+  addPrism(0, 6, -6, -1, 4);
+  addPrism(1, 7, -8, -4, 4);
+  addPrism(2, 8, -9, -6, 3);
+
+  // Lower palm guard.
+  addPrism(-1, 5, -7, -3, 3);
+
+  gauntletGroup.rotation.x = 0.24;
+  gauntletGroup.rotation.y = -0.82;
+  gauntletGroup.rotation.z = 0.09;
+  const gauntletBaseY = gauntletGroup.position.y;
+  scene.add(gauntletGroup);
+
+  const bounds = new THREE.Box3().setFromObject(gauntletGroup);
+  const center = new THREE.Vector3();
+  const size = new THREE.Vector3();
+  bounds.getCenter(center);
+  bounds.getSize(size);
+  const fitFrustumSize = Math.max(size.x, size.y, size.z) * 1.14;
+
+  camera.position.set(center.x + 2.7, center.y + 0.98, center.z + 2.05);
+  camera.lookAt(center.x + 0.84, center.y + 0.14, center.z - 0.88);
+
+  const controls = new OrbitControls(camera, canvas);
+  controls.enableDamping = false;
+  controls.enableZoom = false;
+  controls.enablePan = false;
+  controls.enableRotate = false;
+  controls.autoRotate = false;
+  controls.target.set(center.x, center.y + 0.36, center.z);
+  controls.update();
+
+  const resize = () => {
+    const width = root.clientWidth || 1;
+    const height = root.clientHeight || 1;
+    const aspect = width / height;
+    const minFrustumSize = isMobileViewport() ? mobileMinFrustumSize : desktopMinFrustumSize;
+    const fitSize = fitFrustumSize * (isMobileViewport() ? 0.58 : 1);
+    const baseFrustumSize = Math.max(minFrustumSize, fitSize);
+    const frustumSize = baseFrustumSize / zoomFactor;
+
+    camera.left = -0.5 * frustumSize * aspect;
+    camera.right = 0.5 * frustumSize * aspect;
+    camera.top = 0.5 * frustumSize;
+    camera.bottom = -0.5 * frustumSize;
+    camera.updateProjectionMatrix();
+    renderer.setSize(width, height, false);
+    controls.enableRotate = false;
+  };
+
+  resize();
+  if ('ResizeObserver' in window) {
+    const observer = new ResizeObserver(resize);
+    observer.observe(root);
+  } else {
+    window.addEventListener('resize', resize);
+  }
+
+  const fortifyMix = 1;
+  const animate = () => {
+    for (let i = 0; i < faceMaterials.length; i += 1) {
+      const mat = faceMaterials[i];
+      mat.opacity = Math.min(0.74, mat.userData.baseOpacity * (1 + fortifyMix * 0.95));
+      mat.envMapIntensity = mat.userData.baseEnvMapIntensity * (1 + fortifyMix * 0.58);
+      mat.transmission = THREE.MathUtils.clamp(mat.userData.baseTransmission * (1 - fortifyMix * 0.38), 0.46, 1.0);
+      mat.thickness = mat.userData.baseThickness * (1 + fortifyMix * 0.42);
+    }
+    edgeHighlightMaterial.opacity = Math.min(0.62, baseEdgeOpacity * (1 + fortifyMix * 2.1));
+    glowShellMaterial.opacity = Math.min(0.42, baseGlowOpacity * (1 + fortifyMix * 1.4));
+    gauntletGroup.scale.setScalar(1);
+    gauntletGroup.position.y = gauntletBaseY;
+
+    controls.update();
+    renderer.render(scene, camera);
+    if (canvas.style.opacity !== '1') {
+      canvas.style.opacity = '1';
+    }
+    requestAnimationFrame(animate);
+  };
+  animate();
+</script>
diff --git a/_includes/v1/components/three-mace-rect.html b/_includes/v1/components/three-mace-rect.html
new file mode 100644
index 0000000..f55e6d8
--- /dev/null
+++ b/_includes/v1/components/three-mace-rect.html
@@ -0,0 +1,325 @@
+<div
+  class="{{ include.class }} relative overflow-hidden"
+  data-ops-mace
+  style="height: {{ include.height | default: '320px' }};"
+>
+  <canvas
+    class="block h-full w-full"
+    style="opacity: 0; -webkit-mask-image: radial-gradient(120% 112% at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,0.92) 74%, rgba(0,0,0,0.48) 85%, rgba(0,0,0,0.1) 93%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(120% 112% at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,0.92) 74%, rgba(0,0,0,0.48) 85%, rgba(0,0,0,0.1) 93%, rgba(0,0,0,0) 100%);"
+  ></canvas>
+</div>
+
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://unpkg.com/three@0.167.1/build/three.module.js",
+    "three/addons/": "https://unpkg.com/three@0.167.1/examples/jsm/"
+  }
+}
+</script>
+
+<script type="module">
+  import * as THREE from 'three';
+  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+  import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
+
+  const root = document.querySelector('[data-ops-mace]:not([data-three-mounted])');
+  if (!root) throw new Error('ops-mace mount target not found');
+
+  root.setAttribute('data-three-mounted', 'true');
+  const canvas = root.querySelector('canvas');
+  canvas.style.transition = 'opacity 300ms ease-out';
+
+  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+  const scene = new THREE.Scene();
+  const desktopMinFrustumSize = 1.05;
+  const mobileMinFrustumSize = 0.95;
+  const includeZoom = Number({{ include.zoom | default: 1 }});
+  const zoomFactor = Number.isFinite(includeZoom) && includeZoom > 0 ? includeZoom : 1;
+  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 100);
+
+  scene.background = null;
+  renderer.setClearColor(0x000000, 0);
+  camera.up.set(0, 1, 0);
+  camera.position.set(0, 6, 0.001);
+  camera.lookAt(0, 0.74, 0);
+
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+  renderer.outputColorSpace = THREE.SRGBColorSpace;
+  renderer.toneMapping = THREE.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 1.28;
+  renderer.physicallyCorrectLights = true;
+
+  const pmremGenerator = new THREE.PMREMGenerator(renderer);
+  const envRT = pmremGenerator.fromScene(new RoomEnvironment(), 0.04);
+  scene.environment = envRT.texture;
+  pmremGenerator.dispose();
+
+  scene.add(new THREE.AmbientLight(0xffffff, 0.65));
+  const keyLight = new THREE.DirectionalLight(0xbfe3ff, 2.8);
+  keyLight.position.set(3, 5, 4);
+  scene.add(keyLight);
+  const rimLight = new THREE.DirectionalLight(0xffffff, 2.2);
+  rimLight.position.set(-4, 2.5, -3);
+  scene.add(rimLight);
+
+  const boxGeometry = new THREE.BoxGeometry(0.12, 0.1662, 0.12);
+  const edgeGeometry = new THREE.EdgesGeometry(boxGeometry);
+  const edgeHighlightMaterial = new THREE.LineBasicMaterial({
+    color: 0xdfe6ef,
+    transparent: true,
+    opacity: 0.28,
+    toneMapped: false
+  });
+  const glowShellMaterial = new THREE.MeshBasicMaterial({
+    color: 0xc7d8ea,
+    transparent: true,
+    opacity: 0.2,
+    blending: THREE.AdditiveBlending,
+    side: THREE.BackSide,
+    depthWrite: false,
+    toneMapped: false
+  });
+
+  const labelTextureCache = new Map();
+  const materialCache = new Map();
+  const faceMaterials = [];
+  const baseRoughness = 0.045;
+  const baseThickness = 1.1;
+  const baseEdgeOpacity = edgeHighlightMaterial.opacity;
+  const baseGlowOpacity = glowShellMaterial.opacity;
+  const isMobileViewport = () => window.matchMedia('(max-width: 767px)').matches;
+
+  const buildLabelTexture = (label) => {
+    const c = document.createElement('canvas');
+    c.width = 128;
+    c.height = 128;
+    const ctx = c.getContext('2d');
+    ctx.clearRect(0, 0, 128, 128);
+    ctx.fillStyle = 'rgba(99, 104, 113, 0.24)';
+    ctx.fillRect(0, 0, 128, 128);
+    ctx.fillStyle = 'rgba(210, 220, 233, 0.84)';
+    ctx.font = '500 16px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(label, 64, 64);
+    const texture = new THREE.CanvasTexture(c);
+    texture.colorSpace = THREE.SRGBColorSpace;
+    texture.needsUpdate = true;
+    return texture;
+  };
+
+  const getLabelTexture = (label) => {
+    if (!labelTextureCache.has(label)) labelTextureCache.set(label, buildLabelTexture(label));
+    return labelTextureCache.get(label);
+  };
+
+  const getFaceMaterial = (label) => {
+    if (!materialCache.has(label)) {
+      materialCache.set(label, new THREE.MeshPhysicalMaterial({
+        color: 0xf2f6fb,
+        transparent: true,
+        opacity: 0.72,
+        map: getLabelTexture(label),
+        metalness: 0.0,
+        roughness: baseRoughness,
+        transmission: 0.88,
+        thickness: baseThickness,
+        ior: 1.5,
+        clearcoat: 1.0,
+        clearcoatRoughness: 0.035,
+        attenuationColor: 0x90a4ba,
+        attenuationDistance: 2.2,
+        envMapIntensity: 2.05
+      }));
+    }
+    return materialCache.get(label);
+  };
+
+  const createFaceMaterialVariant = (label, roughnessOffset, thicknessOffset, faceRole) => {
+    const mat = getFaceMaterial(label).clone();
+    mat.roughness = THREE.MathUtils.clamp(baseRoughness + roughnessOffset, 0.006, 0.06);
+    mat.thickness = THREE.MathUtils.clamp(baseThickness + thicknessOffset, 1.35, 1.9);
+    if (faceRole === 'top') {
+      mat.opacity = 0.36;
+      mat.transmission = 0.92;
+      mat.roughness = Math.min(0.06, mat.roughness + 0.004);
+      mat.thickness = 0.24;
+      mat.clearcoatRoughness = 0.03;
+    } else if (faceRole === 'bottom') {
+      mat.opacity = 0.44;
+      mat.transmission = 0.8;
+      mat.thickness = 0.58;
+      mat.clearcoatRoughness = 0.05;
+    } else {
+      mat.opacity = 0.46;
+      mat.transmission = 0.9;
+      mat.thickness = 0.5;
+      mat.clearcoatRoughness = 0.032;
+    }
+    mat.userData.baseOpacity = mat.opacity;
+    mat.userData.baseEnvMapIntensity = mat.envMapIntensity;
+    mat.userData.baseTransmission = mat.transmission;
+    mat.userData.baseThickness = mat.thickness;
+    faceMaterials.push(mat);
+    return mat;
+  };
+
+  const createBox = ({ position = [0, 0.74, 0] } = {}) => {
+    const roughnessOffset = (Math.random() - 0.5) * 0.02;
+    const thicknessOffset = (Math.random() - 0.5) * 0.18;
+    const mesh = new THREE.Mesh(boxGeometry, [
+      createFaceMaterialVariant('s1', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('s2', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('t', roughnessOffset, thicknessOffset, 'top'),
+      createFaceMaterialVariant('b', roughnessOffset, thicknessOffset, 'bottom'),
+      createFaceMaterialVariant('s3', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('s4', roughnessOffset, thicknessOffset, 'side')
+    ]);
+    mesh.position.set(position[0], position[1], position[2]);
+    const edgeLines = new THREE.LineSegments(edgeGeometry, edgeHighlightMaterial);
+    edgeLines.renderOrder = 2;
+    mesh.add(edgeLines);
+    const glowShell = new THREE.Mesh(boxGeometry, glowShellMaterial);
+    glowShell.scale.set(1.12, 1.12, 1.12);
+    glowShell.renderOrder = 0;
+    mesh.add(glowShell);
+    return mesh;
+  };
+
+  const maceGroup = new THREE.Group();
+  const pitch = 0.125;
+  const yLift = 0.152;
+  const baseY = 0.28;
+
+  const addStack = (x, z, height) => {
+    for (let level = 0; level < height; level += 1) {
+      const box = createBox({ position: [x * pitch, baseY + level * yLift, z * pitch] });
+      maceGroup.add(box);
+    }
+  };
+
+  const addStackFromLevel = (x, z, startLevel, height) => {
+    for (let level = 0; level < height; level += 1) {
+      const box = createBox({ position: [x * pitch, baseY + (startLevel + level) * yLift, z * pitch] });
+      maceGroup.add(box);
+    }
+  };
+
+  const addPrism = (xMin, xMax, zMin, zMax, height) => {
+    for (let x = xMin; x <= xMax; x += 1) {
+      for (let z = zMin; z <= zMax; z += 1) {
+        addStack(x, z, height);
+      }
+    }
+  };
+
+  // Top-down mace based on the sketched block map (23 rows tall).
+  const maceRows = [
+    '00100',
+    '01110',
+    '01110',
+    '11111',
+    '01110',
+    '01110',
+    '01110',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '01110',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '01110'
+  ];
+
+  for (let z = 0; z < maceRows.length; z += 1) {
+    const row = maceRows[z];
+    for (let i = 0; i < row.length; i += 1) {
+      const val = row[i];
+      if (val === '0') continue;
+      const x = i - 2;
+      const height = val === '2' ? 2 : 1;
+      addStack(x, z, height);
+    }
+  }
+
+  maceGroup.rotation.x = 0;
+  maceGroup.rotation.y = 0;
+  maceGroup.rotation.z = 0;
+  const maceBaseY = maceGroup.position.y;
+  scene.add(maceGroup);
+
+  const bounds = new THREE.Box3().setFromObject(maceGroup);
+  const center = new THREE.Vector3();
+  const size = new THREE.Vector3();
+  bounds.getCenter(center);
+  bounds.getSize(size);
+  const topDownFrustumSize = Math.max(size.x, size.z) * 1.2;
+
+  camera.position.set(center.x, center.y + 6, center.z + 0.0001);
+  camera.lookAt(center.x, center.y, center.z);
+
+  const controls = new OrbitControls(camera, canvas);
+  controls.enableDamping = false;
+  controls.enableZoom = false;
+  controls.enablePan = false;
+  controls.enableRotate = false;
+  controls.autoRotate = false;
+  controls.autoRotateSpeed = 0;
+  controls.target.set(center.x, center.y, center.z);
+  controls.update();
+
+  const resize = () => {
+    const width = root.clientWidth || 1;
+    const height = root.clientHeight || 1;
+    const aspect = width / height;
+    const minFrustumSize = isMobileViewport() ? mobileMinFrustumSize : desktopMinFrustumSize;
+    const fitSize = topDownFrustumSize * (isMobileViewport() ? 0.88 : 1);
+    const baseFrustumSize = Math.max(minFrustumSize, fitSize);
+    const frustumSize = baseFrustumSize / zoomFactor;
+
+    camera.left = -0.5 * frustumSize * aspect;
+    camera.right = 0.5 * frustumSize * aspect;
+    camera.top = 0.5 * frustumSize;
+    camera.bottom = -0.5 * frustumSize;
+    camera.updateProjectionMatrix();
+    renderer.setSize(width, height, false);
+  };
+
+  resize();
+  if ('ResizeObserver' in window) {
+    const observer = new ResizeObserver(resize);
+    observer.observe(root);
+  } else {
+    window.addEventListener('resize', resize);
+  }
+
+  const fortifyMix = 1;
+  const animate = () => {
+    for (let i = 0; i < faceMaterials.length; i += 1) {
+      const mat = faceMaterials[i];
+      mat.opacity = Math.min(0.74, mat.userData.baseOpacity * (1 + fortifyMix * 0.95));
+      mat.envMapIntensity = mat.userData.baseEnvMapIntensity * (1 + fortifyMix * 0.58);
+      mat.transmission = THREE.MathUtils.clamp(mat.userData.baseTransmission * (1 - fortifyMix * 0.38), 0.46, 1.0);
+      mat.thickness = mat.userData.baseThickness * (1 + fortifyMix * 0.42);
+    }
+    edgeHighlightMaterial.opacity = Math.min(0.62, baseEdgeOpacity * (1 + fortifyMix * 2.1));
+    glowShellMaterial.opacity = Math.min(0.42, baseGlowOpacity * (1 + fortifyMix * 1.4));
+    maceGroup.scale.setScalar(1);
+    maceGroup.position.y = maceBaseY;
+    controls.update();
+    renderer.render(scene, camera);
+    if (canvas.style.opacity !== '1') canvas.style.opacity = '1';
+    requestAnimationFrame(animate);
+  };
+  animate();
+</script>
diff --git a/ops/index.md b/ops/index.md
index 11a2489..0baa4ab 100644
--- a/ops/index.md
+++ b/ops/index.md
@@ -13,7 +13,9 @@ title: "Dotenvx Ops"
       </div>
     </div>
     <div class="order-1 md:order-2 w-full max-w-[24rem] md:max-w-none mx-auto md:mx-0 md:justify-self-stretch">
-      {% include v1/components/three-fortress-gated-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}
+      {% include v1/components/three-mace-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}
+      {% comment %}{% include v1/components/three-gauntlet-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}{% endcomment %}
+      {% comment %}{% include v1/components/three-fortress-gated-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}{% endcomment %}
       {% comment %}{% include v1/components/three-fortress-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}{% endcomment %}
       {% comment %}{% include v1/components/three-citadel-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}{% endcomment %}
     </div>

From f74f8d91a235cc98c1501e9c665cb82a2a8fddaf Mon Sep 17 00:00:00 2001
From: Scott Motte <mot@mot.la>
Date: Fri, 10 Apr 2026 18:33:58 -0700
Subject: [PATCH 05/17] fix

---
 _includes/v1/components/three-mace-rect.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/_includes/v1/components/three-mace-rect.html b/_includes/v1/components/three-mace-rect.html
index f55e6d8..f9c3633 100644
--- a/_includes/v1/components/three-mace-rect.html
+++ b/_includes/v1/components/three-mace-rect.html
@@ -231,9 +231,8 @@
     '00100',
     '00100',
     '00100',
-    '00100',
     '01110',
-    '00100',
+    '01110',
     '00100',
     '00100',
     '00100',

From 57c842f547ba365299e9a13f9964916bf42b102b Mon Sep 17 00:00:00 2001
From: Scott Motte <mot@mot.la>
Date: Fri, 10 Apr 2026 18:35:08 -0700
Subject: [PATCH 06/17] mace

---
 _includes/v1/components/three-mace-rect.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_includes/v1/components/three-mace-rect.html b/_includes/v1/components/three-mace-rect.html
index f9c3633..24e8389 100644
--- a/_includes/v1/components/three-mace-rect.html
+++ b/_includes/v1/components/three-mace-rect.html
@@ -232,7 +232,7 @@
     '00100',
     '00100',
     '01110',
-    '01110',
+    '00100',
     '00100',
     '00100',
     '00100',

From 9103a7775c7c715e74fad05bdd90830e5c4158d3 Mon Sep 17 00:00:00 2001
From: Scott Motte <mot@mot.la>
Date: Fri, 10 Apr 2026 18:41:58 -0700
Subject: [PATCH 07/17] add

---
 _includes/v1/components/three-mace-rect.html | 53 ++++++++++++++++----
 1 file changed, 42 insertions(+), 11 deletions(-)

diff --git a/_includes/v1/components/three-mace-rect.html b/_includes/v1/components/three-mace-rect.html
index 24e8389..cf5e657 100644
--- a/_includes/v1/components/three-mace-rect.html
+++ b/_includes/v1/components/three-mace-rect.html
@@ -165,16 +165,19 @@
     return mat;
   };
 
-  const createBox = ({ position = [0, 0.74, 0] } = {}) => {
+  const createBox = ({
+    position = [0, 0.74, 0],
+    labels = { px: 's1', nx: 's2', py: 't', ny: 'b', pz: 's3', nz: 's4' }
+  } = {}) => {
     const roughnessOffset = (Math.random() - 0.5) * 0.02;
     const thicknessOffset = (Math.random() - 0.5) * 0.18;
     const mesh = new THREE.Mesh(boxGeometry, [
-      createFaceMaterialVariant('s1', roughnessOffset, thicknessOffset, 'side'),
-      createFaceMaterialVariant('s2', roughnessOffset, thicknessOffset, 'side'),
-      createFaceMaterialVariant('t', roughnessOffset, thicknessOffset, 'top'),
-      createFaceMaterialVariant('b', roughnessOffset, thicknessOffset, 'bottom'),
-      createFaceMaterialVariant('s3', roughnessOffset, thicknessOffset, 'side'),
-      createFaceMaterialVariant('s4', roughnessOffset, thicknessOffset, 'side')
+      createFaceMaterialVariant(labels.px, roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant(labels.nx, roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant(labels.py, roughnessOffset, thicknessOffset, 'top'),
+      createFaceMaterialVariant(labels.ny, roughnessOffset, thicknessOffset, 'bottom'),
+      createFaceMaterialVariant(labels.pz, roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant(labels.nz, roughnessOffset, thicknessOffset, 'side')
     ]);
     mesh.position.set(position[0], position[1], position[2]);
     const edgeLines = new THREE.LineSegments(edgeGeometry, edgeHighlightMaterial);
@@ -191,17 +194,38 @@
   const pitch = 0.125;
   const yLift = 0.152;
   const baseY = 0.28;
+  let blockCounter = 0;
+
+  const toBlockId = (index) => {
+    let n = index;
+    let out = '';
+    do {
+      out = String.fromCharCode(65 + (n % 26)) + out;
+      n = Math.floor(n / 26) - 1;
+    } while (n >= 0);
+    return out;
+  };
 
   const addStack = (x, z, height) => {
     for (let level = 0; level < height; level += 1) {
-      const box = createBox({ position: [x * pitch, baseY + level * yLift, z * pitch] });
+      const id = toBlockId(blockCounter);
+      blockCounter += 1;
+      const box = createBox({
+        position: [x * pitch, baseY + level * yLift, z * pitch],
+        labels: { px: id, nx: id, py: id, ny: id, pz: id, nz: id }
+      });
       maceGroup.add(box);
     }
   };
 
   const addStackFromLevel = (x, z, startLevel, height) => {
     for (let level = 0; level < height; level += 1) {
-      const box = createBox({ position: [x * pitch, baseY + (startLevel + level) * yLift, z * pitch] });
+      const id = toBlockId(blockCounter);
+      blockCounter += 1;
+      const box = createBox({
+        position: [x * pitch, baseY + (startLevel + level) * yLift, z * pitch],
+        labels: { px: id, nx: id, py: id, ny: id, pz: id, nz: id }
+      });
       maceGroup.add(box);
     }
   };
@@ -216,7 +240,7 @@
 
   // Top-down mace based on the sketched block map (23 rows tall).
   const maceRows = [
-    '00100',
+    '01110',
     '01110',
     '01110',
     '11111',
@@ -251,9 +275,16 @@
     }
   }
 
+  // In the 90-degree shaft-roll view, these add the requested side pairs
+  // at two shaft positions (4 total blocks).
+  addStackFromLevel(0, 15, -1, 1);
+  addStackFromLevel(0, 15, 1, 1);
+  addStackFromLevel(0, 21, -1, 1);
+  addStackFromLevel(0, 21, 1, 1);
+
   maceGroup.rotation.x = 0;
   maceGroup.rotation.y = 0;
-  maceGroup.rotation.z = 0;
+  maceGroup.rotation.z = Math.PI / 2;
   const maceBaseY = maceGroup.position.y;
   scene.add(maceGroup);
 

From bace7da84cc0422846106f88420b79832474c6d7 Mon Sep 17 00:00:00 2001
From: Scott Motte <mot@mot.la>
Date: Fri, 10 Apr 2026 18:50:40 -0700
Subject: [PATCH 08/17] mace

---
 _includes/v1/components/three-mace-rect.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/_includes/v1/components/three-mace-rect.html b/_includes/v1/components/three-mace-rect.html
index cf5e657..a842fbd 100644
--- a/_includes/v1/components/three-mace-rect.html
+++ b/_includes/v1/components/three-mace-rect.html
@@ -276,7 +276,9 @@
   }
 
   // In the 90-degree shaft-roll view, these add the requested side pairs
-  // at two shaft positions (4 total blocks).
+  // at three shaft positions.
+  addStackFromLevel(0, 4, -1, 1);
+  addStackFromLevel(0, 4, 1, 1);
   addStackFromLevel(0, 15, -1, 1);
   addStackFromLevel(0, 15, 1, 1);
   addStackFromLevel(0, 21, -1, 1);

From 06be0ff0cfe7009428eab611569932a9e1905063 Mon Sep 17 00:00:00 2001
From: Scott Motte <mot@mot.la>
Date: Fri, 10 Apr 2026 18:56:05 -0700
Subject: [PATCH 09/17] mace

---
 _includes/v1/components/three-mace-rect.html     | 15 +++++++++++++--
 _includes/v1/components/three-standing-rect.html |  6 +-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/_includes/v1/components/three-mace-rect.html b/_includes/v1/components/three-mace-rect.html
index a842fbd..55c5304 100644
--- a/_includes/v1/components/three-mace-rect.html
+++ b/_includes/v1/components/three-mace-rect.html
@@ -275,10 +275,21 @@
     }
   }
 
-  // In the 90-degree shaft-roll view, these add the requested side pairs
-  // at three shaft positions.
+  // In the 90-degree shaft-roll view, add side pairs at requested shaft positions.
+  addStackFromLevel(0, 1, -1, 1);
+  addStackFromLevel(0, 1, 1, 1);
+  addStackFromLevel(0, 2, -1, 1);
+  addStackFromLevel(0, 2, 1, 1);
+  addStackFromLevel(0, 3, -1, 1);
+  addStackFromLevel(0, 3, 1, 1);
   addStackFromLevel(0, 4, -1, 1);
   addStackFromLevel(0, 4, 1, 1);
+  addStackFromLevel(0, 4, -2, 1);
+  addStackFromLevel(0, 4, 2, 1);
+  addStackFromLevel(0, 5, -1, 1);
+  addStackFromLevel(0, 5, 1, 1);
+  addStackFromLevel(0, 6, -1, 1);
+  addStackFromLevel(0, 6, 1, 1);
   addStackFromLevel(0, 15, -1, 1);
   addStackFromLevel(0, 15, 1, 1);
   addStackFromLevel(0, 21, -1, 1);
diff --git a/_includes/v1/components/three-standing-rect.html b/_includes/v1/components/three-standing-rect.html
index 0d9e0f4..6ed6715 100644
--- a/_includes/v1/components/three-standing-rect.html
+++ b/_includes/v1/components/three-standing-rect.html
@@ -106,11 +106,7 @@
     ctx.clearRect(0, 0, 128, 128);
     ctx.fillStyle = 'rgba(99, 104, 113, 0.24)';
     ctx.fillRect(0, 0, 128, 128);
-    ctx.fillStyle = 'rgba(217, 191, 117, 0.82)';
-    ctx.font = '500 16px sans-serif';
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(label, 64, 64);
+    // Intentionally no face text labels on homepage key blocks.
     const texture = new THREE.CanvasTexture(c);
     texture.colorSpace = THREE.SRGBColorSpace;
     texture.needsUpdate = true;

From 2804b9babe6a9168e6791a36c697807fc010a7da Mon Sep 17 00:00:00 2001
From: Scott Motte <mot@mot.la>
Date: Fri, 10 Apr 2026 19:02:42 -0700
Subject: [PATCH 10/17] mace

---
 ...standing-rect.html => three-key-rect.html} |  0
 _includes/v1/components/three-mace-rect.html  | 78 ++++++++++---------
 banner.md                                     |  2 +-
 index.md                                      |  2 +-
 4 files changed, 42 insertions(+), 40 deletions(-)
 rename _includes/v1/components/{three-standing-rect.html => three-key-rect.html} (100%)

diff --git a/_includes/v1/components/three-standing-rect.html b/_includes/v1/components/three-key-rect.html
similarity index 100%
rename from _includes/v1/components/three-standing-rect.html
rename to _includes/v1/components/three-key-rect.html
diff --git a/_includes/v1/components/three-mace-rect.html b/_includes/v1/components/three-mace-rect.html
index 55c5304..586ddb7 100644
--- a/_includes/v1/components/three-mace-rect.html
+++ b/_includes/v1/components/three-mace-rect.html
@@ -66,15 +66,15 @@
   const boxGeometry = new THREE.BoxGeometry(0.12, 0.1662, 0.12);
   const edgeGeometry = new THREE.EdgesGeometry(boxGeometry);
   const edgeHighlightMaterial = new THREE.LineBasicMaterial({
-    color: 0xdfe6ef,
+    color: 0xe6edf7,
     transparent: true,
-    opacity: 0.28,
+    opacity: 0.42,
     toneMapped: false
   });
   const glowShellMaterial = new THREE.MeshBasicMaterial({
-    color: 0xc7d8ea,
+    color: 0xd6e2f0,
     transparent: true,
-    opacity: 0.2,
+    opacity: 0.12,
     blending: THREE.AdditiveBlending,
     side: THREE.BackSide,
     depthWrite: false,
@@ -96,13 +96,9 @@
     c.height = 128;
     const ctx = c.getContext('2d');
     ctx.clearRect(0, 0, 128, 128);
-    ctx.fillStyle = 'rgba(99, 104, 113, 0.24)';
+    ctx.fillStyle = 'rgba(112, 122, 136, 0.16)';
     ctx.fillRect(0, 0, 128, 128);
-    ctx.fillStyle = 'rgba(210, 220, 233, 0.84)';
-    ctx.font = '500 16px sans-serif';
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(label, 64, 64);
+    // Intentionally no face text labels on mace blocks.
     const texture = new THREE.CanvasTexture(c);
     texture.colorSpace = THREE.SRGBColorSpace;
     texture.needsUpdate = true;
@@ -117,20 +113,20 @@
   const getFaceMaterial = (label) => {
     if (!materialCache.has(label)) {
       materialCache.set(label, new THREE.MeshPhysicalMaterial({
-        color: 0xf2f6fb,
+        color: 0xb7c2cf,
         transparent: true,
-        opacity: 0.72,
+        opacity: 0.94,
         map: getLabelTexture(label),
-        metalness: 0.0,
-        roughness: baseRoughness,
-        transmission: 0.88,
-        thickness: baseThickness,
+        metalness: 0.86,
+        roughness: 0.2,
+        transmission: 0.08,
+        thickness: 0.22,
         ior: 1.5,
-        clearcoat: 1.0,
-        clearcoatRoughness: 0.035,
-        attenuationColor: 0x90a4ba,
+        clearcoat: 0.65,
+        clearcoatRoughness: 0.08,
+        attenuationColor: 0x8f9aab,
         attenuationDistance: 2.2,
-        envMapIntensity: 2.05
+        envMapIntensity: 2.35
       }));
     }
     return materialCache.get(label);
@@ -141,21 +137,23 @@
     mat.roughness = THREE.MathUtils.clamp(baseRoughness + roughnessOffset, 0.006, 0.06);
     mat.thickness = THREE.MathUtils.clamp(baseThickness + thicknessOffset, 1.35, 1.9);
     if (faceRole === 'top') {
-      mat.opacity = 0.36;
-      mat.transmission = 0.92;
-      mat.roughness = Math.min(0.06, mat.roughness + 0.004);
-      mat.thickness = 0.24;
-      mat.clearcoatRoughness = 0.03;
+      mat.opacity = 0.96;
+      mat.transmission = 0.06;
+      mat.roughness = 0.16;
+      mat.thickness = 0.2;
+      mat.clearcoatRoughness = 0.06;
     } else if (faceRole === 'bottom') {
-      mat.opacity = 0.44;
-      mat.transmission = 0.8;
-      mat.thickness = 0.58;
-      mat.clearcoatRoughness = 0.05;
+      mat.opacity = 0.92;
+      mat.transmission = 0.05;
+      mat.roughness = 0.24;
+      mat.thickness = 0.2;
+      mat.clearcoatRoughness = 0.1;
     } else {
-      mat.opacity = 0.46;
-      mat.transmission = 0.9;
-      mat.thickness = 0.5;
-      mat.clearcoatRoughness = 0.032;
+      mat.opacity = 0.94;
+      mat.transmission = 0.07;
+      mat.roughness = 0.2;
+      mat.thickness = 0.22;
+      mat.clearcoatRoughness = 0.08;
     }
     mat.userData.baseOpacity = mat.opacity;
     mat.userData.baseEnvMapIntensity = mat.envMapIntensity;
@@ -240,7 +238,7 @@
 
   // Top-down mace based on the sketched block map (23 rows tall).
   const maceRows = [
-    '01110',
+    '00100',
     '01110',
     '01110',
     '11111',
@@ -284,8 +282,8 @@
   addStackFromLevel(0, 3, 1, 1);
   addStackFromLevel(0, 4, -1, 1);
   addStackFromLevel(0, 4, 1, 1);
-  addStackFromLevel(0, 4, -2, 1);
-  addStackFromLevel(0, 4, 2, 1);
+  addStackFromLevel(0, 3, -2, 1);
+  addStackFromLevel(0, 3, 2, 1);
   addStackFromLevel(0, 5, -1, 1);
   addStackFromLevel(0, 5, 1, 1);
   addStackFromLevel(0, 6, -1, 1);
@@ -316,10 +314,12 @@
   controls.enableZoom = false;
   controls.enablePan = false;
   controls.enableRotate = false;
-  controls.autoRotate = false;
-  controls.autoRotateSpeed = 0;
+  controls.autoRotate = true;
+  controls.autoRotateSpeed = 0.22;
   controls.target.set(center.x, center.y, center.z);
   controls.update();
+  const clock = new THREE.Clock();
+  const shaftSpinSpeed = 0.14; // radians/sec
 
   const resize = () => {
     const width = root.clientWidth || 1;
@@ -348,6 +348,7 @@
 
   const fortifyMix = 1;
   const animate = () => {
+    const delta = clock.getDelta();
     for (let i = 0; i < faceMaterials.length; i += 1) {
       const mat = faceMaterials[i];
       mat.opacity = Math.min(0.74, mat.userData.baseOpacity * (1 + fortifyMix * 0.95));
@@ -359,6 +360,7 @@
     glowShellMaterial.opacity = Math.min(0.42, baseGlowOpacity * (1 + fortifyMix * 1.4));
     maceGroup.scale.setScalar(1);
     maceGroup.position.y = maceBaseY;
+    maceGroup.rotateZ(shaftSpinSpeed * delta);
     controls.update();
     renderer.render(scene, camera);
     if (canvas.style.opacity !== '1') canvas.style.opacity = '1';
diff --git a/banner.md b/banner.md
index 2fe13cc..7dfdf42 100644
--- a/banner.md
+++ b/banner.md
@@ -15,7 +15,7 @@ hide_nav: true
     </div>
     <div class="w-full flex flex-row gap-1 items-center justify-end">
       <a class="btn-primary w-full max-w-md md:w-auto text-center" href="/signup">Get Started</a>
-      {% include v1/components/three-standing-rect.html height="140px" class="!h-[140px]" zoom="2.2" %}
+      {% include v1/components/three-key-rect.html height="140px" class="!h-[140px]" zoom="2.2" %}
     </div>
   </div>
 </section>
diff --git a/index.md b/index.md
index b8a69fd..857fb1e 100644
--- a/index.md
+++ b/index.md
@@ -14,7 +14,7 @@ title: ""
       </div>
     </div>
     <div class="order-1 md:order-2 w-full max-w-[24rem] md:max-w-none mx-auto md:mx-0 md:justify-self-stretch">
-      {% include v1/components/three-standing-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}
+      {% include v1/components/three-key-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}
     </div>
   </div>
 </section>

From 905e7ed0e8ce5241cd37416fe80f236aef18af77 Mon Sep 17 00:00:00 2001
From: Scott Motte <mot@mot.la>
Date: Fri, 10 Apr 2026 20:52:08 -0700
Subject: [PATCH 11/17] buckler

---
 .../v1/components/three-buckler-rect.html     | 324 ++++++++++++++++++
 _includes/v1/components/three-mace-rect.html  |  52 +--
 ops/index.md                                  |   2 +-
 3 files changed, 335 insertions(+), 43 deletions(-)
 create mode 100644 _includes/v1/components/three-buckler-rect.html

diff --git a/_includes/v1/components/three-buckler-rect.html b/_includes/v1/components/three-buckler-rect.html
new file mode 100644
index 0000000..7d1e54f
--- /dev/null
+++ b/_includes/v1/components/three-buckler-rect.html
@@ -0,0 +1,324 @@
+<div
+  class="{{ include.class }} relative overflow-hidden"
+  data-ops-buckler
+  style="height: {{ include.height | default: '320px' }};"
+>
+  <canvas
+    class="block h-full w-full"
+    style="opacity: 0; -webkit-mask-image: radial-gradient(120% 112% at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,0.92) 74%, rgba(0,0,0,0.48) 85%, rgba(0,0,0,0.1) 93%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(120% 112% at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,0.92) 74%, rgba(0,0,0,0.48) 85%, rgba(0,0,0,0.1) 93%, rgba(0,0,0,0) 100%);"
+  ></canvas>
+</div>
+
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://unpkg.com/three@0.167.1/build/three.module.js",
+    "three/addons/": "https://unpkg.com/three@0.167.1/examples/jsm/"
+  }
+}
+</script>
+
+<script type="module">
+  import * as THREE from 'three';
+  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+  import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
+
+  const root = document.querySelector('[data-ops-buckler]:not([data-three-mounted])');
+  if (!root) throw new Error('ops-buckler mount target not found');
+
+  root.setAttribute('data-three-mounted', 'true');
+  const canvas = root.querySelector('canvas');
+  canvas.style.transition = 'opacity 300ms ease-out';
+
+  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+  const scene = new THREE.Scene();
+  const desktopMinFrustumSize = 1.05;
+  const mobileMinFrustumSize = 0.95;
+  const includeZoom = Number({{ include.zoom | default: 1 }});
+  const zoomFactor = Number.isFinite(includeZoom) && includeZoom > 0 ? includeZoom : 1;
+  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 100);
+
+  scene.background = null;
+  renderer.setClearColor(0x000000, 0);
+  camera.up.set(0, 1, 0);
+  camera.position.set(0, 6, 0.001);
+  camera.lookAt(0, 0.74, 0);
+
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+  renderer.outputColorSpace = THREE.SRGBColorSpace;
+  renderer.toneMapping = THREE.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 1.28;
+  renderer.physicallyCorrectLights = true;
+
+  const pmremGenerator = new THREE.PMREMGenerator(renderer);
+  const envRT = pmremGenerator.fromScene(new RoomEnvironment(), 0.04);
+  scene.environment = envRT.texture;
+  pmremGenerator.dispose();
+
+  scene.add(new THREE.AmbientLight(0xffffff, 0.65));
+  const keyLight = new THREE.DirectionalLight(0xbfe3ff, 2.8);
+  keyLight.position.set(3, 5, 4);
+  scene.add(keyLight);
+  const rimLight = new THREE.DirectionalLight(0xffffff, 2.2);
+  rimLight.position.set(-4, 2.5, -3);
+  scene.add(rimLight);
+
+  const boxGeometry = new THREE.BoxGeometry(0.06, 0.0831, 0.06);
+  const edgeGeometry = new THREE.EdgesGeometry(boxGeometry);
+  const edgeHighlightMaterial = new THREE.LineBasicMaterial({
+    color: 0xe6edf7,
+    transparent: true,
+    opacity: 0.42,
+    toneMapped: false
+  });
+  const glowShellMaterial = new THREE.MeshBasicMaterial({
+    color: 0xd6e2f0,
+    transparent: true,
+    opacity: 0.12,
+    blending: THREE.AdditiveBlending,
+    side: THREE.BackSide,
+    depthWrite: false,
+    toneMapped: false
+  });
+
+  const labelTextureCache = new Map();
+  const materialCache = new Map();
+  const faceMaterials = [];
+  const baseRoughness = 0.045;
+  const baseThickness = 1.1;
+  const baseEdgeOpacity = edgeHighlightMaterial.opacity;
+  const baseGlowOpacity = glowShellMaterial.opacity;
+  const isMobileViewport = () => window.matchMedia('(max-width: 767px)').matches;
+
+  const buildLabelTexture = (label) => {
+    const c = document.createElement('canvas');
+    c.width = 128;
+    c.height = 128;
+    const ctx = c.getContext('2d');
+    ctx.clearRect(0, 0, 128, 128);
+    ctx.fillStyle = 'rgba(112, 122, 136, 0.16)';
+    ctx.fillRect(0, 0, 128, 128);
+    // Intentionally no face text labels on mace blocks.
+    const texture = new THREE.CanvasTexture(c);
+    texture.colorSpace = THREE.SRGBColorSpace;
+    texture.needsUpdate = true;
+    return texture;
+  };
+
+  const getLabelTexture = (label) => {
+    if (!labelTextureCache.has(label)) labelTextureCache.set(label, buildLabelTexture(label));
+    return labelTextureCache.get(label);
+  };
+
+  const getFaceMaterial = (label) => {
+    if (!materialCache.has(label)) {
+      materialCache.set(label, new THREE.MeshPhysicalMaterial({
+        color: 0xb7c2cf,
+        transparent: true,
+        opacity: 0.94,
+        map: getLabelTexture(label),
+        metalness: 0.86,
+        roughness: 0.2,
+        transmission: 0.08,
+        thickness: 0.22,
+        ior: 1.5,
+        clearcoat: 0.65,
+        clearcoatRoughness: 0.08,
+        attenuationColor: 0x8f9aab,
+        attenuationDistance: 2.2,
+        envMapIntensity: 2.35
+      }));
+    }
+    return materialCache.get(label);
+  };
+
+  const createFaceMaterialVariant = (label, roughnessOffset, thicknessOffset, faceRole) => {
+    const mat = getFaceMaterial(label).clone();
+    mat.roughness = THREE.MathUtils.clamp(baseRoughness + roughnessOffset, 0.006, 0.06);
+    mat.thickness = THREE.MathUtils.clamp(baseThickness + thicknessOffset, 1.35, 1.9);
+    if (faceRole === 'top') {
+      mat.opacity = 0.96;
+      mat.transmission = 0.06;
+      mat.roughness = 0.16;
+      mat.thickness = 0.2;
+      mat.clearcoatRoughness = 0.06;
+    } else if (faceRole === 'bottom') {
+      mat.opacity = 0.92;
+      mat.transmission = 0.05;
+      mat.roughness = 0.24;
+      mat.thickness = 0.2;
+      mat.clearcoatRoughness = 0.1;
+    } else {
+      mat.opacity = 0.94;
+      mat.transmission = 0.07;
+      mat.roughness = 0.2;
+      mat.thickness = 0.22;
+      mat.clearcoatRoughness = 0.08;
+    }
+    mat.userData.baseOpacity = mat.opacity;
+    mat.userData.baseEnvMapIntensity = mat.envMapIntensity;
+    mat.userData.baseTransmission = mat.transmission;
+    mat.userData.baseThickness = mat.thickness;
+    faceMaterials.push(mat);
+    return mat;
+  };
+
+  const createBox = ({ position = [0, 0.74, 0] } = {}) => {
+    const roughnessOffset = (Math.random() - 0.5) * 0.02;
+    const thicknessOffset = (Math.random() - 0.5) * 0.18;
+    const mesh = new THREE.Mesh(boxGeometry, [
+      createFaceMaterialVariant('s1', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('s2', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('t', roughnessOffset, thicknessOffset, 'top'),
+      createFaceMaterialVariant('b', roughnessOffset, thicknessOffset, 'bottom'),
+      createFaceMaterialVariant('s3', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('s4', roughnessOffset, thicknessOffset, 'side')
+    ]);
+    mesh.position.set(position[0], position[1], position[2]);
+    const edgeLines = new THREE.LineSegments(edgeGeometry, edgeHighlightMaterial);
+    edgeLines.renderOrder = 2;
+    mesh.add(edgeLines);
+    const glowShell = new THREE.Mesh(boxGeometry, glowShellMaterial);
+    glowShell.scale.set(1.12, 1.12, 1.12);
+    glowShell.renderOrder = 0;
+    mesh.add(glowShell);
+    return mesh;
+  };
+
+  const bucklerGroup = new THREE.Group();
+  const pitch = 0.0625;
+  const yLift = 0.076;
+  const baseY = 0.28;
+
+  const addStack = (x, z, height) => {
+    for (let level = 0; level < height; level += 1) {
+      const box = createBox({ position: [x * pitch, baseY + level * yLift, z * pitch] });
+      bucklerGroup.add(box);
+    }
+  };
+
+  const addStackFromLevel = (x, z, startLevel, height) => {
+    for (let level = 0; level < height; level += 1) {
+      const box = createBox({ position: [x * pitch, baseY + (startLevel + level) * yLift, z * pitch] });
+      bucklerGroup.add(box);
+    }
+  };
+
+  // Buckler base map shaped like ⛨ (shield silhouette with cross cutout),
+  // then upscaled for higher detail density.
+  const bucklerBaseRows = [
+    '01111111110',
+    '11111111111',
+    '11111111111',
+    '11111111111',
+    '11111011111',
+    '11111011111',
+    '11100000111',
+    '11111011111',
+    '11111011111',
+    '11111011111',
+    '01111111110',
+    '00111111100',
+    '00111111100',
+    '00011111000',
+    '00001110000',
+    '00000100000'
+  ];
+
+  const upscaleRows = (rows, scale = 2) => {
+    const out = [];
+    for (let r = 0; r < rows.length; r += 1) {
+      const src = rows[r];
+      let expanded = '';
+      for (let i = 0; i < src.length; i += 1) {
+        expanded += src[i].repeat(scale);
+      }
+      for (let k = 0; k < scale; k += 1) out.push(expanded);
+    }
+    return out;
+  };
+  const bucklerRows = upscaleRows(bucklerBaseRows, 2);
+
+  for (let z = 0; z < bucklerRows.length; z += 1) {
+    const row = bucklerRows[z];
+    for (let i = 0; i < row.length; i += 1) {
+      const val = row[i];
+      if (val === '0') continue;
+      const x = i - ((row.length - 1) / 2);
+      const height = val === '2' ? 2 : 1;
+      addStack(x, z, height);
+    }
+  }
+
+  // Locked top-down pose for precise editing.
+  bucklerGroup.rotation.x = 0;
+  bucklerGroup.rotation.y = 0;
+  bucklerGroup.rotation.z = 0;
+  const bucklerBaseY = bucklerGroup.position.y;
+  scene.add(bucklerGroup);
+
+  const bounds = new THREE.Box3().setFromObject(bucklerGroup);
+  const center = new THREE.Vector3();
+  const size = new THREE.Vector3();
+  bounds.getCenter(center);
+  bounds.getSize(size);
+  const topDownFrustumSize = Math.max(size.x, size.z) * 1.18;
+
+  camera.position.set(center.x, center.y + 6, center.z + 0.0001);
+  camera.lookAt(center.x, center.y, center.z);
+
+  const controls = new OrbitControls(camera, canvas);
+  controls.enableDamping = false;
+  controls.enableZoom = false;
+  controls.enablePan = false;
+  controls.enableRotate = false;
+  controls.autoRotate = false;
+  controls.autoRotateSpeed = 0;
+  controls.target.set(center.x, center.y, center.z);
+  controls.update();
+
+  const resize = () => {
+    const width = root.clientWidth || 1;
+    const height = root.clientHeight || 1;
+    const aspect = width / height;
+    const minFrustumSize = isMobileViewport() ? mobileMinFrustumSize : desktopMinFrustumSize;
+    const fitSize = topDownFrustumSize * (isMobileViewport() ? 0.9 : 1);
+    const baseFrustumSize = Math.max(minFrustumSize, fitSize);
+    const frustumSize = baseFrustumSize / zoomFactor;
+
+    camera.left = -0.5 * frustumSize * aspect;
+    camera.right = 0.5 * frustumSize * aspect;
+    camera.top = 0.5 * frustumSize;
+    camera.bottom = -0.5 * frustumSize;
+    camera.updateProjectionMatrix();
+    renderer.setSize(width, height, false);
+  };
+
+  resize();
+  if ('ResizeObserver' in window) {
+    const observer = new ResizeObserver(resize);
+    observer.observe(root);
+  } else {
+    window.addEventListener('resize', resize);
+  }
+
+  const fortifyMix = 1;
+  const animate = () => {
+    for (let i = 0; i < faceMaterials.length; i += 1) {
+      const mat = faceMaterials[i];
+      mat.opacity = Math.min(0.74, mat.userData.baseOpacity * (1 + fortifyMix * 0.95));
+      mat.envMapIntensity = mat.userData.baseEnvMapIntensity * (1 + fortifyMix * 0.58);
+      mat.transmission = THREE.MathUtils.clamp(mat.userData.baseTransmission * (1 - fortifyMix * 0.38), 0.46, 1.0);
+      mat.thickness = mat.userData.baseThickness * (1 + fortifyMix * 0.42);
+    }
+    edgeHighlightMaterial.opacity = Math.min(0.62, baseEdgeOpacity * (1 + fortifyMix * 2.1));
+    glowShellMaterial.opacity = Math.min(0.42, baseGlowOpacity * (1 + fortifyMix * 1.4));
+    bucklerGroup.scale.setScalar(1);
+    bucklerGroup.position.y = bucklerBaseY;
+    controls.update();
+    renderer.render(scene, camera);
+    if (canvas.style.opacity !== '1') canvas.style.opacity = '1';
+    requestAnimationFrame(animate);
+  };
+  animate();
+</script>
diff --git a/_includes/v1/components/three-mace-rect.html b/_includes/v1/components/three-mace-rect.html
index 586ddb7..80ea6bc 100644
--- a/_includes/v1/components/three-mace-rect.html
+++ b/_includes/v1/components/three-mace-rect.html
@@ -163,19 +163,16 @@
     return mat;
   };
 
-  const createBox = ({
-    position = [0, 0.74, 0],
-    labels = { px: 's1', nx: 's2', py: 't', ny: 'b', pz: 's3', nz: 's4' }
-  } = {}) => {
+  const createBox = ({ position = [0, 0.74, 0] } = {}) => {
     const roughnessOffset = (Math.random() - 0.5) * 0.02;
     const thicknessOffset = (Math.random() - 0.5) * 0.18;
     const mesh = new THREE.Mesh(boxGeometry, [
-      createFaceMaterialVariant(labels.px, roughnessOffset, thicknessOffset, 'side'),
-      createFaceMaterialVariant(labels.nx, roughnessOffset, thicknessOffset, 'side'),
-      createFaceMaterialVariant(labels.py, roughnessOffset, thicknessOffset, 'top'),
-      createFaceMaterialVariant(labels.ny, roughnessOffset, thicknessOffset, 'bottom'),
-      createFaceMaterialVariant(labels.pz, roughnessOffset, thicknessOffset, 'side'),
-      createFaceMaterialVariant(labels.nz, roughnessOffset, thicknessOffset, 'side')
+      createFaceMaterialVariant('s1', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('s2', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('t', roughnessOffset, thicknessOffset, 'top'),
+      createFaceMaterialVariant('b', roughnessOffset, thicknessOffset, 'bottom'),
+      createFaceMaterialVariant('s3', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('s4', roughnessOffset, thicknessOffset, 'side')
     ]);
     mesh.position.set(position[0], position[1], position[2]);
     const edgeLines = new THREE.LineSegments(edgeGeometry, edgeHighlightMaterial);
@@ -192,51 +189,22 @@
   const pitch = 0.125;
   const yLift = 0.152;
   const baseY = 0.28;
-  let blockCounter = 0;
-
-  const toBlockId = (index) => {
-    let n = index;
-    let out = '';
-    do {
-      out = String.fromCharCode(65 + (n % 26)) + out;
-      n = Math.floor(n / 26) - 1;
-    } while (n >= 0);
-    return out;
-  };
 
   const addStack = (x, z, height) => {
     for (let level = 0; level < height; level += 1) {
-      const id = toBlockId(blockCounter);
-      blockCounter += 1;
-      const box = createBox({
-        position: [x * pitch, baseY + level * yLift, z * pitch],
-        labels: { px: id, nx: id, py: id, ny: id, pz: id, nz: id }
-      });
+      const box = createBox({ position: [x * pitch, baseY + level * yLift, z * pitch] });
       maceGroup.add(box);
     }
   };
 
   const addStackFromLevel = (x, z, startLevel, height) => {
     for (let level = 0; level < height; level += 1) {
-      const id = toBlockId(blockCounter);
-      blockCounter += 1;
-      const box = createBox({
-        position: [x * pitch, baseY + (startLevel + level) * yLift, z * pitch],
-        labels: { px: id, nx: id, py: id, ny: id, pz: id, nz: id }
-      });
+      const box = createBox({ position: [x * pitch, baseY + (startLevel + level) * yLift, z * pitch] });
       maceGroup.add(box);
     }
   };
 
-  const addPrism = (xMin, xMax, zMin, zMax, height) => {
-    for (let x = xMin; x <= xMax; x += 1) {
-      for (let z = zMin; z <= zMax; z += 1) {
-        addStack(x, z, height);
-      }
-    }
-  };
-
-  // Top-down mace based on the sketched block map (23 rows tall).
+  // Mace block map (top-down footprint).
   const maceRows = [
     '00100',
     '01110',
diff --git a/ops/index.md b/ops/index.md
index 0baa4ab..6d75b8e 100644
--- a/ops/index.md
+++ b/ops/index.md
@@ -13,7 +13,7 @@ title: "Dotenvx Ops"
       </div>
     </div>
     <div class="order-1 md:order-2 w-full max-w-[24rem] md:max-w-none mx-auto md:mx-0 md:justify-self-stretch">
-      {% include v1/components/three-mace-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}
+      {% include v1/components/three-buckler-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}
       {% comment %}{% include v1/components/three-gauntlet-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}{% endcomment %}
       {% comment %}{% include v1/components/three-fortress-gated-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}{% endcomment %}
       {% comment %}{% include v1/components/three-fortress-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}{% endcomment %}

From d1f7db8efbbdc7fae71c4fb3b12ce4f4c222785b Mon Sep 17 00:00:00 2001
From: Scott Motte <mot@mot.la>
Date: Fri, 10 Apr 2026 21:12:59 -0700
Subject: [PATCH 12/17] combined

---
 .../components/three-buckler-mace-rect.html   | 368 ++++++++++++++++++
 .../v1/components/three-buckler-rect.html     |  15 +-
 ops/index.md                                  |   2 +-
 3 files changed, 377 insertions(+), 8 deletions(-)
 create mode 100644 _includes/v1/components/three-buckler-mace-rect.html

diff --git a/_includes/v1/components/three-buckler-mace-rect.html b/_includes/v1/components/three-buckler-mace-rect.html
new file mode 100644
index 0000000..58c9d34
--- /dev/null
+++ b/_includes/v1/components/three-buckler-mace-rect.html
@@ -0,0 +1,368 @@
+<div
+  class="{{ include.class }} relative overflow-hidden"
+  data-ops-buckler-mace
+  style="height: {{ include.height | default: '320px' }};"
+>
+  <canvas
+    class="block h-full w-full"
+    style="opacity: 0; -webkit-mask-image: radial-gradient(120% 112% at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,0.92) 74%, rgba(0,0,0,0.48) 85%, rgba(0,0,0,0.1) 93%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(120% 112% at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,0.92) 74%, rgba(0,0,0,0.48) 85%, rgba(0,0,0,0.1) 93%, rgba(0,0,0,0) 100%);"
+  ></canvas>
+</div>
+
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://unpkg.com/three@0.167.1/build/three.module.js",
+    "three/addons/": "https://unpkg.com/three@0.167.1/examples/jsm/"
+  }
+}
+</script>
+
+<script type="module">
+  import * as THREE from 'three';
+  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+  import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
+
+  const root = document.querySelector('[data-ops-buckler-mace]:not([data-three-mounted])');
+  if (!root) throw new Error('ops-buckler-mace mount target not found');
+
+  root.setAttribute('data-three-mounted', 'true');
+  const canvas = root.querySelector('canvas');
+  canvas.style.transition = 'opacity 300ms ease-out';
+
+  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+  const scene = new THREE.Scene();
+  const desktopMinFrustumSize = 1.05;
+  const mobileMinFrustumSize = 0.95;
+  const includeZoom = Number({{ include.zoom | default: 1 }});
+  const zoomFactor = Number.isFinite(includeZoom) && includeZoom > 0 ? includeZoom : 1;
+  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 100);
+
+  scene.background = null;
+  renderer.setClearColor(0x000000, 0);
+  camera.up.set(0, 1, 0);
+  camera.position.set(0, 6, 0.001);
+  camera.lookAt(0, 0.74, 0);
+
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+  renderer.outputColorSpace = THREE.SRGBColorSpace;
+  renderer.toneMapping = THREE.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 1.28;
+  renderer.physicallyCorrectLights = true;
+
+  const pmremGenerator = new THREE.PMREMGenerator(renderer);
+  const envRT = pmremGenerator.fromScene(new RoomEnvironment(), 0.04);
+  scene.environment = envRT.texture;
+  pmremGenerator.dispose();
+
+  scene.add(new THREE.AmbientLight(0xffffff, 0.65));
+  const keyLight = new THREE.DirectionalLight(0xbfe3ff, 2.8);
+  keyLight.position.set(3, 5, 4);
+  scene.add(keyLight);
+  const rimLight = new THREE.DirectionalLight(0xffffff, 2.2);
+  rimLight.position.set(-4, 2.5, -3);
+  scene.add(rimLight);
+
+  const boxGeometry = new THREE.BoxGeometry(0.12, 0.1662, 0.12);
+  const edgeGeometry = new THREE.EdgesGeometry(boxGeometry);
+  const edgeHighlightMaterial = new THREE.LineBasicMaterial({
+    color: 0xe6edf7,
+    transparent: true,
+    opacity: 0.42,
+    toneMapped: false
+  });
+  const glowShellMaterial = new THREE.MeshBasicMaterial({
+    color: 0xd6e2f0,
+    transparent: true,
+    opacity: 0.12,
+    blending: THREE.AdditiveBlending,
+    side: THREE.BackSide,
+    depthWrite: false,
+    toneMapped: false
+  });
+
+  const labelTextureCache = new Map();
+  const materialCache = new Map();
+  const faceMaterials = [];
+  const baseRoughness = 0.045;
+  const baseThickness = 1.1;
+  const baseEdgeOpacity = edgeHighlightMaterial.opacity;
+  const baseGlowOpacity = glowShellMaterial.opacity;
+  const isMobileViewport = () => window.matchMedia('(max-width: 767px)').matches;
+
+  const buildLabelTexture = (label) => {
+    const c = document.createElement('canvas');
+    c.width = 128;
+    c.height = 128;
+    const ctx = c.getContext('2d');
+    ctx.clearRect(0, 0, 128, 128);
+    ctx.fillStyle = 'rgba(112, 122, 136, 0.16)';
+    ctx.fillRect(0, 0, 128, 128);
+    // Intentionally no face text labels on mace blocks.
+    const texture = new THREE.CanvasTexture(c);
+    texture.colorSpace = THREE.SRGBColorSpace;
+    texture.needsUpdate = true;
+    return texture;
+  };
+
+  const getLabelTexture = (label) => {
+    if (!labelTextureCache.has(label)) labelTextureCache.set(label, buildLabelTexture(label));
+    return labelTextureCache.get(label);
+  };
+
+  const getFaceMaterial = (label) => {
+    if (!materialCache.has(label)) {
+      materialCache.set(label, new THREE.MeshPhysicalMaterial({
+        color: 0xb7c2cf,
+        transparent: true,
+        opacity: 0.94,
+        map: getLabelTexture(label),
+        metalness: 0.86,
+        roughness: 0.2,
+        transmission: 0.08,
+        thickness: 0.22,
+        ior: 1.5,
+        clearcoat: 0.65,
+        clearcoatRoughness: 0.08,
+        attenuationColor: 0x8f9aab,
+        attenuationDistance: 2.2,
+        envMapIntensity: 2.35
+      }));
+    }
+    return materialCache.get(label);
+  };
+
+  const createFaceMaterialVariant = (label, roughnessOffset, thicknessOffset, faceRole) => {
+    const mat = getFaceMaterial(label).clone();
+    mat.roughness = THREE.MathUtils.clamp(baseRoughness + roughnessOffset, 0.006, 0.06);
+    mat.thickness = THREE.MathUtils.clamp(baseThickness + thicknessOffset, 1.35, 1.9);
+    if (faceRole === 'top') {
+      mat.opacity = 0.96;
+      mat.transmission = 0.06;
+      mat.roughness = 0.16;
+      mat.thickness = 0.2;
+      mat.clearcoatRoughness = 0.06;
+    } else if (faceRole === 'bottom') {
+      mat.opacity = 0.92;
+      mat.transmission = 0.05;
+      mat.roughness = 0.24;
+      mat.thickness = 0.2;
+      mat.clearcoatRoughness = 0.1;
+    } else {
+      mat.opacity = 0.94;
+      mat.transmission = 0.07;
+      mat.roughness = 0.2;
+      mat.thickness = 0.22;
+      mat.clearcoatRoughness = 0.08;
+    }
+    mat.userData.baseOpacity = mat.opacity;
+    mat.userData.baseEnvMapIntensity = mat.envMapIntensity;
+    mat.userData.baseTransmission = mat.transmission;
+    mat.userData.baseThickness = mat.thickness;
+    faceMaterials.push(mat);
+    return mat;
+  };
+
+  const createBox = ({ position = [0, 0.74, 0] } = {}) => {
+    const roughnessOffset = (Math.random() - 0.5) * 0.02;
+    const thicknessOffset = (Math.random() - 0.5) * 0.18;
+    const mesh = new THREE.Mesh(boxGeometry, [
+      createFaceMaterialVariant('s1', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('s2', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('t', roughnessOffset, thicknessOffset, 'top'),
+      createFaceMaterialVariant('b', roughnessOffset, thicknessOffset, 'bottom'),
+      createFaceMaterialVariant('s3', roughnessOffset, thicknessOffset, 'side'),
+      createFaceMaterialVariant('s4', roughnessOffset, thicknessOffset, 'side')
+    ]);
+    mesh.position.set(position[0], position[1], position[2]);
+    const edgeLines = new THREE.LineSegments(edgeGeometry, edgeHighlightMaterial);
+    edgeLines.renderOrder = 2;
+    mesh.add(edgeLines);
+    const glowShell = new THREE.Mesh(boxGeometry, glowShellMaterial);
+    glowShell.scale.set(1.12, 1.12, 1.12);
+    glowShell.renderOrder = 0;
+    mesh.add(glowShell);
+    return mesh;
+  };
+
+  const bucklerGroup = new THREE.Group();
+  const pitch = 0.125;
+  const yLift = 0.152;
+  const baseY = 0.28;
+
+  const addStack = (x, z, height) => {
+    for (let level = 0; level < height; level += 1) {
+      const box = createBox({ position: [x * pitch, baseY + level * yLift, z * pitch] });
+      bucklerGroup.add(box);
+    }
+  };
+
+  const addStackFromLevel = (x, z, startLevel, height) => {
+    for (let level = 0; level < height; level += 1) {
+      const box = createBox({ position: [x * pitch, baseY + (startLevel + level) * yLift, z * pitch] });
+      bucklerGroup.add(box);
+    }
+  };
+
+  const addStackToGroup = (group, x, z, height, startLevel = 0) => {
+    for (let level = 0; level < height; level += 1) {
+      const box = createBox({ position: [x * pitch, baseY + (startLevel + level) * yLift, z * pitch] });
+      group.add(box);
+    }
+  };
+
+  // Buckler base map.
+  const bucklerBaseRows = [
+    '01111111110',
+    '11111111111',
+    '11111111111',
+    '11111111111',
+    '11111111111',
+    '11111111111',
+    '11111111111',
+    '11111111111',
+    '11111111111',
+    '01111111110',
+    '00111111100',
+    '00011111000',
+    '00001110000',
+    '00000100000'
+  ];
+
+  const bucklerRows = [...bucklerBaseRows];
+
+  for (let z = 0; z < bucklerRows.length; z += 1) {
+    const row = bucklerRows[z];
+    for (let i = 0; i < row.length; i += 1) {
+      const val = row[i];
+      if (val === '0') continue;
+      const x = i - ((row.length - 1) / 2);
+      const height = val === '2' ? 2 : 1;
+      addStack(x, z, height);
+    }
+  }
+
+  // Mace overlay.
+  const maceGroup = new THREE.Group();
+  const maceRows = [
+    '00100',
+    '01110',
+    '01110',
+    '11111',
+    '01110',
+    '01110',
+    '01110',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '01110',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '01110'
+  ];
+
+  for (let z = 0; z < maceRows.length; z += 1) {
+    const row = maceRows[z];
+    for (let i = 0; i < row.length; i += 1) {
+      if (row[i] === '0') continue;
+      addStackToGroup(maceGroup, i - 2, z, 1);
+    }
+  }
+
+  // Side pairs that define the mace silhouette in this top view.
+  [1, 2, 3, 4, 5, 6, 15, 21].forEach((z) => {
+    addStackToGroup(maceGroup, 0, z, 1, -1);
+    addStackToGroup(maceGroup, 0, z, 1, 1);
+  });
+  // Wider pair at z3.
+  addStackToGroup(maceGroup, 0, 3, 1, -2);
+  addStackToGroup(maceGroup, 0, 3, 1, 2);
+
+  // Raise and angle mace so it's clearly in front of the buckler.
+  maceGroup.position.set(0, yLift * 1.35, -0.02);
+  maceGroup.rotation.set(0, 0, 0.16);
+
+  // Locked top-down pose for precise editing.
+  bucklerGroup.rotation.x = 0;
+  bucklerGroup.rotation.y = 0;
+  bucklerGroup.rotation.z = 0;
+  const bucklerScale = 1;
+  bucklerGroup.scale.setScalar(bucklerScale);
+  const bucklerBaseY = bucklerGroup.position.y;
+  scene.add(bucklerGroup);
+  scene.add(maceGroup);
+
+  const bounds = new THREE.Box3().setFromObject(bucklerGroup);
+  bounds.expandByObject(maceGroup);
+  const center = new THREE.Vector3();
+  const size = new THREE.Vector3();
+  bounds.getCenter(center);
+  bounds.getSize(size);
+  const topDownFrustumSize = Math.max(size.x, size.z) * 1.18;
+
+  camera.position.set(center.x, center.y + 6, center.z + 0.0001);
+  camera.lookAt(center.x, center.y, center.z);
+
+  const controls = new OrbitControls(camera, canvas);
+  controls.enableDamping = false;
+  controls.enableZoom = false;
+  controls.enablePan = false;
+  controls.enableRotate = false;
+  controls.autoRotate = false;
+  controls.autoRotateSpeed = 0;
+  controls.target.set(center.x, center.y, center.z);
+  controls.update();
+
+  const resize = () => {
+    const width = root.clientWidth || 1;
+    const height = root.clientHeight || 1;
+    const aspect = width / height;
+    const minFrustumSize = isMobileViewport() ? mobileMinFrustumSize : desktopMinFrustumSize;
+    const fitSize = topDownFrustumSize * (isMobileViewport() ? 0.9 : 1);
+    const baseFrustumSize = Math.max(minFrustumSize, fitSize);
+    const frustumSize = baseFrustumSize / zoomFactor;
+
+    camera.left = -0.5 * frustumSize * aspect;
+    camera.right = 0.5 * frustumSize * aspect;
+    camera.top = 0.5 * frustumSize;
+    camera.bottom = -0.5 * frustumSize;
+    camera.updateProjectionMatrix();
+    renderer.setSize(width, height, false);
+  };
+
+  resize();
+  if ('ResizeObserver' in window) {
+    const observer = new ResizeObserver(resize);
+    observer.observe(root);
+  } else {
+    window.addEventListener('resize', resize);
+  }
+
+  const fortifyMix = 1;
+  const animate = () => {
+    for (let i = 0; i < faceMaterials.length; i += 1) {
+      const mat = faceMaterials[i];
+      mat.opacity = Math.min(0.74, mat.userData.baseOpacity * (1 + fortifyMix * 0.95));
+      mat.envMapIntensity = mat.userData.baseEnvMapIntensity * (1 + fortifyMix * 0.58);
+      mat.transmission = THREE.MathUtils.clamp(mat.userData.baseTransmission * (1 - fortifyMix * 0.38), 0.46, 1.0);
+      mat.thickness = mat.userData.baseThickness * (1 + fortifyMix * 0.42);
+    }
+    edgeHighlightMaterial.opacity = Math.min(0.62, baseEdgeOpacity * (1 + fortifyMix * 2.1));
+    glowShellMaterial.opacity = Math.min(0.42, baseGlowOpacity * (1 + fortifyMix * 1.4));
+    bucklerGroup.scale.setScalar(bucklerScale);
+    bucklerGroup.position.y = bucklerBaseY;
+    controls.update();
+    renderer.render(scene, camera);
+    if (canvas.style.opacity !== '1') canvas.style.opacity = '1';
+    requestAnimationFrame(animate);
+  };
+  animate();
+</script>
diff --git a/_includes/v1/components/three-buckler-rect.html b/_includes/v1/components/three-buckler-rect.html
index 7d1e54f..759836c 100644
--- a/_includes/v1/components/three-buckler-rect.html
+++ b/_includes/v1/components/three-buckler-rect.html
@@ -211,15 +211,13 @@
     '11111111111',
     '11111111111',
     '11111111111',
-    '11111011111',
-    '11111011111',
-    '11100000111',
-    '11111011111',
-    '11111011111',
-    '11111011111',
+    '11111111111',
+    '11111111111',
+    '11111111111',
+    '11111111111',
+    '11111111111',
     '01111111110',
     '00111111100',
-    '00111111100',
     '00011111000',
     '00001110000',
     '00000100000'
@@ -238,6 +236,9 @@
     return out;
   };
   const bucklerRows = upscaleRows(bucklerBaseRows, 2);
+  // Trim four center rows to compress overall height.
+  const cutStart = Math.floor(bucklerRows.length / 2) - 2;
+  bucklerRows.splice(cutStart, 2);
 
   for (let z = 0; z < bucklerRows.length; z += 1) {
     const row = bucklerRows[z];
diff --git a/ops/index.md b/ops/index.md
index 6d75b8e..98da781 100644
--- a/ops/index.md
+++ b/ops/index.md
@@ -13,7 +13,7 @@ title: "Dotenvx Ops"
       </div>
     </div>
     <div class="order-1 md:order-2 w-full max-w-[24rem] md:max-w-none mx-auto md:mx-0 md:justify-self-stretch">
-      {% include v1/components/three-buckler-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}
+      {% include v1/components/three-buckler-mace-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}
       {% comment %}{% include v1/components/three-gauntlet-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}{% endcomment %}
       {% comment %}{% include v1/components/three-fortress-gated-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}{% endcomment %}
       {% comment %}{% include v1/components/three-fortress-rect.html height="170px" class="h-[170px] md:!h-[560px]" %}{% endcomment %}

From 6eeed4b9a3982dc248868bf8fb1268e588f75cf3 Mon Sep 17 00:00:00 2001
From: Scott Motte <mot@mot.la>
Date: Fri, 10 Apr 2026 21:52:54 -0700
Subject: [PATCH 13/17] buckler

---
 .../components/three-buckler-mace-rect.html   | 65 ++++++++++++-------
 1 file changed, 41 insertions(+), 24 deletions(-)

diff --git a/_includes/v1/components/three-buckler-mace-rect.html b/_includes/v1/components/three-buckler-mace-rect.html
index 58c9d34..4c89e46 100644
--- a/_includes/v1/components/three-buckler-mace-rect.html
+++ b/_includes/v1/components/three-buckler-mace-rect.html
@@ -36,7 +36,7 @@
   const mobileMinFrustumSize = 0.95;
   const includeZoom = Number({{ include.zoom | default: 1 }});
   const zoomFactor = Number.isFinite(includeZoom) && includeZoom > 0 ? includeZoom : 1;
-  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 100);
+  const camera = new THREE.PerspectiveCamera(36, 1, 0.1, 100);
 
   scene.background = null;
   renderer.setClearColor(0x000000, 0);
@@ -242,6 +242,30 @@
     }
   }
 
+  // Raised center cross (solid cubes on top of shield surface, no negative space).
+  // Vertical bar
+  for (let z = 2; z <= 9; z += 1) {
+    addStackFromLevel(0, z, 1, 1);
+  }
+  // Horizontal bar
+  for (let x = -3; x <= 3; x += 1) {
+    addStackFromLevel(x, 5, 1, 1);
+  }
+
+  // Back-side bolt anchors (first two).
+  addStackFromLevel(-3, 3, -2, 2);
+  addStackFromLevel(3, 3, -2, 2);
+  addStackFromLevel(-3, 7, -2, 2);
+  addStackFromLevel(3, 7, -2, 2);
+  // Left-side handle bridge between top and bottom protrusions.
+  addStackFromLevel(-3, 4, -2, 1);
+  addStackFromLevel(-3, 5, -2, 1);
+  addStackFromLevel(-3, 6, -2, 1);
+  // Right-side handle bridge between top and bottom protrusions.
+  addStackFromLevel(3, 4, -2, 1);
+  addStackFromLevel(3, 5, -2, 1);
+  addStackFromLevel(3, 6, -2, 1);
+
   // Mace overlay.
   const maceGroup = new THREE.Group();
   const maceRows = [
@@ -286,36 +310,35 @@
   addStackToGroup(maceGroup, 0, 3, 1, -2);
   addStackToGroup(maceGroup, 0, 3, 1, 2);
 
-  // Raise and angle mace so it's clearly in front of the buckler.
-  maceGroup.position.set(0, yLift * 1.35, -0.02);
-  maceGroup.rotation.set(0, 0, 0.16);
+  // Composition pass: slight offset + stronger diagonal for a staged overlap.
+  maceGroup.position.set(0.14, yLift * 1.28, 0.08);
+  maceGroup.rotation.set(0, 0, 0.3);
 
-  // Locked top-down pose for precise editing.
-  bucklerGroup.rotation.x = 0;
-  bucklerGroup.rotation.y = 0;
-  bucklerGroup.rotation.z = 0;
+  // Flip to show the back side of the shield, with stronger tilt for depth.
+  bucklerGroup.rotation.x = Math.PI - THREE.MathUtils.degToRad(52);
+  bucklerGroup.rotation.y = Math.PI;
+  bucklerGroup.rotation.z = -0.04;
   const bucklerScale = 1;
   bucklerGroup.scale.setScalar(bucklerScale);
   const bucklerBaseY = bucklerGroup.position.y;
   scene.add(bucklerGroup);
+  maceGroup.visible = false;
   scene.add(maceGroup);
 
   const bounds = new THREE.Box3().setFromObject(bucklerGroup);
-  bounds.expandByObject(maceGroup);
   const center = new THREE.Vector3();
   const size = new THREE.Vector3();
   bounds.getCenter(center);
   bounds.getSize(size);
-  const topDownFrustumSize = Math.max(size.x, size.z) * 1.18;
-
-  camera.position.set(center.x, center.y + 6, center.z + 0.0001);
-  camera.lookAt(center.x, center.y, center.z);
+  camera.position.set(center.x + 0.05, center.y + 1.65, center.z + 3.1);
+  camera.lookAt(center.x, center.y + 0.1, center.z + 0.05);
 
   const controls = new OrbitControls(camera, canvas);
-  controls.enableDamping = false;
+  controls.enableDamping = true;
+  controls.dampingFactor = 0.08;
   controls.enableZoom = false;
   controls.enablePan = false;
-  controls.enableRotate = false;
+  controls.enableRotate = true;
   controls.autoRotate = false;
   controls.autoRotateSpeed = 0;
   controls.target.set(center.x, center.y, center.z);
@@ -325,15 +348,9 @@
     const width = root.clientWidth || 1;
     const height = root.clientHeight || 1;
     const aspect = width / height;
-    const minFrustumSize = isMobileViewport() ? mobileMinFrustumSize : desktopMinFrustumSize;
-    const fitSize = topDownFrustumSize * (isMobileViewport() ? 0.9 : 1);
-    const baseFrustumSize = Math.max(minFrustumSize, fitSize);
-    const frustumSize = baseFrustumSize / zoomFactor;
-
-    camera.left = -0.5 * frustumSize * aspect;
-    camera.right = 0.5 * frustumSize * aspect;
-    camera.top = 0.5 * frustumSize;
-    camera.bottom = -0.5 * frustumSize;
+    const baseFov = isMobileViewport() ? 41 : 36;
+    camera.fov = baseFov / zoomFactor;
+    camera.aspect = aspect;
     camera.updateProjectionMatrix();
     renderer.setSize(width, height, false);
   };

From 2be12ce3ee97eceb992e39564bd5c9fb6f116976 Mon Sep 17 00:00:00 2001
From: Scott Motte <mot@mot.la>
Date: Fri, 10 Apr 2026 21:57:43 -0700
Subject: [PATCH 14/17] buckler

---
 .../v1/components/three-buckler-rect.html     | 144 +++++++++++++-----
 1 file changed, 102 insertions(+), 42 deletions(-)

diff --git a/_includes/v1/components/three-buckler-rect.html b/_includes/v1/components/three-buckler-rect.html
index 759836c..dbd8b2a 100644
--- a/_includes/v1/components/three-buckler-rect.html
+++ b/_includes/v1/components/three-buckler-rect.html
@@ -36,7 +36,7 @@
   const mobileMinFrustumSize = 0.95;
   const includeZoom = Number({{ include.zoom | default: 1 }});
   const zoomFactor = Number.isFinite(includeZoom) && includeZoom > 0 ? includeZoom : 1;
-  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 100);
+  const camera = new THREE.PerspectiveCamera(36, 1, 0.1, 100);
 
   scene.background = null;
   renderer.setClearColor(0x000000, 0);
@@ -63,7 +63,7 @@
   rimLight.position.set(-4, 2.5, -3);
   scene.add(rimLight);
 
-  const boxGeometry = new THREE.BoxGeometry(0.06, 0.0831, 0.06);
+  const boxGeometry = new THREE.BoxGeometry(0.12, 0.1662, 0.12);
   const edgeGeometry = new THREE.EdgesGeometry(boxGeometry);
   const edgeHighlightMaterial = new THREE.LineBasicMaterial({
     color: 0xe6edf7,
@@ -186,8 +186,8 @@
   };
 
   const bucklerGroup = new THREE.Group();
-  const pitch = 0.0625;
-  const yLift = 0.076;
+  const pitch = 0.125;
+  const yLift = 0.152;
   const baseY = 0.28;
 
   const addStack = (x, z, height) => {
@@ -204,8 +204,14 @@
     }
   };
 
-  // Buckler base map shaped like ⛨ (shield silhouette with cross cutout),
-  // then upscaled for higher detail density.
+  const addStackToGroup = (group, x, z, height, startLevel = 0) => {
+    for (let level = 0; level < height; level += 1) {
+      const box = createBox({ position: [x * pitch, baseY + (startLevel + level) * yLift, z * pitch] });
+      group.add(box);
+    }
+  };
+
+  // Buckler base map.
   const bucklerBaseRows = [
     '01111111110',
     '11111111111',
@@ -223,22 +229,7 @@
     '00000100000'
   ];
 
-  const upscaleRows = (rows, scale = 2) => {
-    const out = [];
-    for (let r = 0; r < rows.length; r += 1) {
-      const src = rows[r];
-      let expanded = '';
-      for (let i = 0; i < src.length; i += 1) {
-        expanded += src[i].repeat(scale);
-      }
-      for (let k = 0; k < scale; k += 1) out.push(expanded);
-    }
-    return out;
-  };
-  const bucklerRows = upscaleRows(bucklerBaseRows, 2);
-  // Trim four center rows to compress overall height.
-  const cutStart = Math.floor(bucklerRows.length / 2) - 2;
-  bucklerRows.splice(cutStart, 2);
+  const bucklerRows = [...bucklerBaseRows];
 
   for (let z = 0; z < bucklerRows.length; z += 1) {
     const row = bucklerRows[z];
@@ -251,28 +242,103 @@
     }
   }
 
-  // Locked top-down pose for precise editing.
-  bucklerGroup.rotation.x = 0;
-  bucklerGroup.rotation.y = 0;
-  bucklerGroup.rotation.z = 0;
+  // Raised center cross (solid cubes on top of shield surface, no negative space).
+  // Vertical bar
+  for (let z = 2; z <= 9; z += 1) {
+    addStackFromLevel(0, z, 1, 1);
+  }
+  // Horizontal bar
+  for (let x = -3; x <= 3; x += 1) {
+    addStackFromLevel(x, 5, 1, 1);
+  }
+
+  // Back-side bolt anchors (first two).
+  addStackFromLevel(-3, 3, -2, 2);
+  addStackFromLevel(3, 3, -2, 2);
+  addStackFromLevel(-3, 7, -2, 2);
+  addStackFromLevel(3, 7, -2, 2);
+  // Left-side handle bridge between top and bottom protrusions.
+  addStackFromLevel(-3, 4, -2, 1);
+  addStackFromLevel(-3, 5, -2, 1);
+  addStackFromLevel(-3, 6, -2, 1);
+  // Right-side handle bridge between top and bottom protrusions.
+  addStackFromLevel(3, 4, -2, 1);
+  addStackFromLevel(3, 5, -2, 1);
+  addStackFromLevel(3, 6, -2, 1);
+
+  // Mace overlay.
+  const maceGroup = new THREE.Group();
+  const maceRows = [
+    '00100',
+    '01110',
+    '01110',
+    '11111',
+    '01110',
+    '01110',
+    '01110',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '01110',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '00100',
+    '01110'
+  ];
+
+  for (let z = 0; z < maceRows.length; z += 1) {
+    const row = maceRows[z];
+    for (let i = 0; i < row.length; i += 1) {
+      if (row[i] === '0') continue;
+      addStackToGroup(maceGroup, i - 2, z, 1);
+    }
+  }
+
+  // Side pairs that define the mace silhouette in this top view.
+  [1, 2, 3, 4, 5, 6, 15, 21].forEach((z) => {
+    addStackToGroup(maceGroup, 0, z, 1, -1);
+    addStackToGroup(maceGroup, 0, z, 1, 1);
+  });
+  // Wider pair at z3.
+  addStackToGroup(maceGroup, 0, 3, 1, -2);
+  addStackToGroup(maceGroup, 0, 3, 1, 2);
+
+  // Composition pass: slight offset + stronger diagonal for a staged overlap.
+  maceGroup.position.set(0.14, yLift * 1.28, 0.08);
+  maceGroup.rotation.set(0, 0, 0.3);
+
+  // Flip to show the back side of the shield, with stronger tilt for depth.
+  bucklerGroup.rotation.x = Math.PI - THREE.MathUtils.degToRad(52);
+  bucklerGroup.rotation.y = Math.PI;
+  bucklerGroup.rotation.z = -0.04;
+  const bucklerScale = 1;
+  bucklerGroup.scale.setScalar(bucklerScale);
   const bucklerBaseY = bucklerGroup.position.y;
   scene.add(bucklerGroup);
+  maceGroup.visible = false;
+  scene.add(maceGroup);
 
   const bounds = new THREE.Box3().setFromObject(bucklerGroup);
   const center = new THREE.Vector3();
   const size = new THREE.Vector3();
   bounds.getCenter(center);
   bounds.getSize(size);
-  const topDownFrustumSize = Math.max(size.x, size.z) * 1.18;
-
-  camera.position.set(center.x, center.y + 6, center.z + 0.0001);
-  camera.lookAt(center.x, center.y, center.z);
+  camera.position.set(center.x + 0.05, center.y + 1.65, center.z + 3.1);
+  camera.lookAt(center.x, center.y + 0.1, center.z + 0.05);
 
   const controls = new OrbitControls(camera, canvas);
-  controls.enableDamping = false;
+  controls.enableDamping = true;
+  controls.dampingFactor = 0.08;
   controls.enableZoom = false;
   controls.enablePan = false;
-  controls.enableRotate = false;
+  controls.enableRotate = true;
   controls.autoRotate = false;
   controls.autoRotateSpeed = 0;
   controls.target.set(center.x, center.y, center.z);
@@ -282,15 +348,9 @@
     const width = root.clientWidth || 1;
     const height = root.clientHeight || 1;
     const aspect = width / height;
-    const minFrustumSize = isMobileViewport() ? mobileMinFrustumSize : desktopMinFrustumSize;
-    const fitSize = topDownFrustumSize * (isMobileViewport() ? 0.9 : 1);
-    const baseFrustumSize = Math.max(minFrustumSize, fitSize);
-    const frustumSize = baseFrustumSize / zoomFactor;
-
-    camera.left = -0.5 * frustumSize * aspect;
-    camera.right = 0.5 * frustumSize * aspect;
-    camera.top = 0.5 * frustumSize;
-    camera.bottom = -0.5 * frustumSize;
+    const baseFov = isMobileViewport() ? 41 : 36;
+    camera.fov = baseFov / zoomFactor;
+    camera.aspect = aspect;
     camera.updateProjectionMatrix();
     renderer.setSize(width, height, false);
   };
@@ -314,7 +374,7 @@
     }
     edgeHighlightMaterial.opacity = Math.min(0.62, baseEdgeOpacity * (1 + fortifyMix * 2.1));
     glowShellMaterial.opacity = Math.min(0.42, baseGlowOpacity * (1 + fortifyMix * 1.4));
-    bucklerGroup.scale.setScalar(1);
+    bucklerGroup.scale.setScalar(bucklerScale);
     bucklerGroup.position.y = bucklerBaseY;
     controls.update();
     renderer.render(scene, camera);

From 51fe56f0924640d241e22f5a8124be238eee3e76 Mon Sep 17 00:00:00 2001
From: Scott Motte <mot@mot.la>
Date: Sat, 11 Apr 2026 00:11:48 -0700
Subject: [PATCH 15/17] buckler and mace

---
 .../components/three-buckler-mace-rect.html   | 479 +++++++++++++++++-
 1 file changed, 463 insertions(+), 16 deletions(-)

diff --git a/_includes/v1/components/three-buckler-mace-rect.html b/_includes/v1/components/three-buckler-mace-rect.html
index 4c89e46..31e5730 100644
--- a/_includes/v1/components/three-buckler-mace-rect.html
+++ b/_includes/v1/components/three-buckler-mace-rect.html
@@ -7,6 +7,60 @@
     class="block h-full w-full"
     style="opacity: 0; -webkit-mask-image: radial-gradient(120% 112% at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,0.92) 74%, rgba(0,0,0,0.48) 85%, rgba(0,0,0,0.1) 93%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(120% 112% at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,0.92) 74%, rgba(0,0,0,0.48) 85%, rgba(0,0,0,0.1) 93%, rgba(0,0,0,0) 100%);"
   ></canvas>
+  <div
+    data-ops-bm-controls
+    class="absolute left-3 top-3 z-20 hidden rounded-md border border-zinc-700/80 bg-black/70 px-3 py-2 text-[11px] text-zinc-200"
+    style="backdrop-filter: blur(2px);"
+  >
+    <div class="mb-1 font-semibold tracking-[0.04em] uppercase text-zinc-300">Buckler Rotation</div>
+    <div class="grid grid-cols-[14px_60px_120px] items-center gap-x-2 gap-y-1">
+      <label for="ops-bm-rot-x">X</label>
+      <span data-ops-bm-x>0.00°</span>
+      <input id="ops-bm-rot-x" data-ops-bm-slider-x type="range" min="-180" max="180" step="0.1" />
+      <label for="ops-bm-rot-y">Y</label>
+      <span data-ops-bm-y>0.00°</span>
+      <input id="ops-bm-rot-y" data-ops-bm-slider-y type="range" min="-180" max="180" step="0.1" />
+      <label for="ops-bm-rot-z">Z</label>
+      <span data-ops-bm-z>0.00°</span>
+      <input id="ops-bm-rot-z" data-ops-bm-slider-z type="range" min="-180" max="180" step="0.1" />
+    </div>
+    <div class="mt-3 mb-1 font-semibold tracking-[0.04em] uppercase text-zinc-300">Buckler Position</div>
+    <div class="grid grid-cols-[14px_60px_120px] items-center gap-x-2 gap-y-1">
+      <label for="ops-bm-pos-x">X</label>
+      <span data-ops-bm-pos-x-label>0.00</span>
+      <input id="ops-bm-pos-x" data-ops-bm-pos-x type="range" min="-3" max="3" step="0.01" />
+      <label for="ops-bm-pos-y">Y</label>
+      <span data-ops-bm-pos-y-label>0.00</span>
+      <input id="ops-bm-pos-y" data-ops-bm-pos-y type="range" min="-3" max="3" step="0.01" />
+      <label for="ops-bm-pos-z">Z</label>
+      <span data-ops-bm-pos-z-label>0.00</span>
+      <input id="ops-bm-pos-z" data-ops-bm-pos-z type="range" min="-3" max="3" step="0.01" />
+    </div>
+    <div class="mt-3 mb-1 font-semibold tracking-[0.04em] uppercase text-zinc-300">Mace Rotation</div>
+    <div class="grid grid-cols-[14px_60px_120px] items-center gap-x-2 gap-y-1">
+      <label for="ops-bm-mace-rot-x">X</label>
+      <span data-ops-bm-mace-x>0.00°</span>
+      <input id="ops-bm-mace-rot-x" data-ops-bm-mace-slider-x type="range" min="-180" max="180" step="0.1" />
+      <label for="ops-bm-mace-rot-y">Y</label>
+      <span data-ops-bm-mace-y>0.00°</span>
+      <input id="ops-bm-mace-rot-y" data-ops-bm-mace-slider-y type="range" min="-180" max="180" step="0.1" />
+      <label for="ops-bm-mace-rot-z">Z</label>
+      <span data-ops-bm-mace-z>0.00°</span>
+      <input id="ops-bm-mace-rot-z" data-ops-bm-mace-slider-z type="range" min="-180" max="180" step="0.1" />
+    </div>
+    <div class="mt-3 mb-1 font-semibold tracking-[0.04em] uppercase text-zinc-300">Mace Position</div>
+    <div class="grid grid-cols-[14px_60px_120px] items-center gap-x-2 gap-y-1">
+      <label for="ops-bm-mace-pos-x">X</label>
+      <span data-ops-bm-mace-pos-x-label>0.00</span>
+      <input id="ops-bm-mace-pos-x" data-ops-bm-mace-pos-x type="range" min="-3" max="3" step="0.01" />
+      <label for="ops-bm-mace-pos-y">Y</label>
+      <span data-ops-bm-mace-pos-y-label>0.00</span>
+      <input id="ops-bm-mace-pos-y" data-ops-bm-mace-pos-y type="range" min="-3" max="3" step="0.01" />
+      <label for="ops-bm-mace-pos-z">Z</label>
+      <span data-ops-bm-mace-pos-z-label>0.00</span>
+      <input id="ops-bm-mace-pos-z" data-ops-bm-mace-pos-z type="range" min="-3" max="3" step="0.01" />
+    </div>
+  </div>
 </div>
 
 <script type="importmap">
@@ -28,6 +82,31 @@
 
   root.setAttribute('data-three-mounted', 'true');
   const canvas = root.querySelector('canvas');
+  const controlsPanel = root.querySelector('[data-ops-bm-controls]');
+  const sliderX = root.querySelector('[data-ops-bm-slider-x]');
+  const sliderY = root.querySelector('[data-ops-bm-slider-y]');
+  const sliderZ = root.querySelector('[data-ops-bm-slider-z]');
+  const labelX = root.querySelector('[data-ops-bm-x]');
+  const labelY = root.querySelector('[data-ops-bm-y]');
+  const labelZ = root.querySelector('[data-ops-bm-z]');
+  const bucklerPosSliderX = root.querySelector('[data-ops-bm-pos-x]');
+  const bucklerPosSliderY = root.querySelector('[data-ops-bm-pos-y]');
+  const bucklerPosSliderZ = root.querySelector('[data-ops-bm-pos-z]');
+  const bucklerPosLabelX = root.querySelector('[data-ops-bm-pos-x-label]');
+  const bucklerPosLabelY = root.querySelector('[data-ops-bm-pos-y-label]');
+  const bucklerPosLabelZ = root.querySelector('[data-ops-bm-pos-z-label]');
+  const maceSliderX = root.querySelector('[data-ops-bm-mace-slider-x]');
+  const maceSliderY = root.querySelector('[data-ops-bm-mace-slider-y]');
+  const maceSliderZ = root.querySelector('[data-ops-bm-mace-slider-z]');
+  const maceLabelX = root.querySelector('[data-ops-bm-mace-x]');
+  const maceLabelY = root.querySelector('[data-ops-bm-mace-y]');
+  const maceLabelZ = root.querySelector('[data-ops-bm-mace-z]');
+  const macePosSliderX = root.querySelector('[data-ops-bm-mace-pos-x]');
+  const macePosSliderY = root.querySelector('[data-ops-bm-mace-pos-y]');
+  const macePosSliderZ = root.querySelector('[data-ops-bm-mace-pos-z]');
+  const macePosLabelX = root.querySelector('[data-ops-bm-mace-pos-x-label]');
+  const macePosLabelY = root.querySelector('[data-ops-bm-mace-pos-y-label]');
+  const macePosLabelZ = root.querySelector('[data-ops-bm-mace-pos-z-label]');
   canvas.style.transition = 'opacity 300ms ease-out';
 
   const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
@@ -159,6 +238,9 @@
     mat.userData.baseEnvMapIntensity = mat.envMapIntensity;
     mat.userData.baseTransmission = mat.transmission;
     mat.userData.baseThickness = mat.thickness;
+    mat.emissive = new THREE.Color(0x000000);
+    mat.emissiveIntensity = 0;
+    mat.userData.baseEmissiveIntensity = 0;
     faceMaterials.push(mat);
     return mat;
   };
@@ -185,6 +267,21 @@
     return mesh;
   };
 
+  const setCubeAlpha = (mesh, alpha) => {
+    const mats = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+    for (let i = 0; i < mats.length; i += 1) {
+      const m = mats[i];
+      if (typeof m.userData.baseOpacity !== 'number') continue;
+      m.opacity = Math.min(0.74, m.userData.baseOpacity * 1.95) * alpha;
+      m.transparent = true;
+    }
+  };
+
+  const smoothstep = (edge0, edge1, x) => {
+    const t = THREE.MathUtils.clamp((x - edge0) / (edge1 - edge0), 0, 1);
+    return t * t * (3 - 2 * t);
+  };
+
   const bucklerGroup = new THREE.Group();
   const pitch = 0.125;
   const yLift = 0.152;
@@ -310,38 +407,327 @@
   addStackToGroup(maceGroup, 0, 3, 1, -2);
   addStackToGroup(maceGroup, 0, 3, 1, 2);
 
-  // Composition pass: slight offset + stronger diagonal for a staged overlap.
-  maceGroup.position.set(0.14, yLift * 1.28, 0.08);
-  maceGroup.rotation.set(0, 0, 0.3);
+  // Re-center mace local pivot to the handle so rotations feel anchored in the shaft.
+  const macePivot = new THREE.Vector3(0, baseY, 14 * pitch);
+  for (let i = 0; i < maceGroup.children.length; i += 1) {
+    maceGroup.children[i].position.sub(macePivot);
+  }
+
+  // Composition defaults.
+  const bucklerStartPosition = new THREE.Vector3(0, 0.02, -0.08);
+  const maceStartOffset = new THREE.Vector3(0.09, -0.18, -0.04);
+  maceGroup.position.copy(maceStartOffset);
+  maceGroup.rotation.set(
+    THREE.MathUtils.degToRad(28),
+    THREE.MathUtils.degToRad(-30),
+    THREE.MathUtils.degToRad(36)
+  );
+
+  // Re-center local pivot so rotation occurs around true shield center.
+  const bucklerLocalBounds = new THREE.Box3().setFromObject(bucklerGroup);
+  const bucklerPivot = new THREE.Vector3();
+  bucklerLocalBounds.getCenter(bucklerPivot);
+  for (let i = 0; i < bucklerGroup.children.length; i += 1) {
+    bucklerGroup.children[i].position.sub(bucklerPivot);
+  }
 
-  // Flip to show the back side of the shield, with stronger tilt for depth.
-  bucklerGroup.rotation.x = Math.PI - THREE.MathUtils.degToRad(52);
-  bucklerGroup.rotation.y = Math.PI;
-  bucklerGroup.rotation.z = -0.04;
-  const bucklerScale = 1;
+  // Rotation defaults from provided values.
+  const radToDeg = (r) => (r * 180) / Math.PI;
+  const degToRad = (d) => (d * Math.PI) / 180;
+  const rotDeg = {
+    x: 33.2,
+    y: -32.2,
+    z: 40.1
+  };
+  const maceRotDeg = {
+    x: 38.8,
+    y: 31.8,
+    z: 23.8
+  };
+  const syncRotationUi = () => {
+    if (sliderX) sliderX.value = String(rotDeg.x);
+    if (sliderY) sliderY.value = String(rotDeg.y);
+    if (sliderZ) sliderZ.value = String(rotDeg.z);
+    if (labelX) labelX.textContent = `${rotDeg.x.toFixed(2)}°`;
+    if (labelY) labelY.textContent = `${rotDeg.y.toFixed(2)}°`;
+    if (labelZ) labelZ.textContent = `${rotDeg.z.toFixed(2)}°`;
+  };
+  const syncMaceRotationUi = () => {
+    if (maceSliderX) maceSliderX.value = String(maceRotDeg.x);
+    if (maceSliderY) maceSliderY.value = String(maceRotDeg.y);
+    if (maceSliderZ) maceSliderZ.value = String(maceRotDeg.z);
+    if (maceLabelX) maceLabelX.textContent = `${maceRotDeg.x.toFixed(2)}°`;
+    if (maceLabelY) maceLabelY.textContent = `${maceRotDeg.y.toFixed(2)}°`;
+    if (maceLabelZ) maceLabelZ.textContent = `${maceRotDeg.z.toFixed(2)}°`;
+  };
+  const applyBucklerRotation = () => {
+    bucklerGroup.rotation.x = degToRad(rotDeg.x);
+    bucklerGroup.rotation.y = degToRad(rotDeg.y);
+    bucklerGroup.rotation.z = degToRad(rotDeg.z);
+    syncRotationUi();
+  };
+  const applyMaceRotation = () => {
+    maceGroup.rotation.x = degToRad(maceRotDeg.x);
+    maceGroup.rotation.y = degToRad(maceRotDeg.y);
+    maceGroup.rotation.z = degToRad(maceRotDeg.z);
+    syncMaceRotationUi();
+  };
+  const onSliderInput = (axis, slider) => {
+    if (!slider) return;
+    slider.addEventListener('input', () => {
+      rotDeg[axis] = Number(slider.value);
+      applyBucklerRotation();
+    });
+  };
+  const onMaceSliderInput = (axis, slider) => {
+    if (!slider) return;
+    slider.addEventListener('input', () => {
+      maceRotDeg[axis] = Number(slider.value);
+      applyMaceRotation();
+    });
+  };
+  onSliderInput('x', sliderX);
+  onSliderInput('y', sliderY);
+  onSliderInput('z', sliderZ);
+  onMaceSliderInput('x', maceSliderX);
+  onMaceSliderInput('y', maceSliderY);
+  onMaceSliderInput('z', maceSliderZ);
+  if (controlsPanel) controlsPanel.style.pointerEvents = 'auto';
+  applyBucklerRotation();
+  applyMaceRotation();
+  const bucklerScale = 0.65;
   bucklerGroup.scale.setScalar(bucklerScale);
-  const bucklerBaseY = bucklerGroup.position.y;
+  maceGroup.scale.setScalar(0.65);
   scene.add(bucklerGroup);
   maceGroup.visible = false;
   scene.add(maceGroup);
 
+  const bucklerCubes = bucklerGroup.children.filter((c) => c.isMesh);
+  const maceCubes = maceGroup.children.filter((c) => c.isMesh);
+
+  for (let i = 0; i < bucklerCubes.length; i += 1) {
+    const cube = bucklerCubes[i];
+    cube.userData.home = cube.position.clone();
+    cube.userData.scatter = new THREE.Vector3(
+      (Math.random() - 0.5) * 1.8,
+      (Math.random() - 0.2) * 1.1,
+      (Math.random() - 0.5) * 1.8
+    );
+    const ringX = (i % 5) - 2;
+    const ringZ = (Math.floor(i / 5) % 5) - 2;
+    const ringY = (i % 7) - 3;
+    cube.userData.forge = new THREE.Vector3(ringX * 0.04, ringY * 0.02, ringZ * 0.04);
+    setCubeAlpha(cube, 0);
+    cube.scale.setScalar(0.01);
+    cube.visible = false;
+  }
+  for (let i = 0; i < maceCubes.length; i += 1) {
+    const cube = maceCubes[i];
+    cube.userData.home = cube.position.clone();
+    cube.userData.scatter = new THREE.Vector3(
+      (Math.random() - 0.5) * 1.8,
+      (Math.random() - 0.2) * 1.1,
+      (Math.random() - 0.5) * 1.8
+    );
+    const ringX = (i % 5) - 2;
+    const ringZ = (Math.floor(i / 5) % 5) - 2;
+    const ringY = (i % 7) - 3;
+    cube.userData.forge = new THREE.Vector3(ringX * 0.04, ringY * 0.02, ringZ * 0.04);
+    setCubeAlpha(cube, 0);
+    cube.scale.setScalar(0.01);
+    cube.visible = false;
+    cube.position.copy(cube.userData.home);
+  }
+
+  // Build-in animation order (network-like growth from a seed).
+  const quantize = (value, step) => Math.round(value / step);
+  const buildOrderFromSeed = (cubes, seedMode) => {
+    const nodes = cubes.map((cube, idx) => {
+      const p = cube.userData.home;
+      return {
+        idx,
+        cube,
+        qx: quantize(p.x, pitch),
+        qy: quantize(p.y, yLift),
+        qz: quantize(p.z, pitch)
+      };
+    });
+    const seed = nodes.reduce((best, node) => {
+      if (!best) return node;
+      if (seedMode === 'maxZCenter') {
+        if (node.qz > best.qz) return node;
+        if (node.qz < best.qz) return best;
+        const nodeCenter = Math.abs(node.qx) + Math.abs(node.qy);
+        const bestCenter = Math.abs(best.qx) + Math.abs(best.qy);
+        return nodeCenter < bestCenter ? node : best;
+      }
+      return best;
+    }, null);
+    nodes.sort((a, b) => {
+      const da = Math.abs(a.qx - seed.qx) + Math.abs(a.qy - seed.qy) + Math.abs(a.qz - seed.qz);
+      const db = Math.abs(b.qx - seed.qx) + Math.abs(b.qy - seed.qy) + Math.abs(b.qz - seed.qz);
+      if (da !== db) return da - db;
+      if (a.qz !== b.qz) return b.qz - a.qz;
+      return Math.abs(a.qx) - Math.abs(b.qx);
+    });
+    return nodes.map((n) => n.cube);
+  };
+
+  const maceBuildOrder = buildOrderFromSeed(maceCubes, 'maxZCenter');
+  const bucklerBuildOrder = buildOrderFromSeed(bucklerCubes, 'maxZCenter');
+  const buildEnabled = true;
+  const maceBuildDelayMs = 26;
+  const bucklerBuildDelayMs = 14;
+  const buildPopMs = 110;
+  const maceBuildStartMs = 0;
+  const bucklerBuildStartMs = 140;
+  const buildStartAt = performance.now() + 120;
+
+  const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
+  const applyBuildPass = (order, elapsedMs, startOffset, perCubeDelayMs) => {
+    for (let i = 0; i < order.length; i += 1) {
+      const cube = order[i];
+      const t = THREE.MathUtils.clamp((elapsedMs - startOffset - i * perCubeDelayMs) / buildPopMs, 0, 1);
+      if (t <= 0) {
+        cube.visible = false;
+        continue;
+      }
+      cube.visible = true;
+      const e = easeOutCubic(t);
+      setCubeAlpha(cube, e);
+      cube.scale.setScalar(0.01 + e * 0.99);
+    }
+  };
+  const applyUnbuildPass = (order, elapsedMs, perCubeDelayMs) => {
+    for (let i = 0; i < order.length; i += 1) {
+      const cube = order[i];
+      const t = THREE.MathUtils.clamp((elapsedMs - i * perCubeDelayMs) / buildPopMs, 0, 1);
+      if (t <= 0) {
+        cube.visible = true;
+        setCubeAlpha(cube, 1);
+        cube.scale.setScalar(1);
+        continue;
+      }
+      const e = easeOutCubic(t);
+      const alpha = 1 - e;
+      if (alpha <= 0.001) {
+        cube.visible = false;
+        continue;
+      }
+      cube.visible = true;
+      setCubeAlpha(cube, alpha);
+      cube.scale.setScalar(1 - e * 0.99);
+    }
+  };
+
+  let scenePhase = 'intro'; // intro -> ready -> unbuild_to_mace -> mace -> unbuild_to_buckler -> ready
+  let phaseStartAt = buildStartAt;
+  const bucklerUnbuildOrder = [...bucklerBuildOrder].reverse();
+  const maceUnbuildOrder = [...maceBuildOrder].reverse();
+  const bucklerUnbuildDelayMs = 12;
+  const maceUnbuildDelayMs = 14;
+  const bucklerUnbuildDurationMs = Math.max(0, (bucklerUnbuildOrder.length - 1) * bucklerUnbuildDelayMs + buildPopMs);
+  const maceUnbuildDurationMs = Math.max(0, (maceUnbuildOrder.length - 1) * maceUnbuildDelayMs + buildPopMs);
+  const bucklerBuildDurationMs = Math.max(0, (bucklerBuildOrder.length - 1) * bucklerBuildDelayMs + buildPopMs);
+  const maceBuildDurationMs = Math.max(0, (maceBuildOrder.length - 1) * maceBuildDelayMs + buildPopMs);
+
+  const raycaster = new THREE.Raycaster();
+  const pointer = new THREE.Vector2();
+  canvas.addEventListener('pointerdown', (event) => {
+    if (scenePhase !== 'ready' && scenePhase !== 'mace') return;
+    const rect = canvas.getBoundingClientRect();
+    pointer.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+    pointer.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+    raycaster.setFromCamera(pointer, camera);
+    const targets = scenePhase === 'ready'
+      ? bucklerCubes.filter((cube) => cube.visible)
+      : maceCubes.filter((cube) => cube.visible);
+    const hits = raycaster.intersectObjects(targets, false);
+    if (hits.length === 0) return;
+    scenePhase = scenePhase === 'ready' ? 'unbuild_to_mace' : 'unbuild_to_buckler';
+    phaseStartAt = performance.now();
+    bucklerGroup.visible = true;
+    maceGroup.visible = true;
+  });
+
   const bounds = new THREE.Box3().setFromObject(bucklerGroup);
   const center = new THREE.Vector3();
   const size = new THREE.Vector3();
   bounds.getCenter(center);
   bounds.getSize(size);
-  camera.position.set(center.x + 0.05, center.y + 1.65, center.z + 3.1);
-  camera.lookAt(center.x, center.y + 0.1, center.z + 0.05);
+  bucklerGroup.position.copy(bucklerStartPosition);
+  maceGroup.position.set(
+    center.x + maceStartOffset.x,
+    center.y + maceStartOffset.y,
+    center.z + maceStartOffset.z
+  );
+  const bucklerPos = {
+    x: bucklerGroup.position.x,
+    y: bucklerGroup.position.y,
+    z: bucklerGroup.position.z
+  };
+  const macePos = {
+    x: maceGroup.position.x,
+    y: maceGroup.position.y,
+    z: maceGroup.position.z
+  };
+  const syncBucklerPositionUi = () => {
+    if (bucklerPosSliderX) bucklerPosSliderX.value = String(bucklerPos.x);
+    if (bucklerPosSliderY) bucklerPosSliderY.value = String(bucklerPos.y);
+    if (bucklerPosSliderZ) bucklerPosSliderZ.value = String(bucklerPos.z);
+    if (bucklerPosLabelX) bucklerPosLabelX.textContent = bucklerPos.x.toFixed(2);
+    if (bucklerPosLabelY) bucklerPosLabelY.textContent = bucklerPos.y.toFixed(2);
+    if (bucklerPosLabelZ) bucklerPosLabelZ.textContent = bucklerPos.z.toFixed(2);
+  };
+  const syncMacePositionUi = () => {
+    if (macePosSliderX) macePosSliderX.value = String(macePos.x);
+    if (macePosSliderY) macePosSliderY.value = String(macePos.y);
+    if (macePosSliderZ) macePosSliderZ.value = String(macePos.z);
+    if (macePosLabelX) macePosLabelX.textContent = macePos.x.toFixed(2);
+    if (macePosLabelY) macePosLabelY.textContent = macePos.y.toFixed(2);
+    if (macePosLabelZ) macePosLabelZ.textContent = macePos.z.toFixed(2);
+  };
+  const applyBucklerPosition = () => {
+    bucklerGroup.position.set(bucklerPos.x, bucklerPos.y, bucklerPos.z);
+    syncBucklerPositionUi();
+  };
+  const applyMacePosition = () => {
+    maceGroup.position.set(macePos.x, macePos.y, macePos.z);
+    syncMacePositionUi();
+  };
+  const onBucklerPosSliderInput = (axis, slider) => {
+    if (!slider) return;
+    slider.addEventListener('input', () => {
+      bucklerPos[axis] = Number(slider.value);
+      applyBucklerPosition();
+    });
+  };
+  const onMacePosSliderInput = (axis, slider) => {
+    if (!slider) return;
+    slider.addEventListener('input', () => {
+      macePos[axis] = Number(slider.value);
+      applyMacePosition();
+    });
+  };
+  onBucklerPosSliderInput('x', bucklerPosSliderX);
+  onBucklerPosSliderInput('y', bucklerPosSliderY);
+  onBucklerPosSliderInput('z', bucklerPosSliderZ);
+  onMacePosSliderInput('x', macePosSliderX);
+  onMacePosSliderInput('y', macePosSliderY);
+  onMacePosSliderInput('z', macePosSliderZ);
+  applyBucklerPosition();
+  applyMacePosition();
+  camera.position.set(center.x - 0.26, center.y + 2.95, center.z + 1.85);
+  camera.lookAt(center.x - 0.02, center.y + 0.16, center.z + 0.06);
 
   const controls = new OrbitControls(camera, canvas);
-  controls.enableDamping = true;
-  controls.dampingFactor = 0.08;
+  controls.enableDamping = false;
   controls.enableZoom = false;
   controls.enablePan = false;
-  controls.enableRotate = true;
+  controls.enableRotate = false;
   controls.autoRotate = false;
   controls.autoRotateSpeed = 0;
-  controls.target.set(center.x, center.y, center.z);
+  controls.target.set(center.x - 0.02, center.y + 0.16, center.z + 0.06);
   controls.update();
 
   const resize = () => {
@@ -364,7 +750,14 @@
   }
 
   const fortifyMix = 1;
+  const bucklerSpinSpeedZ = 0.12; // radians / second
+  const maceSpinSpeedZ = 0.12; // radians / second
+  let lastFrameTime = performance.now();
   const animate = () => {
+    const now = performance.now();
+    const dt = Math.min(0.05, (now - lastFrameTime) / 1000);
+    lastFrameTime = now;
+
     for (let i = 0; i < faceMaterials.length; i += 1) {
       const mat = faceMaterials[i];
       mat.opacity = Math.min(0.74, mat.userData.baseOpacity * (1 + fortifyMix * 0.95));
@@ -375,7 +768,61 @@
     edgeHighlightMaterial.opacity = Math.min(0.62, baseEdgeOpacity * (1 + fortifyMix * 2.1));
     glowShellMaterial.opacity = Math.min(0.42, baseGlowOpacity * (1 + fortifyMix * 1.4));
     bucklerGroup.scale.setScalar(bucklerScale);
-    bucklerGroup.position.y = bucklerBaseY;
+    bucklerGroup.rotation.z += bucklerSpinSpeedZ * dt;
+    maceGroup.rotation.z += maceSpinSpeedZ * dt;
+
+    if (buildEnabled && scenePhase === 'intro') {
+      const buildTime = Math.max(0, now - buildStartAt);
+      // Initial state: only shield builds in from the bottom.
+      applyBuildPass(bucklerBuildOrder, buildTime, bucklerBuildStartMs, bucklerBuildDelayMs);
+      for (let i = 0; i < maceCubes.length; i += 1) {
+        maceCubes[i].visible = false;
+      }
+      if (buildTime >= bucklerBuildDurationMs + bucklerBuildStartMs) {
+        scenePhase = 'ready';
+      }
+    } else if (scenePhase === 'unbuild_to_mace') {
+      const elapsed = Math.max(0, now - phaseStartAt);
+      if (elapsed <= bucklerUnbuildDurationMs) {
+        // First unbuild shield.
+        applyUnbuildPass(bucklerUnbuildOrder, elapsed, bucklerUnbuildDelayMs);
+        for (let i = 0; i < maceCubes.length; i += 1) {
+          maceCubes[i].visible = false;
+        }
+      } else {
+        // Then build mace from handle seed.
+        bucklerGroup.visible = false;
+        const maceElapsed = elapsed - bucklerUnbuildDurationMs;
+        applyBuildPass(maceBuildOrder, maceElapsed, 0, maceBuildDelayMs);
+        if (maceElapsed >= maceBuildDurationMs) {
+          scenePhase = 'mace';
+        }
+      }
+    } else if (scenePhase === 'unbuild_to_buckler') {
+      const elapsed = Math.max(0, now - phaseStartAt);
+      if (elapsed <= maceUnbuildDurationMs) {
+        applyUnbuildPass(maceUnbuildOrder, elapsed, maceUnbuildDelayMs);
+        for (let i = 0; i < bucklerCubes.length; i += 1) {
+          bucklerCubes[i].visible = false;
+        }
+      } else {
+        maceGroup.visible = false;
+        const bucklerElapsed = elapsed - maceUnbuildDurationMs;
+        applyBuildPass(bucklerBuildOrder, bucklerElapsed, 0, bucklerBuildDelayMs);
+        if (bucklerElapsed >= bucklerBuildDurationMs) {
+          scenePhase = 'ready';
+        }
+      }
+    } else if (scenePhase === 'mace') {
+      bucklerGroup.visible = false;
+      maceGroup.visible = true;
+      for (let i = 0; i < maceCubes.length; i += 1) {
+        const cube = maceCubes[i];
+        cube.visible = true;
+        cube.scale.setScalar(1);
+        setCubeAlpha(cube, 1);
+      }
+    }
     controls.update();
     renderer.render(scene, camera);
     if (canvas.style.opacity !== '1') canvas.style.opacity = '1';

From 443707d8a1e6d3ef2cbd9fab15a273a161f9df91 Mon Sep 17 00:00:00 2001
From: Scott Motte <mot@mot.la>
Date: Sat, 11 Apr 2026 00:21:39 -0700
Subject: [PATCH 16/17] position

---
 _includes/v1/components/three-buckler-mace-rect.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/_includes/v1/components/three-buckler-mace-rect.html b/_includes/v1/components/three-buckler-mace-rect.html
index 31e5730..47b10c1 100644
--- a/_includes/v1/components/three-buckler-mace-rect.html
+++ b/_includes/v1/components/three-buckler-mace-rect.html
@@ -415,7 +415,7 @@
 
   // Composition defaults.
   const bucklerStartPosition = new THREE.Vector3(0, 0.02, -0.08);
-  const maceStartOffset = new THREE.Vector3(0.09, -0.18, -0.04);
+  const maceStartOffset = new THREE.Vector3(-0.04, -0.28, -0.04);
   maceGroup.position.copy(maceStartOffset);
   maceGroup.rotation.set(
     THREE.MathUtils.degToRad(28),
@@ -440,9 +440,9 @@
     z: 40.1
   };
   const maceRotDeg = {
-    x: 38.8,
-    y: 31.8,
-    z: 23.8
+    x: 33.2,
+    y: -32.2,
+    z: 40.1
   };
   const syncRotationUi = () => {
     if (sliderX) sliderX.value = String(rotDeg.x);

From 7b0d154840d99ee237374b56f3664e69e96e521d Mon Sep 17 00:00:00 2001
From: Scott Motte <mot@mot.la>
Date: Sat, 11 Apr 2026 00:28:05 -0700
Subject: [PATCH 17/17] latest

---
 _includes/v1/components/three-buckler-mace-rect.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_includes/v1/components/three-buckler-mace-rect.html b/_includes/v1/components/three-buckler-mace-rect.html
index 47b10c1..5ee5d1f 100644
--- a/_includes/v1/components/three-buckler-mace-rect.html
+++ b/_includes/v1/components/three-buckler-mace-rect.html
@@ -414,7 +414,7 @@
   }
 
   // Composition defaults.
-  const bucklerStartPosition = new THREE.Vector3(0, 0.02, -0.08);
+  const bucklerStartPosition = new THREE.Vector3(0, 0, -0.08);
   const maceStartOffset = new THREE.Vector3(-0.04, -0.28, -0.04);
   maceGroup.position.copy(maceStartOffset);
   maceGroup.rotation.set(