diff --git a/astro.config.ts b/astro.config.ts
index ad6fa2a..99e3862 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -92,7 +92,8 @@ function sidebar() {
     items: [
       { label: 'Inspection Chamber', link: "/tools/inspection-chamber/" },
       { label: 'Element Crossing', link: "/tools/element-crossing/" },
-      { label: 'Turn-Signal', link: "/tools/turn-signal/", badge: { text: 'new', variant: 'tip' } as Badge },
+      { label: 'Turn-Signal', link: "/tools/turn-signal/" },
+      { label: 'Cam-Shaft', link: "/tools/cam-shaft/", badge: { text: 'new', variant: 'tip' } as Badge },
     ],
   }, {
     label: 'Basics',
@@ -107,7 +108,8 @@ function sidebar() {
     items: [
       { label: 'Where to place the CSS', link: "/tips/css/" },
       { label: "Flickering during morph animations?", link: "tips/over-exposure/" },
-      { label: "Avoid Pointer Flickering", link: "tips/pointer/" }
+      { label: "Avoid Pointer Flickering", link: "tips/pointer/" },
+      { label: "Pseudo-smooth-scrolling?", link: "tips/pseudo-smooth-scrolling/" }
     ]
   }];
 }
diff --git a/package-lock.json b/package-lock.json
index ec3e8bc..ddf78c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,18 +8,18 @@
       "name": "@vtbag/website",
       "version": "0.0.1",
       "devDependencies": {
-        "@astrojs/check": "^0.9.3",
+        "@astrojs/check": "^0.9.4",
         "@astrojs/starlight": "^0.28.2",
         "@playwright/test": "^1.47.2",
         "@splidejs/splide": "^4.1.4",
-        "@types/node": "^22.7.0",
+        "@types/node": "^22.7.4",
         "@vtbag/element-crossing": "^1.0.1",
-        "@vtbag/inspection-chamber": "^1.0.14",
+        "@vtbag/inspection-chamber": "^1.0.15",
         "@vtbag/turn-signal": "^1.0.1",
-        "astro": "^4.15.9",
+        "astro": "^4.15.11",
         "astro-breadcrumbs": "^3.2.0",
-        "astro-d2": "^0.5.1",
-        "astro-vtbot": "^1.10.2",
+        "astro-d2": "^0.5.2",
+        "astro-vtbot": "^1.10.3",
         "rehype-autolink-headings": "^7.1.0",
         "rehype-external-links": "^3.0.0",
         "rehype-slug": "^6.0.0",
@@ -43,14 +43,13 @@
       }
     },
     "node_modules/@astrojs/check": {
-      "version": "0.9.3",
-      "resolved": "https://registry.npmjs.org/@astrojs/check/-/check-0.9.3.tgz",
-      "integrity": "sha512-I6Dz45bMI5YRbp4yK2LKWsHH3/kkHRGdPGruGkLap6pqxhdcNh7oCgN04Ac+haDfc9ow5BYPGPmEhkwef15GQQ==",
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/@astrojs/check/-/check-0.9.4.tgz",
+      "integrity": "sha512-IOheHwCtpUfvogHHsvu0AbeRZEnjJg3MopdLddkJE70mULItS/Vh37BHcI00mcOJcH1vhD3odbpvWokpxam7xA==",
       "dev": true,
       "dependencies": {
-        "@astrojs/language-server": "^2.14.1",
-        "chokidar": "^3.5.3",
-        "fast-glob": "^3.3.1",
+        "@astrojs/language-server": "^2.15.0",
+        "chokidar": "^4.0.1",
         "kleur": "^4.1.5",
         "yargs": "^17.7.2"
       },
@@ -74,19 +73,18 @@
       "dev": true
     },
     "node_modules/@astrojs/language-server": {
-      "version": "2.14.1",
-      "resolved": "https://registry.npmjs.org/@astrojs/language-server/-/language-server-2.14.1.tgz",
-      "integrity": "sha512-mkKtCTPRD4dyKdAqIP0zmmPyO/ZABOqFESnaVca47Dg/sAagJnDSEsDUDzNbHFh1+9Dj1o5y4iwNsxJboGdaNg==",
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/language-server/-/language-server-2.15.0.tgz",
+      "integrity": "sha512-wJHSjGApm5X8Rg1GvkevoatZBfvaFizY4kCPvuSYgs3jGCobuY3KstJGKC1yNLsRJlDweHruP+J54iKn9vEKoA==",
       "dev": true,
       "dependencies": {
         "@astrojs/compiler": "^2.10.3",
         "@astrojs/yaml2ts": "^0.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.15",
-        "@volar/kit": "~2.4.0",
-        "@volar/language-core": "~2.4.0",
-        "@volar/language-server": "~2.4.0",
-        "@volar/language-service": "~2.4.0",
-        "@volar/typescript": "~2.4.0",
+        "@volar/kit": "~2.4.5",
+        "@volar/language-core": "~2.4.5",
+        "@volar/language-server": "~2.4.5",
+        "@volar/language-service": "~2.4.5",
         "fast-glob": "^3.2.12",
         "muggle-string": "^0.4.1",
         "volar-service-css": "0.0.61",
@@ -1640,9 +1638,9 @@
       }
     },
     "node_modules/@rollup/pluginutils": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
-      "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.2.tgz",
+      "integrity": "sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw==",
       "dev": true,
       "dependencies": {
         "@types/estree": "^1.0.0",
@@ -1876,43 +1874,44 @@
       ]
     },
     "node_modules/@shikijs/core": {
-      "version": "1.17.6",
-      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.17.6.tgz",
-      "integrity": "sha512-9ztslig6/YmCg/XwESAXbKjAjOhaq6HVced9NY6qcbDz1X5g/S90Wco2vMjBNX/6V71ASkzri76JewSGPa7kiQ==",
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.21.0.tgz",
+      "integrity": "sha512-zAPMJdiGuqXpZQ+pWNezQAk5xhzRXBNiECFPcJLtUdsFM3f//G95Z15EHTnHchYycU8kIIysqGgxp8OVSj1SPQ==",
       "dev": true,
       "dependencies": {
-        "@shikijs/engine-javascript": "1.17.6",
-        "@shikijs/engine-oniguruma": "1.17.6",
-        "@shikijs/types": "1.17.6",
+        "@shikijs/engine-javascript": "1.21.0",
+        "@shikijs/engine-oniguruma": "1.21.0",
+        "@shikijs/types": "1.21.0",
         "@shikijs/vscode-textmate": "^9.2.2",
         "@types/hast": "^3.0.4",
-        "hast-util-to-html": "^9.0.2"
+        "hast-util-to-html": "^9.0.3"
       }
     },
     "node_modules/@shikijs/engine-javascript": {
-      "version": "1.17.6",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.17.6.tgz",
-      "integrity": "sha512-5EEZj8tVcierNxm4V0UMS2PVoflb0UJPalWWV8l9rRg+oOfnr5VivqBJbkyq5grltVPvByIXvVbY8GSM/356jQ==",
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.21.0.tgz",
+      "integrity": "sha512-jxQHNtVP17edFW4/0vICqAVLDAxmyV31MQJL4U/Kg+heQALeKYVOWo0sMmEZ18FqBt+9UCdyqGKYE7bLRtk9mg==",
       "dev": true,
       "dependencies": {
-        "@shikijs/types": "1.17.6",
+        "@shikijs/types": "1.21.0",
+        "@shikijs/vscode-textmate": "^9.2.2",
         "oniguruma-to-js": "0.4.3"
       }
     },
     "node_modules/@shikijs/engine-oniguruma": {
-      "version": "1.17.6",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.17.6.tgz",
-      "integrity": "sha512-NLfWDMXFYe0nDHFbEoyZdz89aIIey3bTfF3zLYSUNTXks5s4uinZVmuPOFf1HfTeGqIn8uErJSBc3VnpJO7Alw==",
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.21.0.tgz",
+      "integrity": "sha512-AIZ76XocENCrtYzVU7S4GY/HL+tgHGbVU+qhiDyNw1qgCA5OSi4B4+HY4BtAoJSMGuD/L5hfTzoRVbzEm2WTvg==",
       "dev": true,
       "dependencies": {
-        "@shikijs/types": "1.17.6",
+        "@shikijs/types": "1.21.0",
         "@shikijs/vscode-textmate": "^9.2.2"
       }
     },
     "node_modules/@shikijs/types": {
-      "version": "1.17.6",
-      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.17.6.tgz",
-      "integrity": "sha512-ndTFa2TJi2w51ddKQDn3Jy8f6K4E5Q2x3dA3Hmsd3+YmxDQ10UWHjcw7VbVbKzv3VcUvYPLy+z9neqytSzUMUg==",
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.21.0.tgz",
+      "integrity": "sha512-tzndANDhi5DUndBtpojEq/42+dpUF2wS7wdCDQaFtIXm3Rd1QkrcVgSSRLOvEwexekihOXfbYJINW37g96tJRw==",
       "dev": true,
       "dependencies": {
         "@shikijs/vscode-textmate": "^9.2.2",
@@ -2051,9 +2050,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "22.7.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.0.tgz",
-      "integrity": "sha512-MOdOibwBs6KW1vfqz2uKMlxq5xAfAZ98SZjO8e3XnAbFnTJtAspqhWk7hrdSAs9/Y14ZWMiy7/MxMUzAOadYEw==",
+      "version": "22.7.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.4.tgz",
+      "integrity": "sha512-y+NPi1rFzDs1NdQHHToqeiX2TIS79SWEAw9GYhkkx8bD0ChpfqC+n2j5OXOCpzfojBEBt6DnEnnG9MY0zk1XLg==",
       "dev": true,
       "dependencies": {
         "undici-types": "~6.19.2"
@@ -2081,13 +2080,13 @@
       "dev": true
     },
     "node_modules/@volar/kit": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@volar/kit/-/kit-2.4.0.tgz",
-      "integrity": "sha512-uqwtPKhrbnP+3f8hs+ltDYXLZ6Wdbs54IzkaPocasI4aBhqWLht5qXctE1MqpZU52wbH359E0u9nhxEFmyon+w==",
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@volar/kit/-/kit-2.4.5.tgz",
+      "integrity": "sha512-ZzyErW5UiDfiIuJ/lpqc2Kx5PHDGDZ/bPlPJYpRcxlrn8Z8aDhRlsLHkNKcNiH65TmNahk2kbLaiejiqu6BD3A==",
       "dev": true,
       "dependencies": {
-        "@volar/language-service": "2.4.0",
-        "@volar/typescript": "2.4.0",
+        "@volar/language-service": "2.4.5",
+        "@volar/typescript": "2.4.5",
         "typesafe-path": "^0.2.2",
         "vscode-languageserver-textdocument": "^1.0.11",
         "vscode-uri": "^3.0.8"
@@ -2097,23 +2096,23 @@
       }
     },
     "node_modules/@volar/language-core": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0.tgz",
-      "integrity": "sha512-FTla+khE+sYK0qJP+6hwPAAUwiNHVMph4RUXpxf/FIPKUP61NFrVZorml4mjFShnueR2y9/j8/vnh09YwVdH7A==",
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.5.tgz",
+      "integrity": "sha512-F4tA0DCO5Q1F5mScHmca0umsi2ufKULAnMOVBfMsZdT4myhVl4WdKRwCaKcfOkIEuyrAVvtq1ESBdZ+rSyLVww==",
       "dev": true,
       "dependencies": {
-        "@volar/source-map": "2.4.0"
+        "@volar/source-map": "2.4.5"
       }
     },
     "node_modules/@volar/language-server": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@volar/language-server/-/language-server-2.4.0.tgz",
