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) => (
-
+
+ {/* Background bar (static) */}
+
+
+ {/* Animated foreground bar */}
+
+
))}
{/* 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);
+ }
+}