ReflectionsProjections · Aug 21, 2025 · May 30, 2025 · May 30, 2025 · May 30, 2025 · Jun 2, 2025
diff --git a/apps/site/index.html b/apps/site/index.html
@@ -8,6 +8,17 @@
       content="width=device-width, initial-scale=1.0,viewport-fit=cover"
     />
     <meta name="theme-color" content="#000000" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap"
+      rel="stylesheet"
+    />
+
     <title>Reflections | Projections</title>
   </head>
   <body>

diff --git a/apps/site/public/finish-line.svg b/apps/site/public/finish-line.svg
diff --git a/apps/site/public/magistral.ttf b/apps/site/public/magistral.ttf
diff --git a/apps/site/public/pro-racing-slant.ttf b/apps/site/public/pro-racing-slant.ttf
diff --git a/apps/site/public/pro-racing.ttf b/apps/site/public/pro-racing.ttf
diff --git a/apps/site/public/schedule-mobile.svg b/apps/site/public/schedule-mobile.svg
diff --git a/apps/site/public/schedule.svg b/apps/site/public/schedule.svg
diff --git a/apps/site/src/components/Home/Schedule/AudioVisualizer.tsx b/apps/site/src/components/Home/Schedule/AudioVisualizer.tsx
@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from "react";
+import { Flex } from "@chakra-ui/react";
+import { motion } from "framer-motion";
+
+interface AudioVisualizerProps {
+  barCount?: number;
+  maxHeight?: number;
+  updateInterval?: number;
+  variance?: number;
+  // Spring animation properties
+  stiffness?: number;
+  damping?: number;
+  mass?: number;
+}
+
+export const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
+  barCount = 40,
+  maxHeight = 60,
+  updateInterval = 100,
+  // Default spring physics values
+  stiffness = 100,
+  damping = 10,
+  mass = 1
+}) => {
+  const [heights, setHeights] = useState<number[]>(
+    Array.from({ length: barCount }, () => Math.random() * maxHeight)
+  );
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setHeights((prev) =>
+        prev.map((h) => {
+          // Create more dramatic changes by using a new random value
+          // combined with the previous height
+          const targetHeight = Math.random() * maxHeight;
+          // Mix previous height (30%) with new random height (70%)
+          // This creates more noticeable variations while maintaining some continuity
+          const newHeight = h * 0.3 + targetHeight * 0.7;
+
+          // Add extra randomness for occasional peaks
+          const shouldSpike = Math.random() > 0.85;
+          const spikeMultiplier = shouldSpike ? Math.random() * 0.7 + 0.3 : 0;
+
+          return Math.max(
+            5,
+            Math.min(newHeight + maxHeight * spikeMultiplier, maxHeight)
+          );
+        })
+      );
+    }, updateInterval);
+    return () => clearInterval(timer);
+  }, [maxHeight, updateInterval]);
+
+  return (
+    <Flex
+      flex={2}
+      alignItems="flex-end"
+      height={`${maxHeight}px`}
+      gap="2px"
+      width="100%"
+    >
+      {heights.map((h, idx) => (
+        <motion.div
+          key={idx}
+          style={{
+            flex: 1,
+            backgroundColor: "var(--chakra-colors-orange-300)",
+            borderRadius: "2px",
+            height: `${h}px`
+          }}
+          initial={{ height: 0 }}
+          animate={{ height: `${h}px` }}
+          transition={{
+            stiffness,
+            damping,
+            mass
+          }}
+        />
+      ))}
+    </Flex>
+  );
+};