-      "integrity": "sha512-rmGIjAxWekWQiGH97Mosb4juiD/hfFYNQKV5Py9r7vDOLSkbIwRhITbwHm88NJKs8P6TNc6w/PfBXN6yjKadJg==",
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@volar/language-server/-/language-server-2.4.5.tgz",
+      "integrity": "sha512-l5PswE0JzCtstTlwBUpikeSa3lNUBJhTuWtj9KclZTGi2Uex4RcqGOhTiDsUUtvdv/hEuYCxGq1EdJJPlQsD/g==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "2.4.0",
-        "@volar/language-service": "2.4.0",
-        "@volar/typescript": "2.4.0",
+        "@volar/language-core": "2.4.5",
+        "@volar/language-service": "2.4.5",
+        "@volar/typescript": "2.4.5",
         "path-browserify": "^1.0.1",
         "request-light": "^0.7.0",
         "vscode-languageserver": "^9.0.1",
@@ -2123,30 +2122,30 @@
       }
     },
     "node_modules/@volar/language-service": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@volar/language-service/-/language-service-2.4.0.tgz",
-      "integrity": "sha512-4P3yeQXIL68mLfS3n6P3m02IRg3GnLHUU9k/1PCHEfm5FG9bySkDOc72dbBn2vAa2BxOqm18bmmZXrsWuQ5AOw==",
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@volar/language-service/-/language-service-2.4.5.tgz",
+      "integrity": "sha512-xiFlL0aViGg6JhwAXyohPrdlID13uom8WQg6DWYaV8ob8RRy+zoLlBUI8SpQctwlWEO9poyrYK01revijAwkcw==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "2.4.0",
+        "@volar/language-core": "2.4.5",
         "vscode-languageserver-protocol": "^3.17.5",
         "vscode-languageserver-textdocument": "^1.0.11",
         "vscode-uri": "^3.0.8"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0.tgz",
-      "integrity": "sha512-2ceY8/NEZvN6F44TXw2qRP6AQsvCYhV2bxaBPWxV9HqIfkbRydSksTFObCF1DBDNBfKiZTS8G/4vqV6cvjdOIQ==",
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.5.tgz",
+      "integrity": "sha512-varwD7RaKE2J/Z+Zu6j3mNNJbNT394qIxXwdvz/4ao/vxOfyClZpSDtLKkwWmecinkOVos5+PWkWraelfMLfpw==",
       "dev": true
     },
     "node_modules/@volar/typescript": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0.tgz",
-      "integrity": "sha512-9zx3lQWgHmVd+JRRAHUSRiEhe4TlzL7U7e6ulWXOxHH/WNYxzKwCvZD7WYWEZFdw4dHfTD9vUR0yPQO6GilCaQ==",
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.5.tgz",
+      "integrity": "sha512-mcT1mHvLljAEtHviVcBuOyAwwMKz1ibXTi5uYtP/pf4XxoAzpdkQ+Br2IC0NPCvLCbjPZmbf3I0udndkfB1CDg==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "2.4.0",
+        "@volar/language-core": "2.4.5",
         "path-browserify": "^1.0.1",
         "vscode-uri": "^3.0.8"
       }
@@ -2176,6 +2175,16 @@
       "integrity": "sha512-KYSIHVmslkaCDyw013pphY+d7x1qV8IZupYfeIfzNA+nsaWHbn5uPuQRvdRFsa9zFzGeudPuoGoZ1Op4jrJXIQ==",
       "dev": true
     },
+    "node_modules/@vtbag/cam-shaft": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@vtbag/cam-shaft/-/cam-shaft-1.0.0.tgz",
+      "integrity": "sha512-PeSTNMD/faT+RlvYAoBhyLoiMS5fKszQiRFz4k6oJnWEaNZZRqbbm6w4jrFzYn0hEVVNx0d7ludHscBAcfD7EA==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/martrapp"
+      }
+    },
     "node_modules/@vtbag/element-crossing": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@vtbag/element-crossing/-/element-crossing-1.0.1.tgz",
@@ -2187,9 +2196,9 @@
       }
     },
     "node_modules/@vtbag/inspection-chamber": {
-      "version": "1.0.14",
-      "resolved": "https://registry.npmjs.org/@vtbag/inspection-chamber/-/inspection-chamber-1.0.14.tgz",
-      "integrity": "sha512-YZJFgj/5q/7CnC2DQcHYgkxeuQSrkOEILthuKELm6q0R/3AlTO13W/lF0a2wwkH9KsFloiJA+W98RZf7HrqwuQ==",
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/@vtbag/inspection-chamber/-/inspection-chamber-1.0.15.tgz",
+      "integrity": "sha512-8Zk3VhwmI2WjrLpezZNoCOdVIzX/kQUjZDP4DAGii3x1L7cEZPKOsztl6y92Gt57a7+ex0bJKbTEg3gIaqSXQA==",
       "dev": true,
       "funding": {
         "type": "github",
@@ -2317,19 +2326,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -2343,12 +2339,12 @@
       "dev": true
     },
     "node_modules/aria-query": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
       "dev": true,
-      "dependencies": {
-        "dequal": "^2.0.3"
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/array-iterate": {
@@ -2371,9 +2367,9 @@
       }
     },
     "node_modules/astro": {
-      "version": "4.15.9",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-4.15.9.tgz",
-      "integrity": "sha512-51oXq9qrZ5OPWYmEXt1kGrvWmVeWsx28SgBTzi2XW6iwcnW/wC5ONm6ol6qBGSCF93tQvZplXvuzpaw1injECA==",
+      "version": "4.15.11",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-4.15.11.tgz",
+      "integrity": "sha512-uA9fenaRR+j6ksPFsmhM88ttz94a66SET1TZxAJLxctxWkDlgz58BxZYUc1gNlt0azhgzOgh4hP3q9M4YzAmBA==",
       "dev": true,
       "dependencies": {
         "@astrojs/compiler": "^2.10.3",
@@ -2383,14 +2379,14 @@
         "@babel/core": "^7.25.2",
         "@babel/plugin-transform-react-jsx": "^7.25.2",
         "@babel/types": "^7.25.6",
-        "@oslojs/encoding": "^1.0.0",
-        "@rollup/pluginutils": "^5.1.0",
+        "@oslojs/encoding": "^1.1.0",
+        "@rollup/pluginutils": "^5.1.2",
         "@types/babel__core": "^7.20.5",
         "@types/cookie": "^0.6.0",
         "acorn": "^8.12.1",
-        "aria-query": "^5.3.0",
+        "aria-query": "^5.3.2",
         "axobject-query": "^4.1.0",
-        "boxen": "7.1.1",
+        "boxen": "8.0.1",
         "ci-info": "^4.0.0",
         "clsx": "^2.1.1",
         "common-ancestor-path": "^1.0.1",
@@ -2398,10 +2394,10 @@
         "cssesc": "^3.0.0",
         "debug": "^4.3.7",
         "deterministic-object-hash": "^2.0.2",
-        "devalue": "^5.0.0",
+        "devalue": "^5.1.1",
         "diff": "^5.2.0",
         "dlv": "^1.1.3",
-        "dset": "^3.1.3",
+        "dset": "^3.1.4",
         "es-module-lexer": "^1.5.4",
         "esbuild": "^0.21.5",
         "estree-walker": "^3.0.3",
@@ -2424,22 +2420,22 @@
         "p-queue": "^8.0.1",
         "preferred-pm": "^4.0.0",
         "prompts": "^2.4.2",
-        "rehype": "^13.0.1",
+        "rehype": "^13.0.2",
         "semver": "^7.6.3",
-        "shiki": "^1.16.2",
+        "shiki": "^1.21.0",
         "string-width": "^7.2.0",
         "strip-ansi": "^7.1.0",
         "tinyexec": "^0.3.0",
         "tsconfck": "^3.1.3",
         "unist-util-visit": "^5.0.0",
         "vfile": "^6.0.3",
-        "vite": "^5.4.3",
+        "vite": "^5.4.8",
         "vitefu": "^1.0.2",
         "which-pm": "^3.0.0",
         "xxhash-wasm": "^1.0.2",
         "yargs-parser": "^21.1.1",
         "zod": "^3.23.8",
-        "zod-to-json-schema": "^3.23.2",
+        "zod-to-json-schema": "^3.23.3",
         "zod-to-ts": "^1.2.0"
       },
       "bin": {
@@ -2486,9 +2482,9 @@
       }
     },
     "node_modules/astro-d2": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/astro-d2/-/astro-d2-0.5.1.tgz",
-      "integrity": "sha512-EtPkmP9tuh1KFE5u/TljiVRoOZRe2LiPHv1XiOMN8dE/kTdOEJGJxkQxUqq2HMcxil/SeORqy4a+pVBCZ/ckhA==",
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/astro-d2/-/astro-d2-0.5.2.tgz",
+      "integrity": "sha512-JN5kHalh/dQIZD6JG8y+WXY/j+K9NigyW7dLa+VbPeQnoNkRbvVms6847gqU5czojR7uzpArL7ug27vKae4lQg==",
       "dev": true,
       "dependencies": {
         "unist-util-visit": "5.0.0"
@@ -2513,13 +2509,14 @@
       }
     },
     "node_modules/astro-vtbot": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/astro-vtbot/-/astro-vtbot-1.10.2.tgz",
-      "integrity": "sha512-1qWo5uGwEjTn+DAr1dGPuH8kSc2GGa10wsFSoS0vse2Fzz3UlItkGPj7tmyga50pRPAj3tBXtQVveXrpnLx9fA==",
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/astro-vtbot/-/astro-vtbot-1.10.3.tgz",
+      "integrity": "sha512-DihmfPh4xDS1vp+JfYwyheyWrwUBtWOcziljBMJx2/wXMKMDso9DUVBvW9WQb+tSS6Y3FoSErHBA2YlZXO2Q7w==",
       "dev": true,
       "dependencies": {
+        "@vtbag/cam-shaft": "^1.0.0",
         "@vtbag/element-crossing": "^1.0.1",
-        "@vtbag/inspection-chamber": "^1.0.14",
+        "@vtbag/inspection-chamber": "^1.0.15",
         "@vtbag/turn-signal": "^1.0.2"
       },
       "funding": {
@@ -2577,18 +2574,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -2596,22 +2581,22 @@
       "dev": true
     },
     "node_modules/boxen": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/boxen/-/boxen-7.1.1.tgz",
-      "integrity": "sha512-2hCgjEmP8YLWQ130n2FerGv7rYpfBmnmp9Uy2Le1vge6X3gZIfSmEzP5QTDElFxcvVcXlEn8Aq6MU/PZygIOog==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-8.0.1.tgz",
+      "integrity": "sha512-F3PH5k5juxom4xktynS7MoFY+NUWH5LC4CnH11YB8NPew+HLpmBLCybSAEyb2F+4pRXhuhWqFesoQd6DAyc2hw==",
       "dev": true,
       "dependencies": {
         "ansi-align": "^3.0.1",
-        "camelcase": "^7.0.1",
-        "chalk": "^5.2.0",
+        "camelcase": "^8.0.0",
+        "chalk": "^5.3.0",
         "cli-boxes": "^3.0.0",
-        "string-width": "^5.1.2",
-        "type-fest": "^2.13.0",
-        "widest-line": "^4.0.1",
-        "wrap-ansi": "^8.1.0"
+        "string-width": "^7.2.0",
+        "type-fest": "^4.21.0",
+        "widest-line": "^5.0.0",
+        "wrap-ansi": "^9.0.0"
       },
       "engines": {
-        "node": ">=14.16"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -2629,29 +2614,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/boxen/node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true
-    },
-    "node_modules/boxen/node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/braces": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
@@ -2697,12 +2659,12 @@
       }
     },
     "node_modules/camelcase": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-7.0.1.tgz",
