Add oscilloscopemusic.com plug to Outer Limits easter egg

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

View File

@ -38,6 +38,9 @@
<!-- 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>
</div>
</div>
</div>
@ -440,6 +443,7 @@
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');
if (!knobs.length || !overlay || !textEl) return;
// Guard against double-init
@ -455,6 +459,7 @@
overlay!.dataset.active = 'true';
overlay!.setAttribute('aria-hidden', 'false');
textEl!.textContent = '';
if (plugEl) plugEl.dataset.visible = 'false';
typeText(quote, 0);
speak(quote);
}
@ -469,7 +474,11 @@
}
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];
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
overlay.addEventListener('click', dismiss);
document.addEventListener('keydown', (e: KeyboardEvent) => {

View File

@ -386,6 +386,34 @@
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) ────────────── */
.scope-easter-knob {
cursor: pointer;