Source Vault gate: smaller viewfinder card over the digital rain (S5 + C3)

CHANGELOG.md

@@ -12,6 +12,7 @@ The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and
 
 ### Changed
 
+- Source Vault gate: the ACCESS REQUIRED card is much smaller (270 px: tag, one-line title, and the key field with a → button) and has no box, just four viewfinder corner ticks with the rain fading to dark behind it. The site's digital rain now runs behind it, streaming only public words (track titles and stem types) until the key is in.
 - Source Vault player: the dock now matches the site's player (borderless ▶ key, « » skips, title and chapter lines, the black bar), and the playing track's real waveform is the seek bar, with the times under it. The right-hand slot shows the tempo, key and Camelot code and opens a queue of all 20 files with their BPM; on phones it folds up like the site's dock.
 - End credits: the GitHub mark beside VIEW PROJECT → GITHUB now carries the magenta → cyan gradient, matching the GitHub mark in the footer bar.
 - README: new catalogue screenshot showing the Hyperpop · Metalcore · Glitchcore tags.

src/vault/main.js

@@ -5,6 +5,7 @@ import "../styles/index.css";
 import "../styles/overrides.css";
 import "./vault.css";
 import { audioSrc } from "../lib/audioSrc";
+import { CHAPTERS as SITE_CHAPTERS } from "../data/chapters";
 
 const $ = (s, el = document) => el.querySelector(s),
   $$ = (s, el = document) => [...el.querySelectorAll(s)];
@@ -187,6 +188,7 @@ function reveal() {
   if (revealed) return;
   revealed = true;
   $("#gate").classList.add("out");
+  stopGateRain();
   document.body.classList.remove("locked");
   $("#vault").hidden = false;
   $("#snav").hidden = false;
@@ -300,6 +302,29 @@ function vaultRain(cv, words) {
     },
   };
 }