-      "integrity": "sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-8.0.0.tgz",
+      "integrity": "sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==",
       "dev": true,
       "engines": {
-        "node": ">=14.16"
+        "node": ">=16"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -2793,27 +2755,18 @@
       }
     },
     "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
+      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
       "dev": true,
       "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
+        "readdirp": "^4.0.1"
       },
       "engines": {
-        "node": ">= 8.10.0"
+        "node": ">= 14.16.0"
       },
       "funding": {
         "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
       }
     },
     "node_modules/ci-info": {
@@ -3179,9 +3132,9 @@
       }
     },
     "node_modules/devalue": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.0.0.tgz",
-      "integrity": "sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.1.1.tgz",
+      "integrity": "sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==",
       "dev": true
     },
     "node_modules/devlop": {
@@ -3234,12 +3187,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true
-    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.5.tgz",
@@ -3247,9 +3194,9 @@
       "dev": true
     },
     "node_modules/emmet": {
-      "version": "2.4.7",
-      "resolved": "https://registry.npmjs.org/emmet/-/emmet-2.4.7.tgz",
-      "integrity": "sha512-O5O5QNqtdlnQM2bmKHtJgyChcrFMgQuulI+WdiOw2NArzprUqqxUW6bgYtKvzKgrsYpuLWalOkdhNP+1jluhCA==",
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/emmet/-/emmet-2.4.11.tgz",
+      "integrity": "sha512-23QPJB3moh/U9sT4rQzGgeyyGIrcM+GH5uVYg2C6wZIxAIJq7Ng3QLT79tl8FUwDXhyq9SusfknOrofAKqvgyQ==",
       "dev": true,
       "workspaces": [
         "./packages/scanner",
@@ -3491,9 +3438,9 @@
       }
     },
     "node_modules/fast-uri": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.1.tgz",
-      "integrity": "sha512-MWipKbbYiYI0UC7cl8m/i/IWTqfC8YXsqjzybjddLsFjStroQzsHXkc73JutMvBiXmOvapk+axIl79ig5t55Bw==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.2.tgz",
+      "integrity": "sha512-GR6f0hD7XXyNJa25Tb9BuIdN0tdr+0BMi6/CJPH3wJO1JjNG3n/VsSw38AwRdKZABm8lGbPfakLRkYzx2V9row==",
       "dev": true
     },
     "node_modules/fastq": {
@@ -3917,9 +3864,9 @@
       }
     },
     "node_modules/hast-util-to-html": {
-      "version": "9.0.2",
-      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.2.tgz",
-      "integrity": "sha512-RP5wNpj5nm1Z8cloDv4Sl4RS8jH5HYa0v93YB6Wb4poEzgMo/dAAL0KcT4974dCjcNG5pkLqTImeFHHCwwfY3g==",
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.3.tgz",
+      "integrity": "sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==",
       "dev": true,
       "dependencies": {
         "@types/hast": "^3.0.0",
@@ -4172,18 +4119,6 @@
       "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
       "dev": true
     },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-decimal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
@@ -5744,15 +5679,6 @@
       "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
       "dev": true
     },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/not": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/not/-/not-0.1.0.tgz",
@@ -6296,15 +6222,16 @@
       ]
     },
     "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
+      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
       "dev": true,
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
       "engines": {
-        "node": ">=8.10.0"
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
       }
     },
     "node_modules/regenerator-runtime": {
@@ -6314,15 +6241,15 @@
       "dev": true
     },
     "node_modules/regex": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/regex/-/regex-4.3.2.tgz",
-      "integrity": "sha512-kK/AA3A9K6q2js89+VMymcboLOlF5lZRCYJv3gzszXFHBr6kO6qLGzbm+UIugBEV8SMMKCTR59txoY6ctRHYVw==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/regex/-/regex-4.3.3.tgz",
+      "integrity": "sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==",
       "dev": true
     },
     "node_modules/rehype": {
-      "version": "13.0.1",
-      "resolved": "https://registry.npmjs.org/rehype/-/rehype-13.0.1.tgz",
-      "integrity": "sha512-AcSLS2mItY+0fYu9xKxOu1LhUZeBZZBx8//5HKzF+0XP+eP8+6a5MXn2+DW2kfXR6Dtp1FEXMVrjyKAcvcU8vg==",
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/rehype/-/rehype-13.0.2.tgz",
+      "integrity": "sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A==",
       "dev": true,
       "dependencies": {
         "@types/hast": "^3.0.0",
@@ -6856,15 +6783,15 @@
       }
     },
     "node_modules/shiki": {
-      "version": "1.17.6",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.17.6.tgz",
-      "integrity": "sha512-RejGugKpDM75vh6YtF9R771acxHRDikC/01kxsUGW+Pnaz3pTY+c8aZB5CnD7p0vuFPs1HaoAIU/4E+NCfS+mQ==",
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.21.0.tgz",
+      "integrity": "sha512-apCH5BoWTrmHDPGgg3RF8+HAAbEL/CdbYr8rMw7eIrdhCkZHdVGat5mMNlRtd1erNG01VPMIKHNQ0Pj2HMAiog==",
       "dev": true,
       "dependencies": {
-        "@shikijs/core": "1.17.6",
-        "@shikijs/engine-javascript": "1.17.6",
-        "@shikijs/engine-oniguruma": "1.17.6",
-        "@shikijs/types": "1.17.6",
+        "@shikijs/core": "1.21.0",
+        "@shikijs/engine-javascript": "1.21.0",
+        "@shikijs/engine-oniguruma": "1.21.0",
+        "@shikijs/types": "1.21.0",
         "@shikijs/vscode-textmate": "^9.2.2",
         "@types/hast": "^3.0.4"
       }
@@ -7150,12 +7077,12 @@
       "optional": true
     },
     "node_modules/type-fest": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
-      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "version": "4.26.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.26.1.tgz",
+      "integrity": "sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==",
       "dev": true,
       "engines": {
-        "node": ">=12.20"
+        "node": ">=16"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -7429,9 +7356,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.6",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz",
-      "integrity": "sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==",
+      "version": "5.4.8",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
+      "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.21.3",
@@ -7642,25 +7569,25 @@
       }
     },
     "node_modules/vscode-css-languageservice": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/vscode-css-languageservice/-/vscode-css-languageservice-6.3.0.tgz",
-      "integrity": "sha512-nU92imtkgzpCL0xikrIb8WvedV553F2BENzgz23wFuok/HLN5BeQmroMy26pUwFxV2eV8oNRmYCUv8iO7kSMhw==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/vscode-css-languageservice/-/vscode-css-languageservice-6.3.1.tgz",
+      "integrity": "sha512-1BzTBuJfwMc3A0uX4JBdJgoxp74cjj4q2mDJdp49yD/GuAq4X0k5WtK6fNcMYr+FfJ9nqgR6lpfCSZDkARJ5qQ==",
       "dev": true,
       "dependencies": {
         "@vscode/l10n": "^0.0.18",
-        "vscode-languageserver-textdocument": "^1.0.11",
+        "vscode-languageserver-textdocument": "^1.0.12",
         "vscode-languageserver-types": "3.17.5",
         "vscode-uri": "^3.0.8"
       }
     },
     "node_modules/vscode-html-languageservice": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/vscode-html-languageservice/-/vscode-html-languageservice-5.3.0.tgz",
-      "integrity": "sha512-C4Z3KsP5Ih+fjHpiBc5jxmvCl+4iEwvXegIrzu2F5pktbWvQaBT3YkVPk8N+QlSSMk8oCG6PKtZ/Sq2YHb5e8g==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/vscode-html-languageservice/-/vscode-html-languageservice-5.3.1.tgz",
+      "integrity": "sha512-ysUh4hFeW/WOWz/TO9gm08xigiSsV/FOAZ+DolgJfeLftna54YdmZ4A+lIn46RbdO3/Qv5QHTn1ZGqmrXQhZyA==",
       "dev": true,
       "dependencies": {
         "@vscode/l10n": "^0.0.18",
-        "vscode-languageserver-textdocument": "^1.0.11",
+        "vscode-languageserver-textdocument": "^1.0.12",
         "vscode-languageserver-types": "^3.17.5",
         "vscode-uri": "^3.0.8"
       }
@@ -7774,55 +7701,32 @@
       }
     },
     "node_modules/widest-line": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-4.0.1.tgz",
-      "integrity": "sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==",
-      "dev": true,
-      "dependencies": {
-        "string-width": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/widest-line/node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true
-    },
-    "node_modules/widest-line/node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-5.0.0.tgz",
+      "integrity": "sha512-c9bZp7b5YtRj2wOe6dlj32MK+Bx/M/d+9VB2SHM1OtsUHR0aV0tdP6DWh/iMt0kWi1t5g1Iudu6hQRNd1A4PVA==",
       "dev": true,
       "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
+        "string-width": "^7.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
+      "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==",
       "dev": true,
       "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
@@ -7840,29 +7744,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/wrap-ansi/node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true
-    },
-    "node_modules/wrap-ansi/node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/xxhash-wasm": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/xxhash-wasm/-/xxhash-wasm-1.0.2.tgz",
@@ -7885,9 +7766,9 @@
       "dev": true
     },
     "node_modules/yaml": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.0.tgz",
