From 29fc250c732c06587e5025b0383037ed9f113c3f Mon Sep 17 00:00:00 2001 From: Ryan Malloy Date: Fri, 13 Feb 2026 06:55:08 -0700 Subject: [PATCH] Rework Outer Limits plug as narrative continuation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- docs/src/components/OscilloscopeDisplay.astro | 24 +++++----- docs/src/styles/oscilloscope.css | 44 +++++++++++-------- 2 files changed, 40 insertions(+), 28 deletions(-) diff --git a/docs/src/components/OscilloscopeDisplay.astro b/docs/src/components/OscilloscopeDisplay.astro index 1cfd6d2..0ad105f 100644 --- a/docs/src/components/OscilloscopeDisplay.astro +++ b/docs/src/components/OscilloscopeDisplay.astro @@ -38,9 +38,11 @@ @@ -263,12 +265,13 @@ const el = document.getElementById('scope-attribution'); if (!el) return; + const audioSite = 'oscilloscopemusic.com'; const visualCredit = '· Visual: Nick Watton · rsp2k'; if ('license' in signal && signal.license) { el.innerHTML = `“${signal.name}” by ${signal.artist} (CC BY-NC-SA) ${visualCredit}`; } else { - el.innerHTML = `“${signal.name}” from ${('album' in signal) ? signal.album : ''} by ${signal.artist} ${visualCredit}`; + el.innerHTML = `“${signal.name}” from ${('album' in signal) ? signal.album : ''} 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); diff --git a/docs/src/styles/oscilloscope.css b/docs/src/styles/oscilloscope.css index 759e7c8..99dea0b 100644 --- a/docs/src/styles/oscilloscope.css +++ b/docs/src/styles/oscilloscope.css @@ -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) ────────────── */