+// The gate's rain: only public words before the key is in (the site's track titles and the stem types).
+const GATE_WORDS = [
+  ...SITE_CHAPTERS.flatMap((c) => c.tracks.map((t) => t.title)),
+  ...["VOCALS", "BACKING_VOCALS", "DRUMS", "BASS", "SYNTH", "GUITAR", "KEYBOARD", "STRINGS", "BRASS", "FX"],
+];
+let gateRain = null;
+function startGateRain() {
+  if (REDUCE) return;
+  gateRain?.stop();
+  gateRain = vaultRain($("#gateRain"), GATE_WORDS);
+}
+function stopGateRain() {
+  const r = gateRain;
+  gateRain = null;
+  if (r) setTimeout(() => r.stop(), 400); // after the gate's fade
+}
+startGateRain();
+let resizeT = 0;
+addEventListener("resize", () => {
+  if (!gateRain) return;
+  clearTimeout(resizeT);
+  resizeT = setTimeout(() => gateRain && startGateRain(), 200);
+});
 let introDone = null;
 function unlockSequence() {
   $("#viStatus").textContent = "Access granted. Opening the vault.";
@@ -314,6 +339,7 @@ function unlockSequence() {
   ov.hidden = false;
   ov.classList.remove("out");
   $("#gate").classList.add("out");
+  stopGateRain();
   const rain = vaultRain($("canvas", ov), stems.concat(titles));
   const T = [];
   const at = (ms, f) => T.push(setTimeout(f, ms));

src/vault/vault.css

@@ -142,8 +142,26 @@ a {
   display: grid;
   place-items: center;
   padding: 24px 16px;
-  background:
-    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(161, 0, 255, 0.14), transparent 70%), var(--void);
+  background: var(--void);
+}
+/* the site's digital rain behind the card (public words only: track titles and stem types) */
+.gate-rain {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.gate::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(161, 0, 255, 0.14), transparent 70%);
+}
+.gate.scan::after {
+  z-index: 1;
 }
 .gate.out {
   opacity: 0;
@@ -155,18 +173,20 @@ a {
 .gate-box {
   position: relative;
   z-index: 2;
-  width: min(440px, 100%);
-  padding: 32px 26px 26px;
-  background: rgba(3, 4, 9, 0.85);
-  border: 1px solid var(--hair);
+  width: min(270px, 100%);
+  padding: 18px 16px 10px;
+  background: radial-gradient(closest-side, rgba(3, 4, 9, 0.92), rgba(3, 4, 9, 0.75) 70%, transparent);
 }
 .gate-box::before,
-.gate-box::after {
+.gate-box::after,
+.gate-box .vf::before,
+.gate-box .vf::after {
   content: "";
   position: absolute;
   width: 14px;
   height: 14px;
   border: 1px solid var(--mag);
+  pointer-events: none;
 }
 .gate-box::before {
   top: -1px;
@@ -181,9 +201,28 @@ a {
   border-top: 0;
   border-color: var(--cyan);
 }
+.gate-box .vf {
+  position: absolute;
+  inset: -1px;
+  pointer-events: none;
+}
+.gate-box .vf::before {
+  top: 0;
+  right: 0;
+  border-left: 0;
+  border-bottom: 0;
+  border-color: var(--cyan);
+}
+.gate-box .vf::after {
+  bottom: 0;
+  left: 0;
+  border-right: 0;
+  border-top: 0;
+}
 .gate .tg {
   font-family: var(--mono);
-  font-size: 9px;
+  font-size: 8px;
+  white-space: nowrap;
   letter-spacing: 0.32em;
   color: var(--mag);
   display: flex;
@@ -205,30 +244,9 @@ a {
 .gate h1 {
   font-family: var(--head);
   font-weight: 400;
-  font-size: clamp(3rem, 13vw, 4.4rem);
+  font-size: 1.7rem;
   line-height: 0.86;
-  margin: 16px 0 12px;
-}
-.term {
-  font-family: var(--mono);
-  font-size: 12px;
-  letter-spacing: 0.06em;
-  color: var(--t2);
-  line-height: 1.9;
-  margin-bottom: 18px;
-  min-height: 68px;
-}
-.term b {
-  color: var(--mag);
-  font-weight: 400;
-}
-.term em {
-  font-style: normal;
-  color: var(--cyan);
-}
-.term i {
-  font-style: normal;
-  color: var(--led);
+  margin: 8px 0 10px;
 }
 .field {
   display: flex;
@@ -242,7 +260,7 @@ a {
 .field span {
   display: grid;
   place-items: center;
-  padding: 0 12px;
+  padding: 0 10px;
   font-family: var(--mono);
   color: var(--mag);
 }
@@ -255,20 +273,32 @@ a {
   color: var(--ghost);
   font-family: var(--mono);
   font-size: 16px;
-  letter-spacing: 0.2em;
-  padding: 14px 4px;
+  letter-spacing: 0.14em;
+  padding: 10px 2px;
 }
-.gate .holo {
-  width: 100%;
-  margin-top: 14px;
-  min-height: 50px;
+.field .go {
+  display: grid;
+  place-items: center;
+  width: 46px;
+  flex: none;
+  font-family: var(--mono);
+  color: var(--ghost);
+  border-left: 1px solid var(--hair);
+}
+.field .go:hover,
+.field .go:focus-visible {
+  background: rgba(255, 0, 229, 0.12);
+  outline: none;
+}
+.field .go:disabled {
+  color: var(--t4);
 }
 .gate .msg {
   font-family: var(--mono);
-  font-size: 10px;
+  font-size: 8.5px;
   letter-spacing: 0.22em;
   min-height: 16px;
-  margin-top: 14px;
+  margin-top: 8px;
   color: var(--t3);
 }
 .gate .msg.bad {

vault/index.html

@@ -28,13 +28,11 @@
 
     <!-- ================= GATE ================= -->
     <div class="gate scan" id="gate" role="dialog" aria-modal="true" aria-labelledby="gate-h">
+      <canvas class="gate-rain" id="gateRain" aria-hidden="true"></canvas>
       <form class="gate-box" id="gateForm" autocomplete="off">
+        <span class="vf" aria-hidden="true"></span>
         <div class="tg"><i></i>RESTRICTED · SOURCE VAULT</div>
-        <h1 id="gate-h">ACCESS<br /><span class="grad">REQUIRED.</span></h1>
-        <div class="term" id="term">
-          <b>&gt;</b> ARCHIVE_404 SOURCE FILES DETECTED<br /><b>&gt;</b> STEMS · PROMPTS · LYRICS ·
-          ANALYSIS<br /><b>&gt;</b> <em>ENTER ACCESS KEY</em>
-        </div>
+        <h1 id="gate-h">ACCESS <span class="grad">REQUIRED.</span></h1>
         <label class="field"
           ><span>&gt;_</span
           ><input
@@ -44,8 +42,8 @@ <h1 id="gate-h">ACCESS<br /><span class="grad">REQUIRED.</span></h1>
             spellcheck="false"
             aria-label="Access key"
             placeholder="ACCESS KEY"
-        /></label>
-        <button class="holo" type="submit">UNLOCK THE VAULT</button>
+          /><button class="go" type="submit" aria-label="Unlock the vault">→</button></label
+        >
         <div class="msg" id="msg" role="status" aria-live="polite"></div>
       </form>
     </div>