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

Add oscilloscopemusic.com plug to Outer Limits easter egg

Browse Source 
After the typewriter finishes, a subtle link fades in at the bottom
of the CRT: "tell 'em warehack.ing sent 'cha" → oscilloscopemusic.com
This commit is contained in:
Ryan Malloy 2026-02-13 06:52:08 -07:00
parent ad630ff471
commit cdd5a923a6
2 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,6 +38,9 @@
<!-- Outer Limits easter egg overlay --> <!-- Outer Limits easter egg overlay -->
<div class="scope-outer-limits" id="scope-outer-limits" aria-hidden="true"> <div class="scope-outer-limits" id="scope-outer-limits" aria-hidden="true">
<p class="scope-ol-text" id="scope-ol-text"></p> <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>
</div> </div>
</div> </div>
</div> </div>
@ -440,6 +443,7 @@
const knobs = document.querySelectorAll('.scope-easter-knob'); const knobs = document.querySelectorAll('.scope-easter-knob');
const overlay = document.getElementById('scope-outer-limits'); const overlay = document.getElementById('scope-outer-limits');
const textEl = document.getElementById('scope-ol-text'); const textEl = document.getElementById('scope-ol-text');
const plugEl = document.getElementById('scope-ol-plug');
if (!knobs.length || !overlay || !textEl) return; if (!knobs.length || !overlay || !textEl) return;
// Guard against double-init // Guard against double-init
@ -455,6 +459,7 @@
overlay!.dataset.active = 'true'; overlay!.dataset.active = 'true';
overlay!.setAttribute('aria-hidden', 'false'); overlay!.setAttribute('aria-hidden', 'false');
textEl!.textContent = ''; textEl!.textContent = '';
if (plugEl) plugEl.dataset.visible = 'false';
typeText(quote, 0); typeText(quote, 0);
speak(quote); speak(quote);
} }
@ -469,7 +474,11 @@
} }
function typeText(text: string, i: number) { function typeText(text: string, i: number) {
if (i >= text.length) return; if (i >= text.length) {
// Quote done — fade in the plug after a beat
if (plugEl) setTimeout(() => { plugEl.dataset.visible = 'true'; }, 800);
return;
}
textEl!.textContent += text[i]; textEl!.textContent += text[i];
typeTimer = window.setTimeout(() => typeText(text, i + 1), 30); typeTimer = window.setTimeout(() => typeText(text, i + 1), 30);
} }
@ -520,6 +529,9 @@
}); });
}); });
// Let the plug link open without dismissing the overlay
if (plugEl) plugEl.addEventListener('click', (e: Event) => e.stopPropagation());
// Dismiss on overlay click or Escape // Dismiss on overlay click or Escape
overlay.addEventListener('click', dismiss); overlay.addEventListener('click', dismiss);
document.addEventListener('keydown', (e: KeyboardEvent) => { document.addEventListener('keydown', (e: KeyboardEvent) => {

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

@ -386,6 +386,34 @@
margin: 0; 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;
color: var(--scope-teal);
text-decoration: none;
opacity: 0;
transition: opacity 1.2s ease-in;
pointer-events: none;
text-shadow: 0 0 6px var(--scope-teal-glow);
}
.scope-ol-plug[data-visible="true"] {
opacity: 0.7;
pointer-events: auto;
}
.scope-ol-plug:hover {
opacity: 1;
text-decoration: underline;
}
/* ── Easter egg knobs (Vertical / Horizontal) ────────────── */ /* ── Easter egg knobs (Vertical / Horizontal) ────────────── */
.scope-easter-knob { .scope-easter-knob {
cursor: pointer; cursor: pointer;