From 80a01a7326e6da2fef189c20b049867d9a45ace7 Mon Sep 17 00:00:00 2001 From: Ryan Malloy Date: Fri, 13 Feb 2026 07:03:36 -0700 Subject: [PATCH] Add animated rainbow gradient to Outer Limits easter egg text MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Opening narration cycles through a 9-stop gradient (red → amber → yellow → green → teal → blue → violet → pink → red) at 6s per loop. Closing narration stays teal for visual hierarchy. --- docs/src/styles/oscilloscope.css | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/docs/src/styles/oscilloscope.css b/docs/src/styles/oscilloscope.css index 99dea0b..8ed9766 100644 --- a/docs/src/styles/oscilloscope.css +++ b/docs/src/styles/oscilloscope.css @@ -381,10 +381,25 @@ font-family: 'Georgia', 'Times New Roman', serif; font-size: 0.65rem; line-height: 1.6; - color: var(--scope-teal); text-align: center; - text-shadow: 0 0 8px var(--scope-teal-glow); margin: 0; + /* Animated rainbow gradient text */ + background: linear-gradient( + 90deg, + #ff6b6b, #ffb347, #ffd93d, #a3ff6b, + #2dd4bf, #6bb5ff, #c084fc, #ff6b9d, #ff6b6b + ); + background-size: 300% 100%; + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + animation: scope-rainbow 6s linear infinite; + filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.15)); +} + +@keyframes scope-rainbow { + 0% { background-position: 0% center; } + 100% { background-position: 300% center; } } /* Closing narration + plug — fades in after typewriter finishes */