-      "integrity": "sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz",
+      "integrity": "sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==",
       "dev": true,
       "bin": {
         "yaml": "bin.mjs"
@@ -8078,9 +7959,9 @@
       }
     },
     "node_modules/zod-to-json-schema": {
-      "version": "3.23.2",
-      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.23.2.tgz",
-      "integrity": "sha512-uSt90Gzc/tUfyNqxnjlfBs8W6WSGpNBv0rVsNxP/BVSMHMKGdthPYff4xtCHYloJGM0CFxFsb3NbC0eqPhfImw==",
+      "version": "3.23.3",
+      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.23.3.tgz",
+      "integrity": "sha512-TYWChTxKQbRJp5ST22o/Irt9KC5nj7CdBKYB/AosCRdj/wxEMvv4NNaj9XVUHDOIp53ZxArGhnw5HMZziPFjog==",
       "dev": true,
       "peerDependencies": {
         "zod": "^3.23.3"
diff --git a/package.json b/package.json
index 50118c9..43e0027 100644
--- a/package.json
+++ b/package.json
@@ -9,18 +9,18 @@
     "test": "npx playwright test"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.3",
+    "@astrojs/check": "^0.9.4",
     "@astrojs/starlight": "^0.28.2",
     "@playwright/test": "^1.47.2",
     "@splidejs/splide": "^4.1.4",
-    "@types/node": "^22.7.0",
+    "@types/node": "^22.7.4",
     "@vtbag/element-crossing": "^1.0.1",
-    "@vtbag/inspection-chamber": "^1.0.14",
+    "@vtbag/inspection-chamber": "^1.0.15",
     "@vtbag/turn-signal": "^1.0.1",
-    "astro": "^4.15.9",
+    "astro": "^4.15.11",
     "astro-breadcrumbs": "^3.2.0",
-    "astro-d2": "^0.5.1",
-    "astro-vtbot": "^1.10.2",
+    "astro-d2": "^0.5.2",
+    "astro-vtbot": "^1.10.3",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-external-links": "^3.0.0",
     "rehype-slug": "^6.0.0",
diff --git a/public/chamber.png b/public/chamber.png
deleted file mode 100644
index 6354f86..0000000
Binary files a/public/chamber.png and /dev/null differ
diff --git a/public/chamber.png b/public/chamber.png
new file mode 120000
index 0000000..131c148
--- /dev/null
+++ b/public/chamber.png
@@ -0,0 +1 @@
+../src/assets/chamber.png
\ No newline at end of file
diff --git a/public/crossing.png b/public/crossing.png
deleted file mode 100644
index 5011836..0000000
Binary files a/public/crossing.png and /dev/null differ
diff --git a/public/crossing.png b/public/crossing.png
new file mode 120000
index 0000000..147593f
--- /dev/null
+++ b/public/crossing.png
@@ -0,0 +1 @@
+../src/assets/crossing.png
\ No newline at end of file
diff --git a/public/shaft.png b/public/shaft.png
new file mode 120000
index 0000000..f4105e9
--- /dev/null
+++ b/public/shaft.png
@@ -0,0 +1 @@
+../src/assets/shaft.png
\ No newline at end of file
diff --git a/public/signal.png b/public/signal.png
deleted file mode 100644
index de26d30..0000000
Binary files a/public/signal.png and /dev/null differ
diff --git a/public/signal.png b/public/signal.png
new file mode 120000
index 0000000..0b3a535
--- /dev/null
+++ b/public/signal.png
@@ -0,0 +1 @@
+../src/assets/signal.png
\ No newline at end of file
diff --git a/src/assets/cards/shaft.png b/src/assets/cards/shaft.png
new file mode 100644
index 0000000..010a3ef
Binary files /dev/null and b/src/assets/cards/shaft.png differ
diff --git a/src/assets/fi.png b/src/assets/fi.png
new file mode 100644
index 0000000..778f642
Binary files /dev/null and b/src/assets/fi.png differ
diff --git a/src/assets/shaft.png b/src/assets/shaft.png
new file mode 100644
index 0000000..5a896e9
Binary files /dev/null and b/src/assets/shaft.png differ
diff --git a/src/content/docs/tips/pseudo-smooth-scrolling.mdx b/src/content/docs/tips/pseudo-smooth-scrolling.mdx
new file mode 100644
index 0000000..a57af78
--- /dev/null
+++ b/src/content/docs/tips/pseudo-smooth-scrolling.mdx
@@ -0,0 +1,76 @@
+---
+title: "Pseudo-Smooth-Scrolling"
+description: "Instant scrolling on a page with view transition might lead to an unexpected smooth-scrolling effect. "
+---
+
+Pseudo-smooth-scrolling is an effect that looks like smooth-scrolling, but in fact is the result of the browser’s default morph animation. It happens when a navigation involves instant scrolling and tall transitions groups.
+
+Take a look at the image below, showing an abstract website layout with a light blue header, a blue navigation panel, and a light yellow content area. The content area has a `view-transition-name` applied. If you scroll down and then navigate to another page, you might notice something strange: while the scrollbar jumps instantly, the content scrolls smoothly. What's going on here?
+
+
+<svg width="300px" height="150px" viewBox="0 0 300 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <rect fill="none" stroke="#aaa" x="0" y="0" width="300" height="150"></rect>
+  <rect fill="lightblue" stroke="#aaa" x="0" y="0" width="300" height="30"></rect>
+  <rect fill="steelblue" stroke="#aaa" x="0" y="30" width="70" height="120"></rect>
+  <rect fill="gray" stroke="#aaa" x="290" y="30" width="10" height="120"></rect>
+  <rect fill="white" stroke="#aaa" x="290" y="100" width="10" height="30"></rect>
+  <rect fill="lightyellow" stroke="#aaa" x="70" y="30" width="220" height="120"></rect>
+</svg>
+
+Only part of the content element is visible at a time, as it's much taller than the screen. For simplicity, let's assume the content element is the same size on both the old and new pages. However, different sections of it are displayed. On the old page, the purple section at the bottom is visible.
+<svg width="300px" height="250px" viewBox="0 -100 300 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <rect fill="none" stroke="#aaa" x="0" y="0" width="300" height="150"></rect>
+  <rect fill="lightblue" stroke="#aaa" x="0" y="0" width="300" height="30"></rect>
+  <rect fill="steelblue" stroke="#aaa" x="0" y="30" width="70" height="120"></rect>
+  <rect fill="gray" stroke="#aaa" x="290" y="30" width="10" height="120"></rect>
+  <rect fill="white" stroke="#aaa" x="290" y="100" width="10" height="30"></rect>
+  <rect fill="lightyellow" stroke="#aaa" x="70" y="-100" width="220" height="250"></rect>
+  <rect fill="none" stroke="darkslateblue" stroke-width="3" x="70" y="32" width="220" height="116"></rect>
+</svg>
+
+On the new page, the top part of the content element is visible, which is the dark green section.
+
+When you select the new page from the navigation panel, the scrollbar instantly jumps to the top, and the view transition kicks in. Through the default group animation applied to the content element, the browser initially shows the purple-bordered section, then smoothly transitions to the green-bordered area. During this process, it cross-fades between the old and new content.
+
+<svg width="300px" height="280px" viewBox="0 0 300 280" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <rect fill="none" stroke="#aaa" x="0" y="0" width="300" height="150"></rect>
+  <rect fill="lightblue" stroke="#aaa" x="0" y="0" width="300" height="30"></rect>
+  <rect fill="steelblue" stroke="#aaa" x="0" y="30" width="70" height="120"></rect>
+  <rect fill="gray" stroke="#aaa" x="290" y="30" width="10" height="120"></rect>
+  <rect fill="white" stroke="#aaa" x="290" y="30" width="10" height="30"></rect>
+  <rect fill="lightyellow" stroke="#aaa" x="70" y="30" width="220" height="250"></rect>
+  <rect fill="none" stroke="darkolivegreen" stroke-width="3" x="70" y="32" width="220" height="116"></rect>
+  <rect fill="none" stroke="darkslateblue" stroke-width="3" x="70" y="160" width="220" height="118"></rect>
+</svg>
+
+So, it’s not the scrollbar slider that smoothly moves from the lower to the upper position, but rather the view transition images that slide down through the viewport.
+
+## Interactive Demo
+[Explore an interactive demo of the effect](/shaft-demo/1/)
+
+
+
+## How to Avoid?
+
+The pseudo-smooth-scrolling effect can be quite appealing if the pages are not too lengthy and you intend to use it deliberately. However, it might also occur unintentionally, especially if you specifically want to avoid smooth scrolling on your pages.
+There are two ways to avoid the effect.
+
+### Just Animate the Root
+The pseudo-smooth-scrolling effect only occurs when the `view-transition-name` is applied to an HTML element other than the top-level `<html>` element. The View Transition API [treats the `:root` element differently](https://drafts.csswg.org/css-view-transitions-1/#capture-the-image). The old and new images of the document element are always constrained to the size of the viewport, meaning the default group animation doesn’t transform the position and no scrolling happens at all.
+
+If possible, resist the temptation to apply a view transition name to large content elements. Instead, use the `root` transition group on the `<html>` element to achieve the desired effect. If you fear that your root group now obscures header, footer, and navbar, you can always assign view transition names to those elements, allowing them to enter the view transition layer and [cover portions of the root images](/basics/pseudos/#rendering-pseudo-elements) as needed.
+
+### Make Use of the Cam-Shaft
+
+
+
+If using the root transition group doesn't meet your design objectives, you can turn to the [`@vtbag/cam-shaft`](/tools/cam-shaft/) script to adjust the images into their proper positions, compensating for the scroll delta. This approach eliminates sliding viewports and the pseudo-smooth-scroll effect. Just identify the transition groups that need adjustments, and let the script take care of the rest.
+
+<style>{`
+svg {
+  margin: 0 auto;
+}
+`}</style>
\ No newline at end of file
diff --git a/src/content/docs/tools/cam-shaft.mdx b/src/content/docs/tools/cam-shaft.mdx
new file mode 100644
index 0000000..03af015
--- /dev/null
+++ b/src/content/docs/tools/cam-shaft.mdx
@@ -0,0 +1,115 @@
+---
+title: The Cam-Shaft
+description: "Bump your view transition images into position to avoid that unexpected pseudo-smooth-scrolling."
+---
+import { Steps } from "@astrojs/starlight/components";
+
+<div style="display:flex">
+<div id="logo" style="flex:1; margin: 3ex">
+![The Cam-shaft](../../../assets/shaft.png)
+</div><div style="flex:3">
+
+Bump your view transition images into position to avoid that unexpected pseudo-smooth-scrolling.
+
+The Cam-Shaft is about an issue we already resolved for Astro's ViewTransitions (see [here](https://events-3bg.pages.dev/jotter/starlight/inner-workings/transitions/#the-pseudo-scrolling-main-area) and [here](https://events-3bg.pages.dev/library/PageOffset/)), but it still requires support for browser-native cross-document view transitions.
+
+</div>
+</div>
+<style>{`
+  #logo img {
+    view-transition-name: logo;
+    mask-image: radial-gradient(
+        ellipse at center,
+        white 35%,
+        transparent 71%
+      );
+  }
+`}</style>
+
+
+## PREREQUISITE
+
+:::tip[View Transition API]
+The Camshaft is designed to address an issue with browser-native cross-document view transitions. In browsers that haven't implemented the API yet, it simply does nothing, as there's no problem to solve.
+:::
+
+
+## What is it?
+
+This tools is intended to avoid the [pseudo-smooth-scroll effect](/tips/pseudo-smooth-scrolling/).
+
+See the [interactive demo of the effect](/shaft-demo/1/) and the [interactive demo of the solution using the cam-shaft](/shaft-demo2/1/).
+
+
+## Installation
+:::tip
+If you want to use the Cam-Shaft with an Astro project, see [astro-vtbot](https://events-3bg.pages.dev/library/CamShaft/) for reusable components you can easily use in your project.
+:::
+
+To use the Cam-Shaft, you can install the npm package in your project. Alternatively you can load the script from one of the global content delivery networks that provide npm packages.
+
+import { Tabs, TabItem } from "@astrojs/starlight/components";
+
+<Tabs>
+  <TabItem label="Using the npm package" icon="seti:npm">
+    <Steps>
+1. Install `@vtbag/cam-shaft@latest` from npm.
+2. In your project, add `@vtbag/cam-shaft/index.js` as an inline script at the beginning of the `<head>` element on all pages of your site.
+</Steps>
+
+Details depend on your project setup and the frameworks used, but it can be as simple as:
+
+```jsx
+import shaft from "@vtbag/cam-shaft?url";
+<html>
+  <head>
+    <script src={shaft} />
+    ...
+  </head>
+  ...
+</html>;
+```
+  </TabItem>
+  <TabItem label="Loading the script from a CDN" icon="cloudflare">
+
+You can load the script from CDNs such as jsdelivr.net or unpkg.com. Place the script inline at the beginning of the `<head>` element on all pages where you need avoid pseudo-smooth-scrolling.
+
+Using `jsdeliver.net`:
+
+```html
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/npm/@vtbag/cam-shaft" />
+    ...
+  </head>
+  ...
+</html>
+```
+
+or alternatively using `unpkg.com`:
+
+```html
+<html>
+  <head>
+    <script src="https://unpkg.com/@vtbag/cam-shaft" />
+    ...
+  </head>
+  ...
+</html>
+```
+  </TabItem>
+</Tabs>
+
+## Configuration and Usage
+
+
+The Cam-Shaft script needs to know which view transition name's images it should bump and nudge. By default, it assumes it should handle `::view-transition-group(main)`.
+
+If you need to target a different view transition name, you can use the `data-view-transition-names` attribute in the script tag. For example, the following will instruct the script to handle images for `::view-transition-group(content)`:
+
+```html
+<script src=... data-view-transition-names="content"/>
+```
+
+As you may have guessed from the plural form, you can specify multiple view transition names by separating them with spaces, allowing the script to manage several groups.
+
diff --git a/src/content/docs/tools/foo.html b/src/content/docs/tools/foo.html
new file mode 100644
index 0000000..5532944
--- /dev/null
+++ b/src/content/docs/tools/foo.html
@@ -0,0 +1,4 @@
+<svg width="300" height="300" viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+
+</svg>
\ No newline at end of file
diff --git a/src/content/docs/tools/inspection-chamber/index.mdx b/src/content/docs/tools/inspection-chamber/index.mdx
index e5196a6..2ecde1e 100644
--- a/src/content/docs/tools/inspection-chamber/index.mdx
+++ b/src/content/docs/tools/inspection-chamber/index.mdx
@@ -12,7 +12,7 @@ import { Steps } from "@astrojs/starlight/components";
 The Inspection Chamber allows you to examine the details of view transitions. It’s designed for use during development and supports both same-document and cross-document view transitions.
 
 Place your pages in the Inspection Chamber and put the view transitions through their paces.
-You can thoroughly examine each transition: play it in slow motion, examine timings step-by-step, disable transitions or highlight the pseudo elements &mdash; everything is easily achievable here.
+You can thoroughly examine each transition: play it in slow motion, examine timings and CSS values step-by-step, disable transitions or highlight the pseudo elements &mdash; everything is easily achievable here.
 
 </div>
 </div>
@@ -191,7 +191,7 @@ Extra: click the <kbd>new</kbd> and <kbd>old</kbd> buttons above the name list t
 
 ## Animation Panel
 
-Each of the pseudo-elements introduced by the view transition API may feature multiple animations, either automatically generated by the browser or defined using CSS. Here, you can see them all. Dive into the details or disable specific animations to understand how each one contributes to the overall effect.
+Each of the pseudo-elements introduced by the view transition API may feature multiple animations, either automatically generated by the View Transition API, defined by your CSS, or started via JavaScript on fulfillment of the `viewTransition.ready` promise. Here, you can see them all. Dive into the details or disable specific animations to understand how each one contributes to the overall effect.
 <div class="light:sl-hidden">
 ![Animation panel](dark-animation.png)
 </div><div class="dark:sl-hidden">
diff --git a/src/content/docs/tools/turn-signal.mdx b/src/content/docs/tools/turn-signal.mdx
index ee24465..c769304 100644
--- a/src/content/docs/tools/turn-signal.mdx
+++ b/src/content/docs/tools/turn-signal.mdx
@@ -126,22 +126,49 @@ There are no configuration options and the `forced-traversal` script does not ta
 
 ## Configuration and Usage
 
-`@vtbag/turn-signal` main script accepts several config options. Those are specified as data* attributes on the `<script>` element. They are all optional. If used without any parameters, the TTurn-Signal detects backwards history traversals and sets the `backward` view transition type for those. Navigation to the current page sets the `same` type. For all other navigation, the `forward` type is set.
+`@vtbag/turn-signal` main script accepts several config options. Those are specified as `data-*` attributes on the `<script>` element. They are all optional. If used without any parameters, the Turn-Signal detects backwards history traversals and sets the `backward` view transition type for those. Navigation to the current page sets the `same` type. For all other navigation, the `forward` type is set.
 
-You can use this to style different animations dependent on the direction of the navigation:
+You can use these view transition types to style different animations dependent on the direction of the navigation
 
+
+### CSS for Reverse Animation
+
+Chances are more often then not that you can not simply revert the direction of your animation for the `backward` effect. Assume you have `slideOutToLeft` for the old image and `slideInFromRight` for the new image.
 ```css
-::view-transition-old(root) {...}
-::view-transition-new(root) {...}
+  ::view-transition-old(main) {
+    animation-name: slideOutToLeft;
+  }
+  ::view-transition-new(main) {
+    animation-name: slideInFromRight;
+  }
 
-:active-view-transition-type(backward) {
-  &::view-transition-old(root),
-  &::view-transition-new(root) {
-    animation-direction: reverse;
+  @keyframes slideOutToLeft {
+    to {
+      transform: translateX(-100%);
+    }
   }
-}
+  @keyframes slideInFromRight {
+    from {
+      transform: translateX(100%);
+    }
+  }
+```
+Just changing the direction of the animations would lead to something best named `slideInFromLeft` for the old image and `slideOutToRight` for the new image. While the animations are about right, just setting `animation-direction: reverse` would apply them to the wrong images. You do not want to slide in the old image or slide out the new image. So better you swap the keyframes, too &hellip;
+```css
+  :active-view-transition-type(backward) {
+    &::view-transition-old(main) {
+      animation-name: slideInFromRight;
+      animation-direction: reverse;
+    }
+    &::view-transition-new(main) {
+      animation-name: slideOutToLeft;
+      animation-direction: reverse;
+    }
+  }  }
 ```
+&hellip; or even explicitly define keyframes for slideOutToRight and slideInFromLeft if you feel that is clearer.
 
+### Config Options
 |Config option|Type|Effect|
 |--|--|--|
 |data-selector|a CSS selector|<p>If your site has a concept of _previous_ and _next_ page, use this to tell the Turn-Signal about your pages and their order. One selector _to find them all_.</p><p>The selector should return one element per page of your site, and each element must have an href attribute. Typically, you would select `<a>` elements from your navigation bar, such as `data-selector="nav a"`.</p><p>If your site doesn't already have a suitable structure, consider generating a list of pages in a non-intrusive way. For example, you could use `<a>` elements inside a `<template>` element or `<link>` elements with a custom `rel` attribute.</p><p> The sequence of selected URLs is used to derive the navigation direction. Navigation to a page that comes later in the sequence of selected URLs will be a _forward_ navigation. Navigation to a page that comes earlier in the sequence of selected URLs will be a _backward_ navigation.</p>|
diff --git a/src/content/docs/vtbag.mdx b/src/content/docs/vtbag.mdx
index 30adb67..7eafcf8 100644
--- a/src/content/docs/vtbag.mdx
+++ b/src/content/docs/vtbag.mdx
@@ -5,9 +5,9 @@ description: What are those Bags of Tricks?
 
 @vtbag is a comprehensive suite of tools, tips, and tricks to make your experience with the View Transition API smoother and more efficient.
 
-You’re getting an early view at the site in its infancy, starting with the first tool in the suite: the [Inspection Chamber](/tools/inspection-chamber/), which now got company in form of the [Element-Crossing](/tools/element-crossing/).
+You’re getting an early view at this site with the first tools in the suite: the [Inspection Chamber](/tools/inspection-chamber/), the [Element-Crossing](/tools/element-crossing/) and the most recent addition, the [TurnSignal](/tools/turn-signal/).
 
-More tools are in the pipeline, and I’m eager to hear your feedback and learn what would be most valuable to you.
+More tools are in the pipeline, and I’m eager to hear your feedback and learn [what would be most valuable to you]().
 
 If you're new to view transitions, be sure to [check out the view transition examples](/basics/examples/) on this site to get started.
 
diff --git a/src/pages/cards/Shaft.astro b/src/pages/cards/Shaft.astro
new file mode 100644
index 0000000..1eadd37
--- /dev/null
+++ b/src/pages/cards/Shaft.astro
@@ -0,0 +1,77 @@
+---
+
+---
+
+<html lang="en" style="color-scheme:dark">
+  <head>
+    <title>Shaft</title>
+  </head>
+  <body>
+    <img width="640" src="/shaft.png" />
+    <h1>The Cam-Shaft</h1>
+    <h2>
+      Bump your<hr />
+      <span>::view-transition images</span><hr />into position to<br />
+       avoid that unexpected<br />pseudo-smooth-scrolling
+    </h2>
+  </body>
+</html>
+<style is:global>
+  :root,
+  body {
+    margin: 0;
+    padding: 0;
+    width: 1280px;
+    height: 640px;
+    overflow: hidden;
+    background: linear-gradient(
+      115deg,
+      #aaccff40 30%,
+      #4488ff20 40%,
+      #aaccff40 50%
+    );
+    background-size: 200% 100%;
+  }
+  img {
+    position: absolute;
+    display: block;
+    float: right;
+    transform: translateX(6vw);
+    mask-image: radial-gradient(ellipse at center, white 35%, transparent 71%);
+  }
+  h1 {
+    position: absolute;
+    text-shadow: #0002 0px 0px 5px;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 84px;
+    padding: 20px;
+    color: darkgoldenrod;
+    text-align: right;
+    text-wrap: balance;
+    transform: rotate(-90deg) translate(-200px, -250px);
+  }
+  h2 {
+    position: absolute;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 56px;
+    padding: 30px;
+    color: darkgoldenrod;
+    text-wrap: balance;
+    text-align: right;
+    transform: translate(520px, 20px);
+    color: goldenrod;
+    text-shadow: #0008 0px 0px 5px;
+  }
+
+  span {
+    color:white;
+  }
+  a {
+    text-decoration: none;
+    color: aqua;
+  }
+
+  @view-transition {
+    navigation: auto;
+  }
+</style>
diff --git a/src/pages/shaft-demo/1.astro b/src/pages/shaft-demo/1.astro
new file mode 100644
index 0000000..ac49eae
--- /dev/null
+++ b/src/pages/shaft-demo/1.astro
@@ -0,0 +1,9 @@
+---
+import Layout from "./_Layout.astro";
+import Description from "./_Description1.astro";
+---
+
+<Layout title="Pseudo-Smooth-Scrolling Demo 1/2 | @vtbag">
+  <h1>Pseudo-Smooth-Scrolling Demo 1/2</h1>
+  <Description />
+</Layout>
diff --git a/src/pages/shaft-demo/2.astro b/src/pages/shaft-demo/2.astro
new file mode 100644
index 0000000..05014d5
--- /dev/null
+++ b/src/pages/shaft-demo/2.astro
@@ -0,0 +1,9 @@
+---
+import Layout from "./_Layout.astro";
+import Description from "./_Description2.astro";
+---
+
+<Layout title="Pseud-Smooth-Scrolling Demo 2/2 | @vtbag">
+  <h1>Pseud-Smooth-Scrolling Demo 2/2</h1>
+  <Description />
+</Layout>
diff --git a/src/pages/shaft-demo/_Description1.astro b/src/pages/shaft-demo/_Description1.astro
new file mode 100644
index 0000000..c4d7d6f
--- /dev/null
+++ b/src/pages/shaft-demo/_Description1.astro
@@ -0,0 +1,212 @@
+---
+import fi from "../../assets/fi.png";
+import { Image } from "astro:assets";
+---
+
+<p class="desc">
+  These pages demonstrate the pseudo-smooth-scroll effect, commonly seen on websites
+  that use view transitions for elements larger than the viewport.
+</p>
+<p class="desc">This can give the website the appearance of dynamic movement, but it can also be quite disruptive if it occurs unexpectedly.</p>
+<Image id="fi" src={fi} alt="" />
+
+<p class="desc">
+  Use the navigation bar on the left to explore Steps 1 through 4 and learn more
+  about what causes this effect.
+</p>
+
+<p class="desc">
+  Take <a href="/shaft-demo/2/#bot">Step 1</a> to find out how to identify the pseudo-smooth-scroll effect
+  on a web-site.
+</p>
+
+<h2>Lorem Ipsum Text 1</h2>
+
+<p class="lorem">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
+  Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
+  nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+  tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget
+  nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia
+  nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at
+  dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc
+  egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
+  massa.
+</p>
+<p class="lorem">
+  Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus,
+  ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
+  velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis,
+  tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
+  Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
+  imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo
+  eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.
+</p>
+<p class="lorem">
+  Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus,
+  ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
+  velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis,
+  tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
+  Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
+  imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo
+  eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.
+</p>
+<p class="lorem">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
+  Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
+  nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+  tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget
+  nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia
+  nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at
+  dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc
+  egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
+  massa.
+</p><p class="lorem">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
+  Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
+  nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+  tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget
+  nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia
+  nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at
+  dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc
+  egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
+  massa.
+</p>
+<p class="lorem">
+  Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus,
+  ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
+  velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis,
+  tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
+  Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
+  imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo
+  eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.
+</p>
+<p class="lorem">
+  Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus,
+  ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
+  velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis,
+  tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
+  Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
+  imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo
+  eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.
+</p>
+<p class="lorem">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
+  Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
+  nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+  tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget
+  nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia
+  nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at
+  dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc
+  egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
+  massa.
+</p>
+
+<p id="bot" class="desc">
+  Disabling the group animation on the content element removes the
+  pseudo-smooth-scroll effect. But the result won't look good: Now, instead of
+  the current area of the old element, some other area is shown. The transition
+  group jumps directly to the position of the new image, and for the old image
+  shows what ever happens to be at that position in the old element.
+</p>
+
+<div id="outerouter">
+  <div id="outer">
+    <div id="dia">
+      <div>Page 1, step 0/4</div>
+      <div><br /><br /><br /><br /><br />Page 2, step 1</div>
+      <div>Page 2, step 2</div>
+      <div><br /><br /><br /><br /><br />Page 1, step 3</div>
+      <div>Page 1, step 0/4</div>
+    </div>
+    <div id="screen">Viewport</div>
+  </div>
+</div>
+<p class="desc">
+  So the old images jumps away from its current content, and even worse, the
+  position shown instead might be empty if the screen was not rendered
+  completely yet or while the snapshot of the old image was taken.
+</p>
+
+<p class="desc">
+  Take <a href="/shaft-demo/1/">Step 4</a> if you want to revisit this demo again, click the "Exit"
+  button in the header to exit the demo, or <a href="/shaft-demo2/1/">see the Cam-Shaft script in action</a> and how it removes the pseudo-smooth-scroll effect.
+</p>
+<style is:global>
+  #fi {
+    view-transition-name: fi;
+  }
+  #dia div {
+    height: 200px;
+  }
+
+  #outer {
+    height: 200px;
+    animation: none;
+  }
+  #outerouter {
+    margin-top: 0px;
+    animation: none;
+  }
+  #screen {
+    top: -200px;
+    animation: Vshift 5s infinite linear;
+  }
+
+  @keyframes Vshift {
+    0%,
+    24.99% {
+      transform: translateY(100px);
+    }
+    25%,
+    49.99% {
+      transform: translateY(0px);
+    }
+    50%,
+    74.99% {
+      transform: translateY(100px);
+    }
+    75%,
+    100% {
+      transform: translateY(0px);
+    }
+  }
+  @keyframes hshift {
+    0% {
+      transform: translateX(0px);
+    }
+    15% {
+      transform: translateX(-100px);
+    }
+    25% {
+      transform: translateX(-100px);
+    }
+    40% {
+      transform: translateX(-200px);
+    }
+    50% {
+      transform: translateX(-200px);
+    }
+    65% {
+      transform: translateX(-300px);
+    }
+    75% {
+      transform: translateX(-300px);
+    }
+    90% {
+      transform: translateX(-400px);
+    }
+    100% {
+      transform: translateX(-400px);
+    }
+  }
+
+</style>
diff --git a/src/pages/shaft-demo/_Description2.astro b/src/pages/shaft-demo/_Description2.astro
new file mode 100644
index 0000000..15ee567
--- /dev/null
+++ b/src/pages/shaft-demo/_Description2.astro
@@ -0,0 +1,243 @@
+---
+import fi from "../../assets/fi.png";
+import { Image } from "astro:assets";
+---
+
+<p class="desc">
+  At the start of the transition, the default morph animation positions the
+  transition group so that the old image shows the content visible before the
+  transition. As the transition progresses, the group's animation gradually
+  shifts the images, revealing the section of the new image that corresponds to
+  the final state after the transition. The sketch below illustrates the
+  pseudo-smooth-scroll effect.
+</p>
+
+<div id="container">
+  <div id="outerouter">
+    <div id="outer">
+      <div id="dia">
+        <div>Page 1, step 0/4</div>
+        <div><br /><br /><br /><br /><br />Page 2, step 1</div>
+        <div>Page 2, step 2</div>
+        <div><br /><br /><br /><br /><br />Page 1, step 3</div>
+        <div>Page 1, step 0/4</div>
+      </div>
+      <div id="screen">Viewport</div>
+    </div>
+  </div>
+
+  <div id="outerouter2">
+    <div id="outer2">
+      <div id="dia2">
+        <div>Page 1, step 0/4</div>
+        <div><br /><br /><br /><br /><br />Page 2, step 1</div>
+        <div>Page 2, step 2</div>
+        <div><br /><br /><br /><br /><br />Page 1, step 3</div>
+        <div>Page 1, step 0/4</div>
+      </div>
+      <div id="screen2">Viewport</div>
+    </div>
+  </div>
+</div>
+<style is:global>
+  #container {
+    display: flex;
+    max-width: 640px;
+    margin: 0px 10vw;
+    margin-top: 120px;
+    justify-content: space-around;
+  }
+  #outerouter {
+    width: fit-content;
+    transform: translateY(-60px)
+  }
+  #outerouter2 {
+    width: fit-content;
+    animation: vshift2 5s infinite linear;
+  }
+  @keyframes vshift2 {
+    10% {
+      transform: translateY(0px);
+    }
+    25% {
+      transform: translateY(-100px);
+    }
+    35% {
+      transform: translateY(-100px);
+    }
+    50% {
+      transform: translateY(0px);
+    }
+    60% {
+      transform: translateY(0px);
+    }
+    75% {
+      transform: translateY(-100px);
+    }
+    85% {
+      transform: translateY(-100px);
+    }
+    100% {
+      transform: translateY(0px);
+    }
+  }
+  #outer2 {
+    width: 100px;
+    height: 200px;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+  #dia2 {
+    display: flex;
+    width: 500px;
+    animation: hshift 5s infinite linear;
+  }
+  #screen2 {
+    position: relative;
+    z-index: 10;
+    top: -200px;
+    width: 100px;
+    height: 100px;
+    background-color: #fff8;
+    border: 3px solid #8888;
+    border-radius: 10px;
+    animation: vshift 5s infinite linear;
+    color: black;
+    padding-top: 3.5rem;
+    padding-left: 1em;
+  }
+  #dia2 div {
+    height: 200px;
+    width: 100px;
+    color: #222;
+    border: 1px solid #888;
+    padding: 1em 0.5rem;
+  }
+
+  #dia2 :is(div:nth-child(1), div:nth-child(5)) {
+    background: linear-gradient(180deg, #8fc 0%, #8fc 80%, red 100%);
+  }
+  #dia2 div:nth-child(2) {
+    background: linear-gradient(0deg, #8cf 0%, #8cf 80%, red 100%);
+  }
+  #dia2 div:nth-child(3) {
+    background: linear-gradient(180deg, #8cf 0%, #8cf 80%, red 100%);
+  }
+  #dia2 div:nth-child(4) {
+    background: linear-gradient(0deg, #8fc 0%, #8fc 80%, red 100%);
+  }
+</style>
+<p class="desc">
+  Instead of the scroll position sliding up and down the screen, it is the
+  viewport moving up and down the large pseudo-elments &ndash; or seen the other
+  way around: the large pseudo-elements move up and down in the viewport but the
+  scroll position only changes instantly once at the beginning of the transition, not continously during the transition.
+</p>
+
+<p class="desc">Take <a href="/shaft-demo/1/#bot">Step 3</a> to learn why just disabling the group animation isn't a good approach for getting rid of the pseudo-smooth-scroll effect.</p>
+
+<h2>Lorem Ipsum Text 2</h2>
+
+<p class="lorem">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
+  Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
+  nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+  tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget
+  nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia
+  nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at
+  dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc
+  egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
+  massa.
+</p>
+<p class="lorem">
+  Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus,
+  ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
+  velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis,
+  tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
+  Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
+  imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo
+  eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.
+</p>
+<p class="lorem">
+  Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus,
+  ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
+  velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis,
+  tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
+  Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
+  imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo
+  eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.
+</p>
+<p class="lorem">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
+  Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
+  nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+  tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget
+  nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia
+  nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at
+  dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc
+  egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
+  massa.
+</p><p class="lorem">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
+  Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
+  nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+  tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget
+  nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia
+  nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at
+  dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc
+  egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
+  massa.
+</p>
+<p class="lorem">
+  Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus,
+  ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
+  velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis,
+  tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
+  Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
+  imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo
+  eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.
+</p>
+<p class="lorem">
+  Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus,
+  ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
+  velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis,
+  tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
+  Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
+  imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo
+  eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.
+</p>
+<p class="lorem">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
+  Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
+  nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+  tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget
+  nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia
+  nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at
+  dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc
+  egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
+  massa.
+</p>
+<p id="bot" class="desc">
+  You can recognize the effect by observing the scrollbar. In a true smooth
+  scroll, the scrollbar glides to its new position. However, with the
+  pseudo-smooth-scroll effect from view transitions, the scrollbar jumps
+  instantly while the content slides.
+</p>
+
+<Image id="fi" src={fi} alt="" />
+
+<p class="desc">Take <a href="/shaft-demo/2/">Step 2</a> to find out what causes this effect.</p>
+
+<style is:global>
+  #fi {
+    transform: rotateY(180deg) translateX(-20vw);
+  }
+</style>
diff --git a/src/pages/shaft-demo/_Layout.astro b/src/pages/shaft-demo/_Layout.astro
new file mode 100644
index 0000000..b95670a
--- /dev/null
+++ b/src/pages/shaft-demo/_Layout.astro
@@ -0,0 +1,386 @@
+---
+import TurnSignal from "@vtbag/turn-signal?url";
+
+export interface Props {
+  title: string;
+}
+const { title } = Astro.props;
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>{title}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="/bag3.png" type="image/png" />
+    <script is:inline>
+      if ("onpagereveal" in window) {
+        addEventListener("pagereveal", () => {});
+      }
+    </script>
+    <script is:inline src={TurnSignal}></script>
+    <script is:inline>
+      if ("onpagereveal" in window) {
+        const _ = document.documentElement;
+        _.dataset.theme = _.style.colorScheme =
+          localStorage.getItem("starlight-theme") ||
+          (window.matchMedia("(prefers-color-scheme: dark)").matches
+            ? "dark"
+            : "light");
+        _.classList.add(_.dataset.theme);
+      }
+    </script>
+  </head>
+  <body>
+    <div style="height: 6.66rem"></div>
+    <main>
+      <slot />
+    </main>
+    <header>
+      <div>Header</div><a
+        href="/tips/pseudo-smooth-scrolling/#interactive-demo"
+        id="back">Exit</a
+      >
+      <button id="dl">Light/Dark</button>
+    </header>
+    <nav>
+      <a href="/shaft-demo/2/#bot">Step 1</a>
+      <a href="/shaft-demo/2/">Step 2</a>
+      <a href="/shaft-demo/1/#bot">Step 3</a>
+      <a href="/shaft-demo/1/">Step 4</a>
+      <br />
+      <a href="/shaft-demo2/1/">With<br />Cam-<br />Shaft</a>
+    </nav>
+    <footer>
+      <div>Footer</div>
+    </footer>
+  </body>
+  <script>
+    document.getElementById("dl")!.addEventListener("click", () => {
+      const root = document.documentElement;
+      root.classList.toggle("dark");
+      let theme = root.classList.contains("dark") ? "dark" : "light";
+      localStorage.setItem(
+        "starlight-theme",
+        (root.dataset.theme = root.style.colorScheme = theme)
+      );
+    });
+  </script>
+</html>
+<style is:global>
+  * {
+    box-sizing: border-box;
+  }
+  @view-transition {
+    navigation: auto;
+  }
+  main {
+    view-transition-name: main;
+  }
+  nav {
+    view-transition-name: nav;
+  }
+  header {
+    view-transition-name: header;
+  }
+  footer {
+    view-transition-name: footer;
+  }
+  ::view-transition-group(fi),
+  ::view-transition-group(main) {
+    animation-duration: 1s;
+  }
+
+  ::view-transition-old(main) {
+    animation-name: slideOut;
+  }
+  ::view-transition-new(main) {
+    animation-name: slideIn;
+  }
+
+  :active-view-transition-type(backward)::view-transition-old(main) {
+    animation-name: slideIn;
+    animation-direction: reverse;
+  }
+  :active-view-transition-type(backward)::view-transition-new(main) {
+    animation-name: slideOut;
+    animation-direction: reverse;
+  }
+
+  @keyframes slideOut {
+    to {
+      transform: translateX(-100%);
+    }
+  }
+  @keyframes slideIn {
+    from {
+      transform: translateX(100%);
+    }
+  }
+  #fi {
+    view-transition-name: fi;
+  }
+
+  :root {
+    font-family: sans-serif;
+    --background-color: #e0e0e0;
+    --accent-background-color: #e0f0e0;
+    --color: #444;
+    --accent-color: #070;
+    color: var(--color);
+    background-color: var(--background-color);
+    accent-color: var(--accent-color);
+  }
+  :root.dark {
+    --background-color: #222;
+    --accent-background-color: #333;
+    --color: #ddd;
+    --accent-color: #dfd;
+  }
+  footer,
+  header {
+    position: fixed;
+    width: 100%;
+    height: 6.66rem;
+    top: 0;
+    background-color: var(--background-color);
+    padding: 1rem;
+    display: flex;
+    justify-content: space-between;
+    background-color: #eeec;
+    backdrop-filter: blur(2px);
+  }
+
+  [data-theme="dark"] :is(footer, header) {
+    background-color: #111c;
+  }
+
+  footer {
+    top: unset;
+    height: 4rem;
+    bottom: 0;
+  }
+  button {
+    background-color: var(--accent-background-color);
+    accent-color: var(--accent-color);
+    color: var(--color);
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1rem;
+    margin: 1em;
+    padding: 0.5em 1em;
+    box-shadow: 0 4px 6px #8888;
+    cursor: pointer;
+  }
+  header div {
+    flex: 1 1 0%;
+  }
+  nav {
+    position: fixed;
+    top: 6.66rem;
+    background-color: var(--accent-background-color);
+    overflow: auto;
+  }
+  nav a {
+    display: block;
+    text-decoration: none;
+    padding: 0.5rem;
+  }
+  main {
+    scroll-padding-top: 6.66rem;
+    padding: 1rem;
+    padding-left: 80px;
+    overflow: auto;
+  }
+  #all {
+    max-width: 50rem;
+    margin: auto;
+  }
+  #mid {
+    display: flex;
+    height: 70vh;
+  }
+  #back {
+    display: inline-block;
+    color: black;
+    border-radius: 8px;
+    padding: 1rem;
+    margin: 1rem;
+    background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
+    box-shadow: 0 4px 6px #8888;
+  }
+  #dark,
+  #light {
+    display: none;
+  }
+  :root.dark #dark,
+  :root:not(.dark) #light {
+    display: inline;
+  }
+  p.lorem,
+  p.desc {
+    line-height: 2;
+    font-size: 1.2rem;
+    max-width: 640px;
+    margin: 40px 10vw;
+  }
+  p.desc {
+    color: var(--accent-color);
+    line-height: 1.8rem;
+  }
+  #outerouter {
+    max-width: 640px;
+    margin: 0 10vw;
+    margin-top: 0;
+  }
+  #container #outerouter {
+    margin: 0;
+  }
+
+  #outer {
+    width: 100px;
+    height: 200px;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+  #dia {
+    display: flex;
+    width: 500px;
+    animation: hshift 5s infinite linear;
+  }
+  #screen {
+    position: relative;
+    z-index: 10;
+    top: -200px;
+    width: 100px;
+    height: 100px;
+    background-color: #fff8;
+    border: 3px solid #8888;
+    border-radius: 10px;
+    animation: vshift 5s infinite linear;
+    color: black;
+    padding-top: 3.5rem;
+    padding-left: 1em;
+  }
+  #dia div {
+    height: 200px;
+    width: 100px;
+    color: #222;
+    border: 1px solid #888;
+    padding: 1em 0.5rem;
+  }
+
+  #dia :is(div:nth-child(1), div:nth-child(5)) {
+    background: linear-gradient(180deg, #8fc 0%, #8fc 80%, red 100%);
+  }
+  #dia div:nth-child(2) {
+    background: linear-gradient(0deg, #8cf 0%, #8cf 80%, red 100%);
+  }
+  #dia div:nth-child(3) {
+    background: linear-gradient(180deg, #8cf 0%, #8cf 80%, red 100%);
+  }
+  #dia div:nth-child(4) {
+    background: linear-gradient(0deg, #8fc 0%, #8fc 80%, red 100%);
+  }
+
+  @keyframes hshift {
+    10% {
+      transform: translateX(0px);
+    }
+    25% {
+      transform: translateX(-100px);
+    }
+    35% {
+      transform: translateX(-100px);
+    }
+    50% {
+      transform: translateX(-200px);
+    }
+    60% {
+      transform: translateX(-200px);
+    }
+    75% {
+      transform: translateX(-300px);
+    }
+    85% {
+      transform: translateX(-300px);
+    }
+    100% {
+      transform: translateX(-400px);
+    }
+  }
+  @keyframes vshift {
+    10% {
+      transform: translateY(0px);
+    }
+    25% {
+      transform: translateY(100px);
+    }
+    35% {
+      transform: translateY(100px);
+    }
+    50% {
+      transform: translateY(0px);
+    }
+    60% {
+      transform: translateY(0px);
+    }
+    75% {
+      transform: translateY(100px);
+    }
+    85% {
+      transform: translateY(100px);
+    }
+    100% {
+      transform: translateY(0px);
+    }
+  }
+  @keyframes oVshift {
+    10% {
+      transform: translateY(0px);
+    }
+    25% {
+      transform: translateY(-100px);
+    }
+    35% {
+      transform: translateY(-100px);
+    }
+    50% {
+      transform: translateY(0px);
+    }
+    60% {
+      transform: translateY(0px);
+    }
+    75% {
+      transform: translateY(-100px);
+    }
+    85% {
+      transform: translateY(-100px);
+    }
+    100% {
+      transform: translateY(0px);
+    }
+  }
+  @keyframes Vshift {
+    0%,
+    24.99% {
+      transform: translateY(-100px);
+    }
+    25%,
+    49.99% {
+      transform: translateY(0px);
+    }
+    50%,
+    74.99% {
+      transform: translateY(-100px);
+    }
+    75%,
+    100% {
+      transform: translateY(0px);
+    }
+  }
+  #bot {
+    scroll-margin-top: 6.66rem;
+  }
+</style>
diff --git a/src/pages/shaft-demo2/1.astro b/src/pages/shaft-demo2/1.astro
new file mode 100644
index 0000000..18a241b
--- /dev/null
+++ b/src/pages/shaft-demo2/1.astro
@@ -0,0 +1,9 @@
+---
+import Layout from "./_Layout.astro";
+import Description from "./_Description1.astro";
+---
+
+<Layout title="Cam-Shaft Demo 1/2 | @vtbag">
+  <h1>Cam-Shaft Demo 1/2</h1>
+  <Description />
+</Layout>
diff --git a/src/pages/shaft-demo2/2.astro b/src/pages/shaft-demo2/2.astro
new file mode 100644
index 0000000..a3aa77b
--- /dev/null
+++ b/src/pages/shaft-demo2/2.astro
@@ -0,0 +1,9 @@
+---
+import Layout from "./_Layout.astro";
+import Description from "./_Description2.astro";
+---
+
+<Layout title="Cam-Shaft Demo 2/2 | @vtbag">
+  <h1>Cam-Shaft Demo 2/2</h1>
+  <Description />
+</Layout>
diff --git a/src/pages/shaft-demo2/_Description1.astro b/src/pages/shaft-demo2/_Description1.astro
new file mode 100644
index 0000000..c168223
--- /dev/null
+++ b/src/pages/shaft-demo2/_Description1.astro
@@ -0,0 +1,138 @@
+---
+import fi from "../../assets/fi.png";
+import { Image } from "astro:assets";
+---
+
+<p class="desc">
+  Cross-document view transitions that change the current vertical scroll position tend to show a <a href="/shaft-demo/1/">pseudo-smooth-scrolling</a> effect with <a href="/basics/pseudos/">pseudo-elements</a> that are taller than the viewport.
+</p>
+
+<p class="desc">
+  <b>Not so with the Cam-Shaft</b>: Even though the vertical scroll position changes while you navigate through the steps in the navigation bar, you will only notice the horizontal sliding effect, no vertical scrolling.
+</p>
+
+<p class="desc">Take <a href="/shaft-demo2/2/#bot">Step 1</a> to see why the Cam-Shaft is called Cam-Shaft.</p>
+
+<h2>Lorem Ipsum Text 1</h2>
+
+<p class="lorem">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
+  Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
+  nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+  tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget
+  nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia
+  nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at
+  dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc
+  egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
+  massa.
+</p>
+<p class="lorem">
+  Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus,
+  ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
+  velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis,
+  tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
+  Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
+  imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo
+  eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.
+</p>
+<p class="lorem">
+  Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus,
+  ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
+  velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis,
+  tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
+  Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
+  imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo
+  eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.
+</p>
+<p class="lorem">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
+  Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
+  nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+  tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget
+  nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia
+  nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at
+  dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc
+  egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
+  massa.
+</p><p class="lorem">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
+  Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
+  nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+  tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget
+  nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia
+  nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at
+  dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc
+  egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
+  massa.
+</p>
+<p class="lorem">
+  Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus,
+  ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
+  velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis,
+  tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
+  Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
+  imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo
+  eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.
+</p>
+<p class="lorem">
+  Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus,
+  ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
+  velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis,
+  tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
+  Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
+  imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo
+  eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.
+</p>
+<p class="lorem">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
+  Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
+  nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+  tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget
+  nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia
+  nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at
+  dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc
+  egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
+  massa.
+</p>
+<p class="desc" id="bot">The animation below might give you a clue as to how the script got its name.
+</p>
+
+<div id="outerouter">
+  <div id="outer">
+    <div id="dia">
+      <div>Page 1, step 0/4</div>
+      <div><br /><br /><br /><br /><br />Page 2, step 1</div>
+      <div>Page 2, step 2</div>
+      <div><br /><br /><br /><br /><br />Page 1, step 3</div>
+      <div>Page 1, step 0/4</div>
+      <div><br /><br /><br /><br /><br />Page 2, step 1</div>
+      <div>Page 2, step 2</div>
+      <div><br /><br /><br /><br /><br />Page 1, step 3</div>
+      <div>Page 1, step 0/4</div>
+      <div><br /><br /><br /><br /><br />Page 2, step 1</div>
+      <div>Page 2, step 2</div>
+      <div><br /><br /><br /><br /><br />Page 1, step 3</div>
+    </div>
+    <div id="screen">Viewport</div>
+  </div>
+</div>
+
+<style is:global>
+  #outer{width:400px;}
+</style>
+<Image id="fi" src={fi} alt="" />
+
+<p class="desc">
+  Take <a href="/shaft-demo2/1/">Step 4</a> to retrun to the beginning of this demo or click the "Exit"
+  button in the header to exit the demo.
+</p>
+
+
diff --git a/src/pages/shaft-demo2/_Description2.astro b/src/pages/shaft-demo2/_Description2.astro
new file mode 100644
index 0000000..cd2fe88
--- /dev/null
+++ b/src/pages/shaft-demo2/_Description2.astro
@@ -0,0 +1,138 @@
+---
+import fi from "../../assets/fi.png";
+import { Image } from "astro:assets";
+---
+
+<p class="desc">
+  Why is this thing called <i>Camshaft</i>? Take <a href="/shaft-demo2/1/#bot">Step 3</a> to find out after another sliding transition without
+  pseudo-smooth-scrolling.
+</p>
+<Image id="fi" src={fi} alt="" />
+
+<h2>Lorem Ipsum Text 2</h2>
+
+<p class="lorem">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
+  Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
+  nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+  tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget
+  nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia
+  nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at
+  dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc
+  egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
+  massa.
+</p>
+<p class="lorem">
+  Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus,
+  ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
+  velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis,
+  tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
+  Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
+  imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo
+  eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.
+</p>
+<p class="lorem">
+  Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus,
+  ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
+  velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis,
+  tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
+  Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
+  imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo
+  eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.
+</p>
+<p class="lorem">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
+  Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
+  nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+  tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget
+  nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia
+  nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at
+  dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc
+  egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
+  massa.
+</p><p class="lorem">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
+  Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
+  nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+  tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget
+  nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia
+  nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at
+  dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc
+  egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
+  massa.
+</p>
+<p class="lorem">
+  Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus,
+  ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
+  velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis,
+  tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
+  Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
+  imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo
+  eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.
+</p>
+<p class="lorem">
+  Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus,
+  ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
+  velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis,
+  tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
+  Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
+  imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo
+  eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.
+</p>
+<p class="lorem">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
+  Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
+  nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+  tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget
+  nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia
+  nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at
+  dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc
+  egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
+  massa.
+</p>
+<p id="bot" class="desc">This is the effect with the Cam-Shaft:</p>
+
+<div id="outerouter">
+  <div id="outer">
+    <div id="dia">
+      <div>Page 1, step 0/4</div>
+      <div><br /><br /><br /><br /><br />Page 2, step 1</div>
+      <div>Page 2, step 2</div>
+      <div><br /><br /><br /><br /><br />Page 1, step 3</div>
+      <div>Page 1, step 0/4</div>
+      <div><br /><br /><br /><br /><br />Page 2, step 1</div>
+      <div>Page 2, step 2</div>
+      <div><br /><br /><br /><br /><br />Page 1, step 3</div>
+      <div>Page 1, step 0/4</div>
+      <div><br /><br /><br /><br /><br />Page 2, step 1</div>
+      <div>Page 2, step 2</div>
+      <div><br /><br /><br /><br /><br />Page 1, step 3</div>
+    </div>
+    <div id="screen">Viewport</div>
+  </div>
+</div>
+<p class="desc">
+  The Cam-Shaft adjusts the vertical alignment between the old and new images
+  within the transition group. Instead of aligning the tops of the images, it
+  shifts the images so that the current content of the old image aligns with the
+  future position of the new image.
+</p>
+
+<p class="desc">
+  Take <a href="/shaft-demo2/2/">Step 2</a> to enjoy the sliding transition without
+  pseudo-smooth-scrolling.
+</p>
+
+<style is:global>
+  #fi {
+    transform: rotateY(180deg) translateX(-20vw);
+  }
+</style>
diff --git a/src/pages/shaft-demo2/_Layout.astro b/src/pages/shaft-demo2/_Layout.astro
new file mode 100644
index 0000000..fed84dc
--- /dev/null
+++ b/src/pages/shaft-demo2/_Layout.astro
@@ -0,0 +1,313 @@
+---
+import CamShaft from "@vtbag/cam-shaft?url";
+import TurnSignal from "@vtbag/turn-signal?url";
+export interface Props {
+  title: string;
+}
+const { title } = Astro.props;
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>{title}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="/bag3.png" type="image/png" />
+
+    <script is:inline src={CamShaft} data-view-transition-names="main"></script>
+    <script is:inline src={TurnSignal}></script>
+
+    <script is:inline>
+      if ("onpagereveal" in window) {
+        const _ = document.documentElement;
+        _.dataset.theme = _.style.colorScheme =
+          localStorage.getItem("starlight-theme") ||
+          (window.matchMedia("(prefers-color-scheme: dark)").matches
+            ? "dark"
+            : "light");
+        _.classList.add(_.dataset.theme);
+      }
+    </script>
+  </head>
+  <body>
+    <div style="height: 6.66rem"></div>
+    <main>
+      <slot />
+    </main>
+    <header>
+      <div>Header</div><a href="/tools/cam-shaft/#what-is-it" id="back">Exit</a>
+      <button id="dl">Light/Dark</button>
+    </header>
+    <nav>
+      <a href="/shaft-demo2/2/#bot">Step 1</a>
+      <a href="/shaft-demo2/2/">Step 2</a>
+      <a href="/shaft-demo2/1/#bot">Step 3</a>
+      <a href="/shaft-demo2/1/">Step 4</a>
+      <br />
+      <a href="/shaft-demo/1/">With-<br />out<br />Cam-<br />Shaft</a>
+    </nav>
+    <footer>
+      <div>Footer</div>
+    </footer>
+  </body>
+  <script>
+    document.getElementById("dl")!.addEventListener("click", () => {
+      const root = document.documentElement;
+      root.classList.toggle("dark");
+      let theme = root.classList.contains("dark") ? "dark" : "light";
+      localStorage.setItem(
+        "starlight-theme",
+        (root.dataset.theme = root.style.colorScheme = theme)
+      );
+    });
+  </script>
+</html>
+
+<style is:global>
+  * {
+    box-sizing: border-box;
+  }
+  @view-transition {
+    navigation: auto;
+  }
+  main {
+    view-transition-name: main;
+  }
+  nav {
+    view-transition-name: nav;
+  }
+  header {
+    view-transition-name: header;
+  }
+  footer {
+    view-transition-name: footer;
+  }
+
+  ::view-transition-group(fi),
+  ::view-transition-group(main) {
+    animation-duration: 1s;
+  }
+
+  ::view-transition-old(main) {
+    animation-name: slideOut;
+  }
+  ::view-transition-new(main) {
+    animation-name: slideIn;
+  }
+
+  :active-view-transition-type(backward) {
+    &::view-transition-old(main) {
+      animation-direction: reverse;
+      animation-name: slideIn;
+    }
+    &::view-transition-new(main) {
+      animation-name: slideOut;
+      animation-direction: reverse;
+    }
+  }
+
+  @keyframes slideOut {
+    to {
+      transform: translateX(-100%);
+    }
+  }
+  @keyframes slideIn {
+    from {
+      transform: translateX(100%);
+    }
+  }
+  :root {
+    font-family: sans-serif;
+    --background-color: #e0e0e0;
+    --accent-background-color: #e0f0e0;
+    --color: #444;
+    --accent-color: #070;
+    color: var(--color);
+    background-color: var(--background-color);
+    accent-color: var(--accent-color);
+  }
+  :root.dark {
+    --background-color: #222;
+    --accent-background-color: #333;
+    --color: #ddd;
+    --accent-color: #dfd;
+  }
+  footer,
+  header {
+    position: fixed;
+    width: 100%;
+    height: 6.66rem;
+    top: 0;
+    background-color: var(--background-color);
+    padding: 1rem;
+    display: flex;
+    justify-content: space-between;
+    background-color: #eeec;
+    backdrop-filter: blur(2px);
+  }
+
+  [data-theme="dark"] :is(footer, header) {
+    background-color: #111c;
+  }
+
+  footer {
+    top: unset;
+    height: 4rem;
+    bottom: 0;
+  }
+  button {
+    background-color: var(--accent-background-color);
+    accent-color: var(--accent-color);
+    color: var(--color);
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1rem;
+    margin: 1em;
+    padding: 0.5em 1em;
+    box-shadow: 0 4px 6px #8888;
+    cursor: pointer;
+  }
+  header div {
+    flex: 1 1 0%;
+  }
+  nav {
+    position: fixed;
+    top: 6.66rem;
+    background-color: var(--accent-background-color);
+    overflow: auto;
+  }
+  nav a {
+    display: block;
+    text-decoration: none;
+    padding: 0.5rem;
+  }
+  main {
+    scroll-padding-top: 6.66rem;
+    padding: 1rem;
+    padding-left: 80px;
+    overflow: auto;
+  }
+  #all {
+    max-width: 50rem;
+    margin: auto;
+  }
+  #mid {
+    display: flex;
+    height: 70vh;
+  }
+  #back {
+    display: inline-block;
+    color: black;
+    border-radius: 8px;
+    padding: 1rem;
+    margin: 1rem;
+    background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
+    box-shadow: 0 4px 6px #8888;
+  }
+  #dark,
+  #light {
+    display: none;
+  }
+  :root.dark #dark,
+  :root:not(.dark) #light {
+    display: inline;
+  }
+  p.lorem,
+  p.desc {
+    line-height: 2;
+    font-size: 1.2rem;
+    max-width: 640px;
+    margin: 40px 10vw;
+  }
+  p.desc {
+    color: var(--accent-color);
+    line-height: 1.8rem;
+  }
+  #outerouter {
+    max-width: 640px;
+    margin: 0 10vw;
+    margin-top: 0;
+  }
+  #outer {
+    margin: 0 auto;
+    overflow: hidden;
+    animation: none;
+    height: 300px;
+    width: 100px;
+  }
+  #dia {
+    display: flex;
+    width: 1200px;
+    animation: hshift 5s infinite linear;
+  }
+  #screen {
+    position: relative;
+    z-index: 10;
+    width: 100px;
+    height: 100px;
+    background-color: #fff8;
+    border: 3px solid #8888;
+    border-radius: 10px;
+    color: black;
+    padding-top: 3.5rem;
+    padding-left: 1em;
+    top: -100px;
+    animation: none;
+  }
+  #dia div {
+    height: 200px;
+    width: 100px;
+    background: #8fc;
+    color: #222;
+    border: 1px solid #888;
+    padding: 1em 0.5rem;
+  }
+  #dia :is(div:nth-child(1), div:nth-child(5), div:nth-child(9)) {
+    background: linear-gradient(180deg, #8fc 0%, #8fc 80%, red 100%);
+  }
+  #dia :is(div:nth-child(2), div:nth-child(6), div:nth-child(10)) {
+    background: linear-gradient(0deg, #8cf 0%, #8cf 80%, red 100%);
+  }
+  #dia :is(div:nth-child(3), div:nth-child(7), div:nth-child(11)) {
+    background: linear-gradient(180deg, #8cf 0%, #8cf 80%, red 100%);
+  }
+  #dia :is(div:nth-child(4), div:nth-child(8), div:nth-child(12)) {
+    background: linear-gradient(0deg, #8fc 0%, #8fc 80%, red 100%);
+  }
+  @keyframes hshift {
+    0% {
+      transform: translateX(-400px);
+    }
+    15%,
+    25% {
+      transform: translateX(-500px);
+    }
+    40%,
+    50% {
+      transform: translateX(-600px);
+    }
+    65%,
+    75% {
+      transform: translateX(-700px);
+    }
+    90%,
+    100% {
+      transform: translateX(-800px);
+    }
+  }
+  #fi {
+    view-transition-name: fi;
+  }
+  #dia div:nth-child(1),
+  #dia div:nth-child(3),
+  #dia div:nth-child(5),
+  #dia div:nth-child(7),
+  #dia div:nth-child(9),
+  #dia div:nth-child(11) {
+    transform: translateY(100px);
+  }
+  #bot {
+    scroll-margin-top: 6.66rem;
+  }
+</style>
diff --git a/src/styles/custom.css b/src/styles/custom.css
index fa3b599..e3704ec 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -115,7 +115,7 @@ a.data-footnote-backref {
 .sl-markdown-content code:not(:where(.not-content *)) {
   background-color: #8883;
   padding: 0 0;
-  font-size: 11pt;
+  font-size: var(--sl-text-code);
 }
 
 nav ::-webkit-scrollbar {