docs: updates hero animations

Author: andrew-boyd

packages/docs/pages/index.vue

@@ -7,17 +7,17 @@
         <div class="absolute inset-0 z-0 pointer-events-none overflow-hidden">
           <div class="falling-blocks-container">
             <div
-              v-for="i in 20"
+              v-for="i in blockCount"
               :key="i"
               class="falling-block"
-              :style="generateBlockStyle()"
+              :style="generateBlockStyle(i)"
             ></div>
             <!-- JSON symbol blocks -->
             <div
-              v-for="i in 10"
+              v-for="i in jsonSymbolCount"
               :key="`json-${i}`"
               class="falling-json-symbol"
-              :style="generateJsonSymbolStyle()"
+              :style="generateJsonSymbolStyle(i)"
             >
               {{ getRandomJsonSymbol() }}
             </div>
@@ -695,41 +695,107 @@ for await (const [value, path] of jsonPathReader(reader, [
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue"
 import Logo from "../components/Logo.vue"
 import CodeBlock from "../components/CodeBlock.vue"
+import { ref, computed, onMounted, onBeforeUnmount } from "vue"
+
+// Reactive state for screen width
+const windowWidth = ref(
+  typeof window !== "undefined" ? window.innerWidth : 1024
+)
+
+// Compute the number of elements based on screen width
+const blockCount = computed(() => {
+  const maxBlocks = 60
+  const minBlocks = 30
+
+  if (windowWidth.value >= 1024) {
+    return maxBlocks
+  } else if (windowWidth.value <= 320) {
+    return minBlocks
+  } else {
+    // Linear interpolation between min and max based on screen width
+    const ratio = (windowWidth.value - 320) / (1024 - 320)
+    return Math.round(minBlocks + ratio * (maxBlocks - minBlocks))
+  }
+})
+
+const jsonSymbolCount = computed(() => {
+  const maxSymbols = 15
+  const minSymbols = 8
+
+  if (windowWidth.value >= 1024) {
+    return maxSymbols
+  } else if (windowWidth.value <= 320) {
+    return minSymbols
+  } else {
+    // Linear interpolation between min and max based on screen width
+    const ratio = (windowWidth.value - 320) / (1024 - 320)
+    return Math.round(minSymbols + ratio * (maxSymbols - minSymbols))
+  }
+})
+
+// Window resize handler
+const handleResize = () => {
+  windowWidth.value = window.innerWidth
+}
+
+// Set up and clean up the resize listener
+onMounted(() => {
+  window.addEventListener("resize", handleResize)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", handleResize)
+})
 
 // Function to get a random JSON symbol
 const getRandomJsonSymbol = () => {
-  const symbols = ["{", "}", "[", "]", ":", ",", '"', "."]
+  const symbols = ["{", "}", "[", "]", ":"]
   return symbols[Math.floor(Math.random() * symbols.length)]
 }
 
 // Function to generate styles for JSON symbol blocks
-const generateJsonSymbolStyle = () => {
+const generateJsonSymbolStyle = (index) => {
   const left = Math.floor(Math.random() * 100) // Position across the screen
-  const delay = Math.random() * 5 // Random delay
-  const duration = Math.random() * 15 + 15 // Animation duration between 15-30s
+
+  // Calculate evenly distributed delays based on index
+  // This creates a consistent stream of elements
+  const maxDelay = 30 // Maximum delay in seconds
+  const totalItems = jsonSymbolCount.value
+  const delay = ((index / totalItems) * maxDelay) % maxDelay // Distribute delays evenly
+
+  // Varied durations between 15-25s
+  const duration = Math.random() * 10 + 15
+
   const size = Math.floor(Math.random() * 20) + 20 // Size between 20px and 40px
-  const opacity = Math.random() * 0.1 + 0.05 // Low opacity between 0.05-0.15
+  const originalOpacity = Math.random() * 0.1 + 0.05 // Low opacity between 0.05-0.15
 
   return {
     left: `${left}%`,
     animationDelay: `${delay}s`,
     animationDuration: `${duration}s`,
-    opacity: opacity,
+    "--original-opacity": originalOpacity, // Set as CSS variable
     fontSize: `${size}px`,
     transform: `rotate(${Math.floor(Math.random() * 20 - 10)}deg)`, // Slight rotation
   }
 }
 
 // Function to generate random styles for falling blocks
-const generateBlockStyle = () => {
+const generateBlockStyle = (index) => {
   const size = Math.floor(Math.random() * 40) + 10 // Size between 10px and 50px
   const left = Math.floor(Math.random() * 100) // Position across the screen
-  const delay = Math.random() * 5 // Random delay
-  const duration = Math.random() * 10 + 10 // Animation duration between 10-20s
-  const opacity = Math.random() * 0.08 + 0.02 // Low opacity between 0.02-0.1
+
+  // Calculate evenly distributed delays based on index
+  // This creates a consistent stream of elements
+  const maxDelay = 40 // Maximum delay in seconds
+  const totalItems = blockCount.value
+  const delay = ((index / totalItems) * maxDelay) % maxDelay // Distribute delays evenly
+
+  // Varied durations between 10-20s
+  const duration = Math.random() * 10 + 10
+
+  const originalOpacity = Math.random() * 0.08 + 0.02 // Low opacity between 0.02-0.1
 
   // Choose random shape type
   const shapeTypes = ["square", "rectangle", "circle", "diamond"]
@@ -742,7 +808,7 @@ const generateBlockStyle = () => {
     left: `${left}%`,
     animationDelay: `${delay}s`,
     animationDuration: `${duration}s`,
-    opacity: opacity,
+    "--original-opacity": originalOpacity, // Set as CSS variable
     transform: `rotate(${Math.floor(Math.random() * 360)}deg)`,
   }
 
@@ -761,42 +827,6 @@ const generateBlockStyle = () => {
 
   return styles
 }
-
-// Create a grid pattern background effect for code blocks
-const createBackgroundGridPattern = () => {
-  if (process.client) {
-    setTimeout(() => {
-      const codeWindows = document.querySelectorAll(".code-window-content")
-      codeWindows.forEach((codeWindow) => {
-        if (!codeWindow.querySelector(".bg-grid-pattern")) {
-          const gridPattern = document.createElement("div")
-          gridPattern.classList.add("bg-grid-pattern")
-          gridPattern.style.position = "absolute"
-          gridPattern.style.inset = "0"
-          gridPattern.style.opacity = "0.05"
-          gridPattern.style.pointerEvents = "none"
-          gridPattern.style.backgroundSize = "20px 20px"
-          gridPattern.style.backgroundImage =
-            "linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px)"
-          codeWindow.appendChild(gridPattern)
-        }
-      })
-    }, 100)
-  }
-}
-
-// Create a scroll to top function
-const scrollToTop = () => {
-  window.scrollTo({
-    top: 0,
-    behavior: "smooth",
-  })
-}
-
-// Initialize any client-side effects
-onMounted(() => {
-  createBackgroundGridPattern()
-})
 </script>
 
 <style scoped>
@@ -974,6 +1004,7 @@ onMounted(() => {
   border-radius: 4px;
   animation: fall linear infinite;
   z-index: 0;
+  will-change: transform;
 }
 
 .falling-json-symbol {
@@ -985,14 +1016,25 @@ onMounted(() => {
   animation: fall linear infinite;
   z-index: 0;
   text-shadow: 0 0 5px rgba(59, 130, 246, 0.15);
+  will-change: transform;
 }
 
 @keyframes fall {
   0% {
-    transform: translateY(-100px) rotate(0deg);
+    transform: translateY(-20px) rotate(0deg);
+    opacity: 0;
+  }
+  2% {
+    /* Quick fade in to the pre-set randomized opacity */
+    opacity: var(--original-opacity, 0.05);
+  }
+  98% {
+    /* Maintain the pre-set randomized opacity until near the end */
+    opacity: var(--original-opacity, 0.05);
   }
   100% {
-    transform: translateY(100vh) rotate(360deg);
+    transform: translateY(calc(100vh + 40px)) rotate(360deg);
+    opacity: 0;
   }
 }
 </style>