diff --git a/docs/src/components/OscilloscopeDisplay.astro b/docs/src/components/OscilloscopeDisplay.astro index 6562603..1cfd6d2 100644 --- a/docs/src/components/OscilloscopeDisplay.astro +++ b/docs/src/components/OscilloscopeDisplay.astro @@ -38,6 +38,9 @@
@@ -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) => { diff --git a/docs/src/styles/oscilloscope.css b/docs/src/styles/oscilloscope.css index 2505956..759e7c8 100644 --- a/docs/src/styles/oscilloscope.css +++ b/docs/src/styles/oscilloscope.css @@ -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;