From 10b5e237df1e0caf6c1633cae55a0e35845fe3f3 Mon Sep 17 00:00:00 2001
From: Alexander Dines <alex@runloop.ai>
Date: Wed, 21 Jan 2026 15:38:03 -0800
Subject: [PATCH 1/2] cp dines

---
 src/components/Banner.tsx | 96 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 89 insertions(+), 7 deletions(-)

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 2d8e1cce..24c169fb 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -1,19 +1,101 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Box } from "ink";
 import BigText from "ink-big-text";
 import Gradient from "ink-gradient";
 import { isLightMode } from "../utils/theme.js";
 
+// Dramatic shades of green shimmer - wide range
+const DARK_SHIMMER_COLORS = [
+  "#024A38", // Very very dark emerald
+  "#035544", //
+  "#036050", //
+  "#046C54", //
+  "#04765C", //
+  "#058164", //
+  "#058C6D", //
+  "#059669", // Deep emerald
+  "#08A076", //
+  "#0BA67B", //
+  "#0EAE84", //
+  "#10B981", // Runloop success green
+  "#14C793", // Lighter emerald
+  "#1CD7A7", //
+  "#24E0B5", //
+  "#30EAC0", //
+  "#40F5CC", // Very bright emerald
+  "#30EAC0", //
+  "#24E0B5", //
+  "#1CD7A7", //
+  "#14C793", // Lighter emerald
+  "#10B981", // Runloop success green
+  "#0EAE84", //
+  "#0BA67B", //
+  "#08A076", //
+  "#059669", // Deep emerald
+  "#058C6D", //
+  "#058164", //
+  "#04765C", //
+  "#046C54", //
+  "#036050", //
+  "#035544", //
+];
+
+const LIGHT_SHIMMER_COLORS = [
+  "#034D3A", // Very very deep emerald
+  "#045540", //
+  "#055D46", //
+  "#065F46", //
+  "#046A50", //
+  "#047857", // Deep emerald
+  "#058360", //
+  "#058C68", //
+  "#059669", // Runloop light success green
+  "#08A076", //
+  "#0BA67B", //
+  "#0EAE84", //
+  "#10B981", // Medium emerald
+  "#14C793", // Lighter emerald
+  "#18D29F", //
+  "#1CDCA9", //
+  "#20E5B3", //
+  "#1CDCA9", //
+  "#18D29F", //
+  "#14C793", // Lighter emerald
+  "#10B981", // Medium emerald
+  "#0EAE84", //
+  "#0BA67B", //
+  "#08A076", //
+  "#059669", // Runloop light success green
+  "#058C68", //
+  "#058360", //
+  "#047857", // Deep emerald
+  "#046A50", //
+  "#065F46", //
+  "#055D46", //
+  "#045540", //
+];
+
 export const Banner = React.memo(() => {
-  // Use theme-aware gradient colors
-  // In light mode, use darker/deeper colors for better contrast on light backgrounds
-  // "teen" has darker colors (blue/purple) that work well on light backgrounds
-  // In dark mode, use the vibrant "vice" gradient (pink/cyan) that works well on dark backgrounds
-  const gradientName = isLightMode() ? "teen" : "vice";
+  const [offset, setOffset] = useState(0);
+  const colors = isLightMode() ? LIGHT_SHIMMER_COLORS : DARK_SHIMMER_COLORS;
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setOffset((prev) => (prev - 1 + colors.length) % colors.length);
+    }, 250); // Slower, more subtle shimmer
+
+    return () => clearInterval(interval);
+  }, [colors.length]);
+
+  // Create a subtle shimmer by shifting the color array
+  const rotatedColors = [
+    ...colors.slice(offset),
+    ...colors.slice(0, offset),
+  ];
 
   return (
     <Box flexDirection="column" alignItems="flex-start" paddingX={1}>
-      <Gradient name={gradientName}>
+      <Gradient colors={rotatedColors}>
         <BigText text="RUNLOOP.ai" font="simple3d" />
       </Gradient>
     </Box>

From 7755de8890381868d344863785d537c3fa02b95f Mon Sep 17 00:00:00 2001
From: Alexander Dines <alex@runloop.ai>
Date: Wed, 21 Jan 2026 15:38:13 -0800
Subject: [PATCH 2/2] cp dines

---
 src/components/Banner.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 24c169fb..c949d869 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -88,10 +88,7 @@ export const Banner = React.memo(() => {
   }, [colors.length]);
 
   // Create a subtle shimmer by shifting the color array
-  const rotatedColors = [
-    ...colors.slice(offset),
-    ...colors.slice(0, offset),
-  ];
+  const rotatedColors = [...colors.slice(offset), ...colors.slice(0, offset)];
 
   return (
     <Box flexDirection="column" alignItems="flex-start" paddingX={1}>