diff --git a/docs/.vitepress/theme/components/AsideSponsors.vue b/docs/.vitepress/theme/components/AsideSponsors.vue
index 0d3de381..eb0a8a8f 100644
--- a/docs/.vitepress/theme/components/AsideSponsors.vue
+++ b/docs/.vitepress/theme/components/AsideSponsors.vue
@@ -7,7 +7,7 @@ const { data } = useSponsor()
 
 const sponsors = computed(() => {
   return (
-    data?.value.map((sponsor) => {
+    data.value?.map((sponsor) => {
       return {
         size: sponsor.size === 'big' ? 'mini' : 'xmini',
         items: sponsor.items
diff --git a/docs/.vitepress/theme/components/YouTubeVideo.vue b/docs/.vitepress/theme/components/YouTubeVideo.vue
index 4aa6c93d..59f05d56 100644
--- a/docs/.vitepress/theme/components/YouTubeVideo.vue
+++ b/docs/.vitepress/theme/components/YouTubeVideo.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 defineProps({
   videoId: String,
 })
diff --git a/docs/.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue b/docs/.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue
index 10bd32fa..f8edefc9 100644
--- a/docs/.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue	
+++ b/docs/.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue	
@@ -29,8 +29,8 @@ const inputLines: Ref<SvgNodeProps>[] = inputPaths.map((path) =>
     visible: false,
     labelVisible: false,
     label: '',
-    dotColor: null,
-    glowColor: null,
+    dotColor: undefined,
+    glowColor: undefined,
     path,
   }),
 )
@@ -117,10 +117,10 @@ const animateDiagram = () => {
 
   // Animate the input nodes/lines
   prepareInputs().forEach((lineIndex, fileIndex) => {
-    timeline.add(
+    timeline!.add(
       isMobile
-        ? animateSingleInputMobile(inputLines[lineIndex as number])
-        : animateSingleInputDesktop(inputLines[lineIndex as number]),
+        ? animateSingleInputMobile(inputLines[lineIndex])
+        : animateSingleInputDesktop(inputLines[lineIndex]),
       fileIndex * (isMobile ? 0.4 : 0.2),
     )
   })
@@ -133,7 +133,7 @@ const animateDiagram = () => {
   // Animate the output nodes/lines
   timeline.addLabel('showOutput', '<')
   outputLines.forEach((outputLine, index) => {
-    timeline.add(
+    timeline!.add(
       isMobile
         ? animateSingleOutputMobile(outputLine)
         : animateSingleOutputDesktop(outputLine, index),
@@ -161,7 +161,7 @@ const prepareInputs = () => {
     inputFileSets.value[Math.floor(Math.random() * inputFileSets.value.length)]
 
   // Choose enough unique lines for the input file nodes to slide along
-  const inputLineIndexes = new Set()
+  const inputLineIndexes = new Set<number>()
   while (inputLineIndexes.size < 3) {
     const index: number = Math.floor(Math.random() * inputLines.length)
     inputLineIndexes.add(index)
@@ -170,10 +170,10 @@ const prepareInputs = () => {
   // Assign each line it's appropriate node label
   const inputs = [...inputLineIndexes]
   inputs.forEach((lineIndex, fileIndex) => {
-    inputLines[lineIndex as number].value.label = inputFileSet[fileIndex].label
-    inputLines[lineIndex as number].value.dotColor = inputLines[
-      lineIndex as number
-    ].value.glowColor = inputFileSet[fileIndex].color as string | null
+    inputLines[lineIndex].value.label = inputFileSet[fileIndex].label
+    inputLines[lineIndex].value.dotColor = inputLines[
+      lineIndex
+    ].value.glowColor = inputFileSet[fileIndex].color
   })
   return inputs
 }
diff --git a/docs/.vitepress/theme/components/landing/1. hero-section/HeroSection.vue b/docs/.vitepress/theme/components/landing/1. hero-section/HeroSection.vue
index 409e77dc..8acf66bc 100644
--- a/docs/.vitepress/theme/components/landing/1. hero-section/HeroSection.vue	
+++ b/docs/.vitepress/theme/components/landing/1. hero-section/HeroSection.vue	
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import HeroDiagram from './HeroDiagram.vue'
 </script>
 
diff --git a/docs/.vitepress/theme/components/landing/2. feature-section/FeatureCI.vue b/docs/.vitepress/theme/components/landing/2. feature-section/FeatureCI.vue
index a4085433..1705440d 100644
--- a/docs/.vitepress/theme/components/landing/2. feature-section/FeatureCI.vue	
+++ b/docs/.vitepress/theme/components/landing/2. feature-section/FeatureCI.vue	
@@ -44,7 +44,7 @@ const { startAnimation, isCardActive } = useCardAnimation(
       () => {
         glowVisible.value = true
       },
-      null,
+      undefined,
       0.2
     )
     // Make the glowing lines hidden shortly after
@@ -52,7 +52,7 @@ const { startAnimation, isCardActive } = useCardAnimation(
       () => {
         glowVisible.value = false
       },
-      null,
+      undefined,
       1.1
     )
 
@@ -62,7 +62,7 @@ const { startAnimation, isCardActive } = useCardAnimation(
         () => {
           checkmark.value = true
         },
-        null,
+        undefined,
         1.3 + index * 0.2
       )
     })
@@ -228,91 +228,91 @@ const { startAnimation, isCardActive } = useCardAnimation(
             path="M1.00048 119.402L200.243 68.2732C213.283 65.4129 221.832 58.4923 221.832 50.7968V20.323V1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M1.00048 136.779L231.212 68.7423C242.847 65.5523 250.195 59.0356 250.195 51.9076V20.323V1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M1 165.731L263.267 69.1267C272.82 65.6348 278.558 59.7587 278.558 53.4667V20.323V1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M719.001 154.23L464.019 69.1276C454.474 65.6348 448.743 59.7616 448.743 53.4731V20.323V1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M719.001 125.219L496.078 68.7439C484.449 65.5528 477.106 59.0377 477.106 51.9119V20.323V1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M719 107.817L527.05 68.2749C514.015 65.4134 505.469 58.4939 505.469 50.8001V20.323V1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M719.001 96.2159L557.314 67.8323C543.291 65.2673 533.835 58.0756 533.835 49.976V20.323V9.78386C533.835 4.93267 529.902 1 525.051 1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M1 107.817L169.982 67.8308C184.008 65.2668 193.467 58.0743 193.467 49.9735V20.323V9.78387C193.467 4.93267 197.4 1 202.251 1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M306.924 1V20.323V55.7423C306.924 60.7337 303.306 65.5207 296.865 69.0509L62.8139 197.336C52.968 202.733 46.8471 213.068 46.8471 224.296V240.342"
             :position="1 - glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M335.286 1V20.323V59.0919C335.286 62.0155 334.043 64.8989 331.656 67.5136L213.175 197.282C208.003 202.947 205.136 210.34 205.136 218.011V240.342"
             :position="1 - glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M363.65 1V20.323L363.428 206.088V240.342"
             :position="1 - glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M392.015 1V20.323V59.1056C392.015 62.0204 393.25 64.8954 395.624 67.5041L513.712 197.291C518.862 202.951 521.716 210.328 521.716 217.981V240.342"
             :position="1 - glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M420.377 1V20.323V55.7518C420.377 60.7376 423.987 65.5197 430.415 69.0489L664.058 197.332C673.893 202.732 680.005 213.061 680.005 224.28V240.342"
             :position="1 - glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
         </svg>
diff --git a/docs/.vitepress/theme/components/landing/2. feature-section/FeatureFlexiblePlugins.vue b/docs/.vitepress/theme/components/landing/2. feature-section/FeatureFlexiblePlugins.vue
index 2d8233b8..85900765 100644
--- a/docs/.vitepress/theme/components/landing/2. feature-section/FeatureFlexiblePlugins.vue	
+++ b/docs/.vitepress/theme/components/landing/2. feature-section/FeatureFlexiblePlugins.vue	
@@ -12,7 +12,7 @@ useSlideIn('#flexible-plugin-system')
  */
 const { isCardActive, startAnimation } = useCardAnimation(
   '#flexible-plugin-system',
-  null,
+  undefined,
   {
     once: true,
   }
diff --git a/docs/.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue b/docs/.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue
index 46d63c25..53789d7b 100644
--- a/docs/.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue	
+++ b/docs/.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue	
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
 import { gsap } from 'gsap'
 import { useSlideIn } from '../../../composables/useSlideIn'
@@ -26,6 +26,7 @@ const { startAnimation } = useCardAnimation(
       commandTriggered.value = true
       highlightEnter.value = false
     })
+    return timeline
   },
   {
     once: true,
@@ -35,7 +36,7 @@ const { startAnimation } = useCardAnimation(
 /**
  * Run the command animation on enter press
  */
-function handleEnterPress(event) {
+function handleEnterPress(event: KeyboardEvent) {
   if (event.key === 'Enter') {
     startAnimation()
     window.removeEventListener('keydown', handleEnterPress)
diff --git a/docs/.vitepress/theme/components/landing/2. feature-section/FeatureOptimizedBuild.vue b/docs/.vitepress/theme/components/landing/2. feature-section/FeatureOptimizedBuild.vue
index 9c574c0e..55350664 100644
--- a/docs/.vitepress/theme/components/landing/2. feature-section/FeatureOptimizedBuild.vue	
+++ b/docs/.vitepress/theme/components/landing/2. feature-section/FeatureOptimizedBuild.vue	
@@ -43,7 +43,7 @@ const { startAnimation } = useCardAnimation(
         () => {
           node.visible.value = false
         },
-        null,
+        undefined,
         '-=0.6'
       )
       timeline.add(subTimeline, Math.random())
@@ -54,7 +54,7 @@ const { startAnimation } = useCardAnimation(
       () => {
         isBoltActive.value = true
       },
-      null,
+      undefined,
       '-=0.5'
     )
 
@@ -92,7 +92,7 @@ const { startAnimation } = useCardAnimation(
           path="M195 31.5L89.8055 30.377C76.1575 30.377 62.535 29.076 49.0906 26.4886L-21 13"
           :position="nodes[0].position.value"
           :visible="nodes[0].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -105,7 +105,7 @@ const { startAnimation } = useCardAnimation(
           path="M195 50L69.295 47.754L-21 41.016"
           :position="nodes[1].position.value"
           :visible="nodes[1].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -118,7 +118,7 @@ const { startAnimation } = useCardAnimation(
           path="M195 68.5L-21 69.5642"
           :position="nodes[2].position.value"
           :visible="nodes[2].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -131,7 +131,7 @@ const { startAnimation } = useCardAnimation(
           path="M195 87L69.2951 89.2463L-21 96.1614"
           :position="nodes[3].position.value"
           :visible="nodes[3].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -144,7 +144,7 @@ const { startAnimation } = useCardAnimation(
           path="M195 105.5L89.8055 106.623C76.1575 106.623 62.535 107.924 49.0906 110.511L-21 124"
           :position="nodes[4].position.value"
           :visible="nodes[4].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -182,7 +182,7 @@ const { startAnimation } = useCardAnimation(
           path="M0 93.5L105.194 94.623C118.843 94.623 132.465 95.924 145.909 98.5114L216 112"
           :position="nodes[5].position.value"
           :visible="nodes[5].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -195,7 +195,7 @@ const { startAnimation } = useCardAnimation(
           path="M0 75L125.705 77.246L216 83.984"
           :position="nodes[6].position.value"
           :visible="nodes[6].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -208,7 +208,7 @@ const { startAnimation } = useCardAnimation(
           path="M4.65162e-08 56.5L216 55.4358"
           :position="nodes[7].position.value"
           :visible="nodes[7].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -221,7 +221,7 @@ const { startAnimation } = useCardAnimation(
           path="M4.00455e-07 38L125.705 35.7537L216 28.8386"
           :position="nodes[8].position.value"
           :visible="nodes[8].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -234,7 +234,7 @@ const { startAnimation } = useCardAnimation(
           path="M8.0866e-07 19.5L105.194 18.377C118.843 18.377 132.465 17.076 145.909 14.4887L216 1"
           :position="nodes[9].position.value"
           :visible="nodes[9].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
diff --git a/docs/.vitepress/theme/components/landing/2. feature-section/FeatureRichFeatures.vue b/docs/.vitepress/theme/components/landing/2. feature-section/FeatureRichFeatures.vue
index a4c5c5e0..ec8aa221 100644
--- a/docs/.vitepress/theme/components/landing/2. feature-section/FeatureRichFeatures.vue	
+++ b/docs/.vitepress/theme/components/landing/2. feature-section/FeatureRichFeatures.vue	
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import logoJSON from './images/json.svg'
 import logoCSS from './images/css3.svg'
 import logoJS from './images/js.svg'
@@ -18,7 +18,7 @@ useSlideIn('#rich-features-card')
  */
 const { isCardActive, startAnimation } = useCardAnimation(
   '#rich-features-card',
-  null,
+  undefined,
   {
     once: true,
   }
@@ -39,7 +39,6 @@ const { isCardActive, startAnimation } = useCardAnimation(
           width="658"
           height="275"
           viewBox="0 0 658 275"
-          d
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
diff --git a/docs/.vitepress/theme/components/landing/2. feature-section/FeatureSection.vue b/docs/.vitepress/theme/components/landing/2. feature-section/FeatureSection.vue
index b503ba3e..a0264d01 100644
--- a/docs/.vitepress/theme/components/landing/2. feature-section/FeatureSection.vue	
+++ b/docs/.vitepress/theme/components/landing/2. feature-section/FeatureSection.vue	
@@ -51,7 +51,7 @@ const startAnimation = () => {
       () => {
         animationVisible.value = true
       },
-      null,
+      undefined,
       0,
     )
     .to(
diff --git a/docs/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue b/docs/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue
index 6a9381f8..acd3e82e 100644
--- a/docs/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue	
+++ b/docs/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue	
@@ -272,7 +272,7 @@ const rowStyle: ComputedRef<{ transform: string }> = computed(() => {
     <div class="frameworks-container">
       <!-- Top Row -->
       <div class="framework-row" :style="rowStyle">
-        <FrameworkCard v-for="i in numBlocksPerRow + 2" />
+        <FrameworkCard v-for="_ in numBlocksPerRow + 2" />
       </div>
 
       <!-- Logo Rows -->
@@ -304,7 +304,7 @@ const rowStyle: ComputedRef<{ transform: string }> = computed(() => {
 
       <!-- Bottom Row -->
       <div class="framework-row" :style="rowStyle">
-        <FrameworkCard v-for="i in numBlocksPerRow + 2" />
+        <FrameworkCard v-for="_ in numBlocksPerRow + 2" />
       </div>
     </div>
   </section>
diff --git a/docs/.vitepress/theme/components/landing/4. community-section/CommunitySection.vue b/docs/.vitepress/theme/components/landing/4. community-section/CommunitySection.vue
index c1d1cbe1..eab4aedb 100644
--- a/docs/.vitepress/theme/components/landing/4. community-section/CommunitySection.vue	
+++ b/docs/.vitepress/theme/components/landing/4. community-section/CommunitySection.vue	
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import CommunityCard, { Testimonial } from './CommunityCard.vue'
-import placeholderAvatar from '/images/community/placeholder.jpg'
 
 const testimonials: Testimonial[] = [
   {
diff --git a/docs/.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue b/docs/.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue
index d8f22d4f..1bfdc8d8 100644
--- a/docs/.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue	
+++ b/docs/.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue	
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useSponsor } from '../../../composables/sponsor'
 import { VPSponsors } from 'vitepress/theme'
 
diff --git a/docs/.vitepress/theme/components/landing/common/SvgNode.vue b/docs/.vitepress/theme/components/landing/common/SvgNode.vue
index 8ac6c76b..1bb35a5a 100644
--- a/docs/.vitepress/theme/components/landing/common/SvgNode.vue
+++ b/docs/.vitepress/theme/components/landing/common/SvgNode.vue
@@ -34,12 +34,12 @@ export interface SvgNodeProps {
   /**
    * The color of the glow effect.
    */
-  glowColor?: string
+  glowColor?: string | undefined
 
   /**
    * The color of the dot.
    */
-  dotColor?: string | boolean
+  dotColor?: string | undefined
 }
 
 const props = withDefaults(defineProps<SvgNodeProps>(), {
diff --git a/docs/.vitepress/theme/composables/sponsor.ts b/docs/.vitepress/theme/composables/sponsor.ts
index 291e716d..40619dd6 100644
--- a/docs/.vitepress/theme/composables/sponsor.ts
+++ b/docs/.vitepress/theme/composables/sponsor.ts
@@ -20,7 +20,7 @@ interface Sponsor {
 }
 
 // shared data across instances so we load only once.
-const data = ref()
+const data = ref<{ tier: string; size: string; items: Sponsor[] }[]>()
 
 const dataHost = 'https://sponsors.vuejs.org'
 const dataUrl = `${dataHost}/vite.json`
diff --git a/docs/.vitepress/theme/composables/useCardAnimation.ts b/docs/.vitepress/theme/composables/useCardAnimation.ts
index 2a6c7c83..13e1f6a8 100644
--- a/docs/.vitepress/theme/composables/useCardAnimation.ts
+++ b/docs/.vitepress/theme/composables/useCardAnimation.ts
@@ -8,7 +8,7 @@ gsap.registerPlugin(ScrollTrigger)
  * A custom hook for animating a card element.
  *
  * @param {HTMLElement | string} el - The element or selector for the element to be animated
- * @param {() => GSAPTimeline | null} animation - A function that returns a GSAP timeline for the animation
+ * @param {() => GSAPTimeline} animation - A function that returns a GSAP timeline for the animation
  * @param {object} options - Options for the animation
  */
 export function useCardAnimation(
diff --git a/docs/.vitepress/vite-env.d.ts b/docs/.vitepress/vite-env.d.ts
new file mode 100644
index 00000000..151aa685
--- /dev/null
+++ b/docs/.vitepress/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
\ No newline at end of file