Make the cockpit the homepage: rocket entrance, flight, and galaxy arrival

build/guides.mjs

@@ -1150,7 +1150,7 @@ const guides = [
     body: `
       <p class="sc-guide-intro">Self custody means one specific thing: the secret that authorises spending your bitcoin exists only where you put it. No company holds a copy &mdash; which is why no company can freeze it, lose it in a bankruptcy, or hand it over on request, and why nobody can help you if you destroy it. Both halves of that sentence are the job.</p>
 
-      <p>This is the foundation article for everything else on this site. It assumes nothing except that you have bought some bitcoin, or are about to. It is longer than a checklist because a checklist is easy to follow, and easy to follow into a hole &mdash; the reasoning underneath each step is what tells you what to do when the screen in front of you does not match the instructions.</p>
+      <p id="cloud-fade-anchor">This is the foundation article for everything else on this site. It assumes nothing except that you have bought some bitcoin, or are about to. It is longer than a checklist because a checklist is easy to follow, and easy to follow into a hole &mdash; the reasoning underneath each step is what tells you what to do when the screen in front of you does not match the instructions.</p>
 
       <p>There is a version of this that takes an afternoon and a version that takes six months. The difference is not intelligence or technical skill. It is whether you moved money before you understood what you were doing with it.</p>
 

build/render.mjs

@@ -76,6 +76,7 @@ const toLF = text => text.replace(/\r\n/g, '\n');
    dashboard markup wrapped with block-probe.js. */
 const FILES = {
   'index.html': 'home',
+  'launch.html': 'launch',
   'guides.html': 'guides',
   'glossary.html': 'glossary',
   'devices.html': 'devices',
@@ -114,11 +115,41 @@ const VERSIONED_ASSETS = [
   'docs/assets/css/style.css',
   'docs/assets/css/site-refresh.css',
   'docs/assets/js/site-refresh.js',
+  /* The journey's own assets. Without them in the digest the ?v= they carry
+     never moves, so an edit to the cockpit or the arrival reaches nobody who
+     already holds the old copy -- which is exactly what happened while this was
+     being built: a corrected stylesheet sat on disk while the browser went on
+     using its cached one, and the fix looked broken. */
+  'docs/assets/css/cockpit-journey.css',
+  'docs/assets/css/cutscenes-toggle.css',
+  'docs/assets/css/quickstart-galaxy-arrival.css',
+  'docs/assets/css/quickstart-galaxy-hero.css',
+  'docs/assets/css/launch-hero.css',
+  'docs/assets/js/cockpit-journey.js',
+  'docs/assets/js/cockpit-menu-orbit.js',
+  'docs/assets/js/cutscenes-toggle.js',
+  'docs/assets/js/home-entrance.js',
+  'docs/assets/js/launch-sequence.js',
+  'docs/assets/js/quickstart-galaxy-hero.js',
+  'docs/assets/js/quickstart-opening-scene.js',
+  /* The cockpit scene's own stylesheets. These carried hand-written versions
+     -- v=17, v=sun-finisher-2 -- frozen at whatever each was when last edited,
+     so a change to any of them reached nobody already holding the old copy. */
+  'docs/assets/css/cockpit-blink.css',
+  'docs/assets/css/cockpit-directory.css',
+  'docs/assets/css/cockpit-flight.css',
+  'docs/assets/css/cockpit-hub-directory.css',
+  'docs/assets/css/cockpit-hub.css',
+  'docs/assets/css/cockpit-launch-arrival.css',
+  'docs/assets/css/cockpit-navigation.css',
+  'docs/assets/css/cockpit-shell.css',
+  'docs/assets/css/cockpit-hover.css',
+  'docs/assets/js/cockpit-scene.js',
 ];
 
 const ASSET_VERSION = assetDigest(VERSIONED_ASSETS);
 
-const ASSET_QUERY = /(assets\/(?:vendor\/bootstrap-icons\/bootstrap-icons\.css|css\/(?:style|site-refresh)\.css|js\/site-refresh\.js)\?v=)[^"']+/g;
+const ASSET_QUERY = /(assets\/(?:vendor\/bootstrap-icons\/bootstrap-icons\.css|css\/(?:style|site-refresh|cockpit-journey|cutscenes-toggle|quickstart-galaxy-arrival|quickstart-galaxy-hero|launch-hero|cockpit-blink|cockpit-directory|cockpit-flight|cockpit-hub-directory|cockpit-hub|cockpit-launch-arrival|cockpit-navigation|cockpit-shell|cockpit-hover)\.css|js\/(?:site-refresh|cockpit-journey|cockpit-menu-orbit|cutscenes-toggle|home-entrance|launch-sequence|quickstart-galaxy-hero|quickstart-opening-scene|cockpit-scene)\.js)\?v=)[^"']+/g;
 
 /* The whole container block, anchored on the <noscript> that always follows it.
    A non-greedy match on </div> would work on the empty shell but not on an
@@ -193,6 +224,20 @@ for (const [file, key] of Object.entries(FILES)) {
   }
   console.log(`  ${file.padEnd(16)} ${Math.round(out.length / 1024)} KB`);
 }
+/* cockpit-scene.html carries no shell -- the journey frames it, so it has no
+   header or footer of its own and is not in FILES. It does reference versioned
+   assets, and nothing rewrote them, so its ?v= sat frozen at whatever was typed
+   by hand. Stamp it here rather than giving it a shell it does not want. */
+for (const bare of ['docs/cockpit-scene.html']) {
+  if (!existsSync(bare)) continue;
+  const before = readFileSync(bare, 'utf8');
+  const after = before.replace(ASSET_QUERY, `$1${ASSET_VERSION}`);
+  if (after !== before) {
+    writeFileSync(bare, after);
+    console.log(`  ${bare.replace('docs/', '').padEnd(16)} asset versions stamped`);
+  }
+}
+
 console.log(`\n${changed} file(s) written`);
 
 /* ---- guide pages --------------------------------------------------------
@@ -295,14 +340,55 @@ if (dupes.length) {
 if (existsSync('docs/guides')) rmSync('docs/guides', { recursive: true });
 mkdirSync('docs/guides', { recursive: true });
 
+/* The Quickstart guide is where the cockpit's flight lands, so it carries the
+   galaxy arrival: a nebula behind the title, the staggered reveal of the
+   heading and opening lines, and a control to watch it again.
+
+   It is on the guide itself rather than injected by the journey, for two
+   reasons. The reveal has to survive Cutscenes being off -- that switch turns
+   off travel, not the arrival -- and the guide has to look the same reached
+   directly from a search result as it does at the end of a flight. The journey
+   still injects its own arrival stylesheet on top of this for the blend out of
+   the video; that part genuinely belongs to the transition, not the page. */
+const GALAXY_GUIDE = 'quickstart';
+
 for (const guide of publishedGuides) {
-  const html = `${guideHead(guide)}
-<body class="site-refresh" data-page="guides">
+  const galaxy = guide.slug === GALAXY_GUIDE;
+  /* The cutscenes switch travels with the guide. Someone who reaches it
+     directly, rather than by flying there, still needs the same control in the
+     same place -- and it reads the same saved preference, so the state they set
+     on the homepage is the state they find here. */
+  /* Arrival stylesheet first, hero second: the hero sheet carries the overrides
+     that undo the parts of the arrival written for life inside the journey's
+     iframe, and they have to come after what they are overriding. */
+  const galaxyHead = galaxy
+    ? `
+  <link href="../assets/css/quickstart-galaxy-arrival.css?v=${ASSET_VERSION}" rel="stylesheet">`
+      + `
+  <link href="../assets/css/quickstart-galaxy-hero.css?v=${ASSET_VERSION}" rel="stylesheet">`
+      + `
+  <link href="../assets/css/cutscenes-toggle.css?v=${ASSET_VERSION}" rel="stylesheet">`
+    : '';
+  /* After site-refresh.js, and the hero script after both: it expects the
+     replay button and the fade anchor to already be in the document. */
+  const galaxyBody = galaxy
+    ? `
+  <button class="galaxy-replay" type="button">Replay arrival</button>`
+      + `
+  <div class="galaxy-arrival-shade" aria-hidden="true"></div>`
+      + `
+  <script src="../assets/js/quickstart-galaxy-hero.js?v=${ASSET_VERSION}"></script>`
+      + `
+  <script src="../assets/js/cutscenes-toggle.js?v=${ASSET_VERSION}"></script>`
+    : '';
+  const html = `${guideHead(guide).replace('</head>', `${galaxyHead}
+</head>`)}
+<body class="site-refresh" data-page="guides"${galaxy ? ' data-arrival="galaxy"' : ''}>
   <div id="site-header">${renderHeader('guides', '../')}</div>
     <main id="main-content">${renderGuideBody(guide)}</main>
     <div id="site-footer">${renderFooter('../')}</div>
   ${noscriptFor('guides', '../')}
-  <script src="../assets/js/site-refresh.js?v=${ASSET_VERSION}"></script>
+  <script src="../assets/js/site-refresh.js?v=${ASSET_VERSION}"></script>${galaxyBody}
 </body>
 </html>
 `;

docs/assets/css/cockpit-blink.css

@@ -0,0 +1,4 @@
+.flight-controls{z-index:100030}
+.rocket-jump-blink{position:absolute;width:28px;height:5px;border-radius:50%;pointer-events:none;opacity:0;background:#fff7df;box-shadow:0 0 8px 2px #ffd18c,0 0 21px 6px #fba34088;transform-origin:center}
+.rocket-jump-blink::after{content:'';position:absolute;width:3px;height:19px;left:12px;top:-7px;border-radius:50%;background:#fff6e5;box-shadow:0 0 7px #ffbf67}
+.flight-study .warp-follow-rocket .flight-exhaust{height:72%}