MCP/mcltspice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rework Outer Limits plug as narrative continuation

Browse Source 
Replace disconnected bottom link with the show's closing narration
subverted: "We now return control of your television set to
oscilloscopemusic.com" — fades in after typewriter finishes with
a dramatic 1.2s delay. Also add oscilloscopemusic.com to the
always-visible attribution bar for N-Spheres tracks.
This commit is contained in:
Ryan Malloy 2026-02-13 06:55:08 -07:00
parent cdd5a923a6
commit 29fc250c73
2 changed files with 40 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
docs/src/components/OscilloscopeDisplay.astro
View File

@ -38,9 +38,11 @@
<!-- Outer Limits easter egg overlay -->
<div class="scope-outer-limits" id="scope-outer-limits" aria-hidden="true">
<p class="scope-ol-text" id="scope-ol-text"></p>
<a class="scope-ol-plug" id="scope-ol-plug"
href="https://oscilloscopemusic.com" target="_blank" rel="noopener"
>tell 'em warehack.ing sent 'cha</a>
<p class="scope-ol-closing" id="scope-ol-closing" data-visible="false">
We now return control of your television set to
<a href="https://oscilloscopemusic.com" target="_blank" rel="noopener"
class="scope-ol-link" id="scope-ol-link">oscilloscopemusic.com</a>
</p>
</div>
</div>
</div>
@ -263,12 +265,13 @@
const el = document.getElementById('scope-attribution');
if (!el) return;
const audioSite = '<a href="https://oscilloscopemusic.com" target="_blank" rel="noopener">oscilloscopemusic.com</a>';
const visualCredit = '· Visual: <a href="https://codepen.io/2Mogs" target="_blank" rel="noopener">Nick Watton</a> · <a href="https://gist.github.com/rsp2k/ac68b1bb290b8124e162987ed1df8d53" target="_blank" rel="noopener">rsp2k</a>';
if ('license' in signal && signal.license) {
el.innerHTML = `&ldquo;<a href="${signal.link}" target="_blank" rel="noopener">${signal.name}</a>&rdquo; by ${signal.artist} (<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener license">CC BY-NC-SA</a>) ${visualCredit}`;
} else {
el.innerHTML = `&ldquo;${signal.name}&rdquo; from <em>${('album' in signal) ? signal.album : ''}</em> by ${signal.artist} ${visualCredit}`;
el.innerHTML = `&ldquo;${signal.name}&rdquo; from <em>${('album' in signal) ? signal.album : ''}</em> by ${signal.artist} · ${audioSite} ${visualCredit}`;
}
}
@ -443,7 +446,8 @@
const knobs = document.querySelectorAll('.scope-easter-knob');
const overlay = document.getElementById('scope-outer-limits');
const textEl = document.getElementById('scope-ol-text');
const plugEl = document.getElementById('scope-ol-plug');
const closingEl = document.getElementById('scope-ol-closing');
const linkEl = document.getElementById('scope-ol-link');
if (!knobs.length || !overlay || !textEl) return;
// Guard against double-init
@ -459,7 +463,7 @@
overlay!.dataset.active = 'true';
overlay!.setAttribute('aria-hidden', 'false');
textEl!.textContent = '';
if (plugEl) plugEl.dataset.visible = 'false';
if (closingEl) closingEl.dataset.visible = 'false';
typeText(quote, 0);
speak(quote);
}
@ -475,8 +479,8 @@
function typeText(text: string, i: number) {
if (i >= text.length) {
// Quote done — fade in the plug after a beat
if (plugEl) setTimeout(() => { plugEl.dataset.visible = 'true'; }, 800);
// Quote done — fade in the closing narration after a dramatic beat
if (closingEl) setTimeout(() => { closingEl.dataset.visible = 'true'; }, 1200);
return;
}
textEl!.textContent += text[i];
@ -529,8 +533,8 @@
});
});
// Let the plug link open without dismissing the overlay
if (plugEl) plugEl.addEventListener('click', (e: Event) => e.stopPropagation());
// Let the closing link open without dismissing the overlay
if (linkEl) linkEl.addEventListener('click', (e: Event) => e.stopPropagation());
// Dismiss on overlay click or Escape
overlay.addEventListener('click', dismiss);

44
docs/src/styles/oscilloscope.css
View File

@ -366,9 +366,10 @@
background: rgba(10, 10, 10, 0.92);
z-index: 10;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12%;
padding: 10% 12%;
cursor: pointer;
}
@ -386,32 +387,39 @@
margin: 0;
}
/* Cheeky plug — fades in after typewriter finishes */
.scope-ol-plug {
position: absolute;
bottom: 10%;
left: 0;
right: 0;
text-align: center;
font-family: var(--sl-font-mono, ui-monospace, monospace);
font-size: 0.45rem;
letter-spacing: 0.06em;
/* Closing narration + plug — fades in after typewriter finishes */
.scope-ol-closing {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 0.55rem;
line-height: 1.5;
color: var(--scope-teal);
text-decoration: none;
text-align: center;
text-shadow: 0 0 8px var(--scope-teal-glow);
margin: 1em 0 0;
opacity: 0;
transition: opacity 1.2s ease-in;
transform: translateY(6px);
transition: opacity 1.5s ease-in, transform 1.5s ease-out;
pointer-events: none;
text-shadow: 0 0 6px var(--scope-teal-glow);
}
.scope-ol-plug[data-visible="true"] {
opacity: 0.7;
.scope-ol-closing[data-visible="true"] {
opacity: 0.85;
transform: translateY(0);
pointer-events: auto;
}
.scope-ol-plug:hover {
opacity: 1;
.scope-ol-link {
color: var(--scope-teal);
text-decoration: none;
font-style: italic;
font-size: 0.65rem;
text-shadow: 0 0 12px var(--scope-teal-glow), 0 0 4px var(--scope-teal-glow);
transition: text-shadow 0.2s;
}
.scope-ol-link:hover {
text-decoration: underline;
text-shadow: 0 0 16px var(--scope-teal), 0 0 6px var(--scope-teal-glow);
}
/* ── Easter egg knobs (Vertical / Horizontal) ────────────── */