From decfaa494d0e0e7ff87fdef76081e0dcec03e493 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Fri, 15 Aug 2025 13:29:20 +1000
Subject: [PATCH] feat: line animations

---
 .../SurveyResults/SurveyChapter.tsx           | 36 +++++++++++++------
 .../SurveyResults/surveyChapter.css           | 17 +++++++++
 2 files changed, 43 insertions(+), 10 deletions(-)
 create mode 100644 apps/www/components/SurveyResults/surveyChapter.css

diff --git a/apps/www/components/SurveyResults/SurveyChapter.tsx b/apps/www/components/SurveyResults/SurveyChapter.tsx
index 7948d7e64b6..d3567be3a51 100644
--- a/apps/www/components/SurveyResults/SurveyChapter.tsx
+++ b/apps/www/components/SurveyResults/SurveyChapter.tsx
@@ -1,4 +1,5 @@
 import { SurveyPullQuote } from './SurveyPullQuote'
+import './surveyChapter.css'
 
 interface SurveyChapterProps {
   number: number
@@ -47,16 +48,31 @@ export function SurveyChapter({
             }}
           >
             {[0, 1, 2, 3].map((item, index) => (
-              <div
-                key={index}
-                className={`h-${(index + 1) * 4} w-full ${index === 0 ? 'bg-brand' : index === 1 ? 'bg-brand-500' : 'bg-brand-300'}`}
-                style={{
-                  maskImage: 'url("/images/state-of-startups/pattern-front.svg")',
-                  maskSize: '14.5px 15px',
-                  maskRepeat: 'repeat',
-                  maskPosition: 'top left',
-                }}
-              />
+              <div key={index} className="relative">
+                {/* Background bar (static) */}
+                <div
+                  className={`h-${(index + 1) * 4} w-full ${index === 0 ? 'bg-foreground-muted/80' : index === 1 ? 'bg-foreground-muted/50' : 'bg-foreground-muted/20'}`}
+                  // className={`h-${(index + 1) * 4} w-full ${index === 0 ? 'bg-brand/20' : index === 1 ? 'bg-brand-500/20' : 'bg-brand-300/20'}`}
+                  style={{
+                    maskImage: 'url("/images/state-of-startups/pattern-back.svg")',
+                    maskSize: '15px 15px',
+                    maskRepeat: 'repeat',
+                    maskPosition: 'center',
+                  }}
+                />
+
+                {/* Animated foreground bar */}
+                <div
+                  className={`absolute inset-0 h-${(index + 1) * 4} w-full ${index === 0 ? 'bg-brand' : index === 1 ? 'bg-brand-500' : 'bg-brand-300'}`}
+                  style={{
+                    maskImage: 'url("/images/state-of-startups/pattern-front.svg")',
+                    maskSize: '14.5px 15px',
+                    maskRepeat: 'repeat',
+                    maskPosition: 'top left',
+                    animation: `terminalLine 10s steps(8, end) ${index * 0.3}s infinite ${number % 2 === 0 ? '' : 'reverse'}`,
+                  }}
+                />
+              </div>
             ))}
           </div>
           {/* Text content */}
diff --git a/apps/www/components/SurveyResults/surveyChapter.css b/apps/www/components/SurveyResults/surveyChapter.css
new file mode 100644
index 00000000000..13b6d135e73
--- /dev/null
+++ b/apps/www/components/SurveyResults/surveyChapter.css
@@ -0,0 +1,17 @@
+@keyframes terminalLine {
+  0% {
+    clip-path: inset(0 100% 0 0);
+  }
+  20% {
+    clip-path: inset(0 80% 0 0);
+  }
+  50% {
+    clip-path: inset(0 20% 0 0);
+  }
+  80% {
+    clip-path: inset(0 0% 0 0);
+  }
+  100% {
+    clip-path: inset(0 0% 0 0);
+  }
+}