diff --git a/astro.config.ts b/astro.config.ts
index 99e3862..6b0238f 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -36,7 +36,7 @@ export default defineConfig({
   integrations: [starlight({
     title: '@vtbag',
     components: {
-      Head: "./src/components/Head.astro",
+      Head: "./src/components/NHead.astro",
       PageTitle: "./src/components/PageTitle.astro"
     },
     plugins: [starlightImageZoom()],
@@ -69,7 +69,7 @@ export default defineConfig({
     sidebar: sidebar(),
   }), d2({
     skipGeneration: process.env.GITHUB_ACTIONS === "true"
-  }), vtbot()],
+  }), vtbot({ autoLint: false, loadingIndicator: false })],
   vite: {
     server: {
       fs: {
diff --git a/package-lock.json b/package-lock.json
index ddf78c0..3e22e72 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@playwright/test": "^1.47.2",
         "@splidejs/splide": "^4.1.4",
         "@types/node": "^22.7.4",
+        "@vtbag/cam-shaft": "^1.0.0",
         "@vtbag/element-crossing": "^1.0.1",
         "@vtbag/inspection-chamber": "^1.0.15",
         "@vtbag/turn-signal": "^1.0.1",
@@ -140,9 +141,9 @@
       }
     },
     "node_modules/@astrojs/mdx": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/@astrojs/mdx/-/mdx-3.1.3.tgz",
-      "integrity": "sha512-hOM4dMM4RfJI254d3p/AnOZuk2VyKszRtuY5FBm+Xc4XdhIpGrR56OXMNEcWchtwz4HQyPe/eJSgvBjSROcQIQ==",
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@astrojs/mdx/-/mdx-3.1.7.tgz",
+      "integrity": "sha512-8lGdCt+S0TrZgQpbcP3fQJc4cTeacAirtz9TpAMtHCWrQGW8slKt3WG4/0N+bhZgYRC4h5AT5drzFz+y3wvmsg==",
       "dev": true,
       "dependencies": {
         "@astrojs/markdown-remark": "5.2.0",
@@ -150,16 +151,15 @@
         "acorn": "^8.12.1",
         "es-module-lexer": "^1.5.4",
         "estree-util-visit": "^2.0.0",
-        "github-slugger": "^2.0.0",
         "gray-matter": "^4.0.3",
-        "hast-util-to-html": "^9.0.1",
+        "hast-util-to-html": "^9.0.2",
         "kleur": "^4.1.5",
         "rehype-raw": "^7.0.0",
         "remark-gfm": "^4.0.0",
         "remark-smartypants": "^3.0.2",
         "source-map": "^0.7.4",
         "unist-util-visit": "^5.0.0",
-        "vfile": "^6.0.2"
+        "vfile": "^6.0.3"
       },
       "engines": {
         "node": "^18.17.1 || ^20.3.0 || >=21.0.0"
diff --git a/package.json b/package.json
index 43e0027..f5fc0b5 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@vtbag/element-crossing": "^1.0.1",
     "@vtbag/inspection-chamber": "^1.0.15",
     "@vtbag/turn-signal": "^1.0.1",
+    "@vtbag/cam-shaft": "^1.0.0",
     "astro": "^4.15.11",
     "astro-breadcrumbs": "^3.2.0",
     "astro-d2": "^0.5.2",
diff --git a/src/components/NHead.astro b/src/components/NHead.astro
new file mode 100644
index 0000000..aea67ee
--- /dev/null
+++ b/src/components/NHead.astro
@@ -0,0 +1,86 @@
+---
+import type { Props } from "@astrojs/starlight/props";
+import StarlightHead from "@astrojs/starlight/components/Head.astro";
+import turnSignal from "@vtbag/turn-signal?url";
+import camShaft from "@vtbag/cam-shaft?url";
+---
+
+<StarlightHead {...Astro.props}><slot /></StarlightHead>
+<script is:inline>
+  ["pageswap", "pagereveal"].forEach((event) =>
+    addEventListener(
+      event,
+      (e) =>
+        e.viewTransition &&
+        document
+          .querySelectorAll("h2")
+          .forEach((h2, idx) => (h2.style.viewTransitionName = `h2-${idx}`))
+    )
+  );
+</script>
+{/* Decent transitions for scrolled down pages */}
+<script is:inline src={camShaft}/>
+
+{/* Make animation direction based on the order of the pages in the sidebar */}
+<script is:inline src={turnSignal} data-selector="nav.sidebar li a" />
+
+{
+  /* Without further configuration, make headings stand out during view transitions.
+    Can be used to declaratively add view transition names which open a door to all kinds of funny thing. */
+}
+
+<style is:global>
+  @view-transition {
+    navigation: auto;
+  }
+  main {
+    view-transition-name: main;
+  }
+  ::view-transition-old(main) {
+    animation: forwardsSwingOut 150ms ease-in-out;
+  }
+  ::view-transition-new(main) {
+    animation: forwardsSwingIn 150ms ease-in-out;
+  }
+  :active-view-transition-type(backward)::view-transition-old(main) {
+    animation: backwardsSwingOut 150ms ease-in-out;
+  }
+  :active-view-transition-type(backward)::view-transition-new(main) {
+    animation: backwardsSwingIn 150ms ease-in-out;
+  }
+  @keyframes forwardsSwingOut {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+  @keyframes forwardsSwingIn {
+    0% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+  @keyframes backwardsSwingOut {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+  @keyframes backwardsSwingIn {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+  ::view-transition-image-pair(main) {
+    overflow: hidden;
+  }
+</style>
diff --git a/src/content/docs/tools/turn-signal.mdx b/src/content/docs/tools/turn-signal.mdx
index c769304..96b2a1a 100644
--- a/src/content/docs/tools/turn-signal.mdx
+++ b/src/content/docs/tools/turn-signal.mdx
@@ -164,7 +164,7 @@ Just changing the direction of the animations would lead to something best named
       animation-name: slideOutToLeft;
       animation-direction: reverse;
     }
-  }  }
+  }
 ```
 &hellip; or even explicitly define keyframes for slideOutToRight and slideInFromLeft if you feel that is clearer.
 
diff --git a/src/pages/chamber.js.ts b/src/pages/chamber.js.ts
index 510deca..6abc2b9 100644
--- a/src/pages/chamber.js.ts
+++ b/src/pages/chamber.js.ts
@@ -1,6 +1,4 @@
-import { readFileSync } from 'node:fs';
-
-const inspectionChamber = readFileSync('node_modules/@vtbag/inspection-chamber/lib/index.js');
+import inspectionChamber from "@vtbag/inspection-chamber?raw"
 
 export async function GET() {
 	return new Response(`
diff --git a/src/pages/demo/Fail2.astro b/src/pages/demo/Fail2.astro
index d6f0cad..113fe28 100644
--- a/src/pages/demo/Fail2.astro
+++ b/src/pages/demo/Fail2.astro
@@ -3,7 +3,7 @@ import Demo from "@/layouts/DemoLayout.astro";
 ---
 
 <Demo
-  title="View Transition Example: Inline to Block Text Morph"
+  title="View Transition Example: Unintended Ratio Differences"
   backlink="/basics/examples/#fail2"
   prev="/demo/Fail1/"
   next=""
diff --git a/src/pages/signal-demo/_Layout.astro b/src/pages/signal-demo/_Layout.astro
index 95bc1b1..eaaeeed 100644
--- a/src/pages/signal-demo/_Layout.astro
+++ b/src/pages/signal-demo/_Layout.astro
@@ -4,6 +4,7 @@ import bag from "../../assets/bag.png";
 import chamber from "../../assets/chamber.png";
 import crossing from "../../assets/crossing.png";
 import signal from "../../assets/signal.png";
+import shaft from "../../assets/shaft.png";
 import turnSignal from "@vtbag/turn-signal?url";
 
 export interface Props {
@@ -13,8 +14,8 @@ const { title } = Astro.props;
 const script =
   'const _=document.documentElement;_.dataset.theme=_.style.colorScheme=localStorage.getItem("starlight-theme")||(window.matchMedia("(prefers-color-scheme: dark)").matches? "dark":"light")';
 const pathname = Astro.url.pathname;
-const pages = ["bag", "chamber", "crossing", "signal"];
-const images = [bag, chamber, crossing, signal];
+const pages = ["bag", "chamber", "crossing", "signal", "shaft"];
+const images = [bag, chamber, crossing, signal, shaft];
 ---
 
 <html lang="en">
diff --git a/src/pages/signal-demo/bag.astro b/src/pages/signal-demo/bag.astro
index d34a1e4..60e437b 100644
--- a/src/pages/signal-demo/bag.astro
+++ b/src/pages/signal-demo/bag.astro
@@ -5,5 +5,5 @@ import bag from "../../assets/cards/bag.png";
 ---
 
 <Layout title="The Bag of Tricks">
-  <Image src={bag} alt="The Bafg of Tricks" />
+  <a href="/vtbag/"><Image src={bag} alt="The Bafg of Tricks" /></a>
 </Layout>
diff --git a/src/pages/signal-demo/chamber.astro b/src/pages/signal-demo/chamber.astro
index 5d64678..4a27188 100644
--- a/src/pages/signal-demo/chamber.astro
+++ b/src/pages/signal-demo/chamber.astro
@@ -5,5 +5,5 @@ import chamber from "../../assets/cards/chamber.png";
 ---
 
 <Layout title="The Inspection Chamber">
-  <Image src={chamber} alt="The Bag's Inspection Chamber" />
+  <a href="/tools/inspection-chamber/"><Image src={chamber} alt="The Bag's Inspection Chamber" /></a>
 </Layout>
diff --git a/src/pages/signal-demo/crossing.astro b/src/pages/signal-demo/crossing.astro
index 945dfdc..84eb189 100644
--- a/src/pages/signal-demo/crossing.astro
+++ b/src/pages/signal-demo/crossing.astro
@@ -5,5 +5,5 @@ import crossing from "../../assets/cards/crossing.png";
 ---
 
 <Layout title="The Element Crossing">
-  <Image src={crossing} alt="The Bag's Element Crossing" />
+  <a href="/tools/element-crossing/"><Image src={crossing} alt="The Bag's Element Crossing" /></a>
 </Layout>
diff --git a/src/pages/signal-demo/shaft.astro b/src/pages/signal-demo/shaft.astro
new file mode 100644
index 0000000..c86a188
--- /dev/null
+++ b/src/pages/signal-demo/shaft.astro
@@ -0,0 +1,9 @@
+---
+import Layout from "./_Layout.astro";
+import { Image } from "astro:assets";
+import shaft from "../../assets/cards/shaft.png";
+---
+
+<Layout title="The Cam-Shaft">
+  <a href="/tools/cam-shaft/"><Image src={shaft} alt="The Bag's Cam-Shaft" /></a>
+</Layout>
diff --git a/src/pages/signal-demo/signal.astro b/src/pages/signal-demo/signal.astro
index 8889bc4..dca0a3c 100644
--- a/src/pages/signal-demo/signal.astro
+++ b/src/pages/signal-demo/signal.astro
@@ -5,5 +5,5 @@ import signal from "../../assets/cards/signal.png";
 ---
 
 <Layout title="The Turn-Signal">
-  <Image src={signal} alt="The Bag's Turn-Signal" />
+  <a href="/tools/turn-signal/"><Image src={signal} alt="The Bag's Turn-Signal" /></a>
 </Layout>