@voidzero-dev/vitepress-theme 0.0.11 → 0.0.12

package/components/Eyebrow.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+}>()
+</script>
+
+<template>
+  <section class="wrapper wrapper--ticks border-t p-5 pl-10">
+    <span class="text-nickel dark:text-white text-xs font-medium font-mono uppercase tracking-wide">{{ title }}</span>
+  </section>
+</template>

package/components/Footer.vue

@@ -0,0 +1,44 @@
+<template>
+  <footer class="bg-primary" data-theme="dark">
+    <section class="wrapper">
+      <div class="bg-wine py-16 md:py-30 px-5 md:px-0 overflow-clip flex flex-col items-center justify-center gap-8 md:gap-12">
+        <h2 class="text-white w-full md:w-2xl text-center text-balance">Take your team's productivity to the next level with Vite+</h2>
+      <div class="flex items-center gap-5">
+        <a href="https://tally.so/r/nGWebL" target="_blank" rel="noopener noreferrer" class="button">Register your interest</a>
+        <a href="https://voidzero.dev/posts/announcing-vite-plus?utm_source=viteplusdev&utm_content=bottom_learn_more" target="_blank" rel="noopener noreferrer" class="button">
+          Learn more
+        </a>
+      </div>
+      </div>
+      <div class="px-5 md:px-24 pt-10 md:pt-16 pb-16 md:pb-30 flex flex-col md:flex-row gap-10 md:gap-0 md:justify-between">
+        <div>
+          <p class="text-grey text-xs font-mono uppercase tracking-wide mb-8">Company</p>
+          <ul class="flex flex-col gap-3">
+            <li><a href="https://voidzero.dev/" target="_blank" rel="noopener noreferrer" class="text-white text-base">VoidZero</a></li>
+            <li><a href="https://vite.dev/" target="_blank" rel="noopener noreferrer" class="text-white text-base">Vite</a></li>
+            <li><a href="https://rolldown.rs/" target="_blank" rel="noopener noreferrer" class="text-white text-base">Rolldown</a></li>
+            <li><a href="https://vitest.dev/" target="_blank" rel="noopener noreferrer" class="text-white text-base">Vitest</a></li>
+            <li><a href="https://oxc.rs/" target="_blank" rel="noopener noreferrer" class="text-white text-base">Oxc</a></li>
+          </ul>
+        </div>
+        <div>
+          <p class="text-grey text-xs font-mono uppercase tracking-wide mb-8">Social</p>
+          <ul class="flex flex-col gap-3">
+            <li><a href="https://github.com/voidzero-dev" target="_blank" rel="noopener noreferrer" class="text-white text-base">GitHub</a></li>
+            <li><a href="https://web-cdn.bsky.app/profile/voidzero.dev" target="_blank" rel="noopener noreferrer" class="text-white text-base">Bluesky</a></li>
+            <li><a href="https://x.com/voidzerodev" target="_blank" rel="noopener noreferrer" class="text-white text-base">X.com</a></li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <section class="wrapper wrapper--ticks border-t py-5 px-5 md:px-24">
+      <p class="text-sm">© {{ new Date().getFullYear() }} VoidZero Inc. <span class="hidden sm:inline ">All Rights Reserved.</span></p>
+    </section>
+  </footer>
+</template>
+
+<style scoped>
+
+</style>
+<script setup lang="ts">
+</script>

package/components/Header.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import {useData, useRoute} from 'vitepress'
+
+const {site, theme} = useData()
+const nav = theme.value.nav
+
+const route = useRoute()
+</script>
+
+<template>
+  <header class="wrapper px-6 py-7 flex items-center justify-between">
+    <div class="flex items-center gap-10">
+      <a href="/" class="text-primary dark:text-white font-heading text-lg font-medium">
+        {{ site.title }}
+      </a>
+      <ul class="nav">
+        <li v-for="navItem in nav" :key="navItem.link">
+          <a
+              :class="{ active: route.path === navItem.link }"
+              :href="navItem.link"
+          >
+            {{ navItem.text }}
+          </a>
+        </li>
+      </ul>
+    </div>
+
+    <div class="flex items-center gap-6">
+      <slot name="right-side">
+        <!-- Right-aligned links / calls-to-action -->
+      </slot>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+
+</style>

package/components/RiveAnimation.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import * as rive from "@rive-app/canvas"
+import { ref, onMounted, onUnmounted, computed } from "vue"
+
+interface Props {
+  desktopSrc: string
+  mobileSrc?: string
+  breakpoint?: number
+  stateMachines?: string
+  canvasClass?: string
+  desktopWidth?: number
+  desktopHeight?: number
+  mobileWidth?: number
+  mobileHeight?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  breakpoint: 768, // md breakpoint
+  stateMachines: "State Machine 1",
+  canvasClass: "w-full"
+})
+
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+const containerRef = ref<HTMLElement | null>(null)
+let riveInstance: rive.Rive | null = null
+let hasStarted = ref(false)
+let observer: IntersectionObserver | null = null
+
+const isMobile = ref(false)
+
+const checkMobile = () => {
+  isMobile.value = window.innerWidth < props.breakpoint
+}
+
+const getCurrentSrc = () => {
+  return isMobile.value && props.mobileSrc ? props.mobileSrc : props.desktopSrc
+}
+
+const currentWidth = computed(() => {
+  return isMobile.value && props.mobileWidth ? props.mobileWidth : props.desktopWidth
+})
+
+const currentHeight = computed(() => {
+  return isMobile.value && props.mobileHeight ? props.mobileHeight : props.desktopHeight
+})
+
+const loadAnimation = () => {
+  if (!canvasRef.value || riveInstance) return
+
+  const src = getCurrentSrc()
+
+  riveInstance = new rive.Rive({
+    src,
+    canvas: canvasRef.value,
+    autoplay: false,
+    stateMachines: props.stateMachines,
+    onLoad: () => {
+      riveInstance?.resizeDrawingSurfaceToCanvas()
+    }
+  })
+}
+
+const playAnimation = () => {
+  if (riveInstance) {
+    riveInstance.play()
+  }
+}
+
+const cleanupAnimation = () => {
+  if (riveInstance) {
+    riveInstance.cleanup()
+    riveInstance = null
+  }
+}
+
+const handleResize = () => {
+  const wasMobile = isMobile.value
+  checkMobile()
+
+  // If mobile state changed, reload with correct source
+  if (wasMobile !== isMobile.value) {
+    const wasPlaying = hasStarted.value
+    cleanupAnimation()
+    loadAnimation()
+    if (wasPlaying) {
+      playAnimation()
+    }
+  }
+}
+
+onMounted(() => {
+  checkMobile()
+
+  // Load animation immediately
+  loadAnimation()
+
+  // Set up intersection observer to play animation when in viewport
+  observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting && !hasStarted.value) {
+          hasStarted.value = true
+          playAnimation()
+        }
+      })
+    },
+    {
+      threshold: 0.1 // Start when 10% visible
+    }
+  )
+
+  if (containerRef.value) {
+    observer.observe(containerRef.value)
+  }
+
+  // Listen for window resize to handle breakpoint changes
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  cleanupAnimation()
+
+  if (observer && containerRef.value) {
+    observer.unobserve(containerRef.value)
+    observer.disconnect()
+  }
+
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<template>
+  <div ref="containerRef" class="pointer-events-none touch-none select-none">
+    <canvas
+      ref="canvasRef"
+      :width="currentWidth"
+      :height="currentHeight"
+      :class="canvasClass"
+    />
+  </div>
+</template>
+
+<style scoped>
+</style>

package/components/Terminal.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import {ref, onMounted, onUnmounted} from 'vue'
+import {TabsContent, TabsList, TabsRoot, TabsTrigger} from 'reka-ui'
+import TerminalAnimation1 from "./terminal-animations/TerminalAnimation1.vue";
+import TerminalAnimation2 from "./terminal-animations/TerminalAnimation2.vue";
+import TerminalAnimation3 from "./terminal-animations/TerminalAnimation3.vue";
+import TerminalAnimation4 from "./terminal-animations/TerminalAnimation4.vue";
+import TerminalAnimation5 from "./terminal-animations/TerminalAnimation5.vue";
+import TerminalAnimation6 from "./terminal-animations/TerminalAnimation6.vue";
+import terminalBg from '../assets/terminal-background.jpg';
+
+// Auto-progression configuration
+const AUTO_ADVANCE_DELAY = 1500
+
+// State management
+const activeTab = ref('tab1')
+const autoPlayEnabled = ref(true)
+let autoAdvanceTimeout: ReturnType<typeof setTimeout> | null = null
+
+// Intersection Observer state
+const sectionRef = ref<HTMLElement | null>(null)
+const isVisible = ref(false)
+let observer: IntersectionObserver | null = null
+
+// Tab progression logic
+const tabSequence = ['tab1', 'tab2', 'tab3', 'tab4', 'tab5', 'tab6']
+
+const goToNextTab = () => {
+  const currentIndex = tabSequence.indexOf(activeTab.value)
+  const nextIndex = (currentIndex + 1) % tabSequence.length
+  activeTab.value = tabSequence[nextIndex]
+}
+
+// Handle animation completion
+const onAnimationComplete = () => {
+  if (!autoPlayEnabled.value) return
+
+  // Clear any existing timeout
+  if (autoAdvanceTimeout) {
+    clearTimeout(autoAdvanceTimeout)
+  }
+
+  // Schedule next tab
+  autoAdvanceTimeout = setTimeout(() => {
+    goToNextTab()
+  }, AUTO_ADVANCE_DELAY)
+}
+
+// Handle user interaction with tabs
+const onTabChange = () => {
+  // User clicked a tab, disable auto-play
+  autoPlayEnabled.value = false
+
+  // Clear any pending auto-advance
+  if (autoAdvanceTimeout) {
+    clearTimeout(autoAdvanceTimeout)
+    autoAdvanceTimeout = null
+  }
+}
+
+// Setup Intersection Observer
+onMounted(() => {
+  if (!sectionRef.value) return
+
+  observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting && !isVisible.value) {
+          isVisible.value = true
+          // Disconnect observer after first intersection
+          observer?.disconnect()
+        }
+      })
+    },
+    {
+      threshold: 0.2, // Trigger when 20% of the element is visible
+      rootMargin: '0px'
+    }
+  )
+
+  observer.observe(sectionRef.value)
+})
+
+// Cleanup
+onUnmounted(() => {
+  if (autoAdvanceTimeout) {
+    clearTimeout(autoAdvanceTimeout)
+  }
+  if (observer) {
+    observer.disconnect()
+  }
+})
+</script>
+
+<template>
+  <section
+      ref="sectionRef"
+      :style="{ backgroundImage: `url(${terminalBg})` }"
+      class="wrapper border-t h-[40rem] bg-wine bg-cover bg-top flex justify-center pt-28 overflow-clip">
+    <div
+        :class="[
+          'self-stretch px-4 sm:px-8 py-5 sm:py-7 relative bg-primary rounded-tl-lg rounded-tr-lg inline-flex flex-col justify-start items-start gap-2 overflow-hidden w-[62rem] outline-1 outline-offset-[3px] outline-white/30',
+          'transition-transform duration-1000',
+          isVisible ? 'translate-y-0' : 'translate-y-24'
+        ]"
+        style="transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);">
+      <TabsRoot
+          v-if="isVisible"
+          v-model="activeTab"
+          @update:modelValue="onTabChange"
+      >
+        <TabsList
+          aria-label="features"
+          :class="[
+            'absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center p-1 rounded-md border border-white/10',
+            'transition-transform duration-700 delay-300',
+            isVisible ? 'translate-y-0' : 'translate-y-12'
+          ]"
+          style="transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);">
+          <TabsTrigger value="tab1">
+            new
+          </TabsTrigger>
+          <TabsTrigger value="tab2">
+            dev
+          </TabsTrigger>
+          <TabsTrigger value="tab3">
+            lint
+          </TabsTrigger>
+          <TabsTrigger value="tab4">
+            fmt
+          </TabsTrigger>
+          <TabsTrigger value="tab5">
+            test
+          </TabsTrigger>
+          <TabsTrigger value="tab6">
+            build
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">
+          <TerminalAnimation1 :on-animation-complete="onAnimationComplete"/>
+        </TabsContent>
+        <TabsContent value="tab2">
+          <TerminalAnimation2 :on-animation-complete="onAnimationComplete"/>
+        </TabsContent>
+        <TabsContent value="tab3">
+          <TerminalAnimation3 :on-animation-complete="onAnimationComplete"/>
+        </TabsContent>
+        <TabsContent value="tab4">
+          <TerminalAnimation4 :on-animation-complete="onAnimationComplete"/>
+        </TabsContent>
+        <TabsContent value="tab5">
+          <TerminalAnimation5 :on-animation-complete="onAnimationComplete"/>
+        </TabsContent>
+        <TabsContent value="tab6">
+          <TerminalAnimation6 :on-animation-complete="onAnimationComplete"/>
+        </TabsContent>
+      </TabsRoot>
+
+    </div>
+  </section>
+</template>
+
+<style scoped>
+
+</style>

package/components/terminal-animations/TerminalAnimation1.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import Typewriter from 'typewriter-effect/dist/core'
+import {onMounted, onUnmounted} from "vue";
+
+const props = defineProps<{
+  onAnimationComplete?: () => void
+}>()
+
+let typewriter;
+
+onMounted(() => {
+  const target = document.getElementById('terminal-code');
+  typewriter = new Typewriter(target, {
+    loop: false,
+    delay: 1,
+  })
+  typewriter
+      .typeString(`<span>$ vite new vite-plus-demo --template react-ts</span>`)
+      .pauseFor(500)
+      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
+      .pasteString(`<span class="text-aqua">◇  Scaffolding project in ~/vite-plus-demo</span>`)
+      .pauseFor(500)
+      .pasteString(`<span class="text-grey block">|</span>`)
+      .pasteString(`<span class="text-zest block">└  Done.</span>`)
+      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
+      .pauseFor(500)
+      .pasteString(`<span class="block"><span class="text-zest">✓</span> Installing dependencies using default package manager: <span class="text-vite">pnpm@v10.16.1</span></span>`)
+      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
+      .pasteString(`<div class="block"><span class="text-grey">Progress:</span> resolved 1, reused 0, downloaded 0, added 0</div>`)
+      .pasteString(`<div class="block"><span class="text-grey">Packages:</span> <span class="text-vite">+31</span></div>`)
+      .typeString(`<span class="text-grey block">++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>`)
+      .pasteString(`<div class="block"><span class="text-grey">Progress:</span> resolved 31, reused 31, downloaded 0, added 31, <span class="text-zest">done</span></div>`)
+      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
+      .callFunction(() => {
+        if (props.onAnimationComplete) {
+          props.onAnimationComplete()
+        }
+      })
+      .start();
+})
+
+onUnmounted(() => {
+  if(typewriter){
+    typewriter.stop()
+  }
+})
+</script>
+
+<template>
+  <p class="font-mono text-sm text-white leading-[1.5rem]">
+    <span id="terminal-code"></span>
+  </p>
+</template>

package/components/terminal-animations/TerminalAnimation2.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import Typewriter from 'typewriter-effect/dist/core'
+import {onMounted, onUnmounted} from "vue";
+
+const props = defineProps<{
+  onAnimationComplete?: () => void
+}>()
+
+let typewriter;
+
+onMounted(() => {
+  // Get current time for easter egg
+  const now = new Date()
+  let hours = now.getHours()
+  const minutes = now.getMinutes().toString().padStart(2, '0')
+  const seconds = now.getSeconds().toString().padStart(2, '0')
+  const ampm = hours >= 12 ? 'pm' : 'am'
+  hours = hours % 12 || 12
+  const currentTime = `${hours}:${minutes}:${seconds} ${ampm}`
+
+  const target = document.getElementById('terminal-code');
+  typewriter = new Typewriter(target, {
+    loop: false,
+    delay: 1,
+  })
+  typewriter
+      .typeString(`<span>$ vite dev</span>`)
+      .pauseFor(200)
+      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
+      .pasteString(`<div class="block text-grey"><span class="text-vite">VITE+ v1.0.0</span> ready in <span class="text-white font-medium">65</span> ms</div>`)
+      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
+      .pauseFor(500)
+      .pasteString(`<div class="block"><span class="text-vite">  →  Local:   </span><span class="text-aqua">http://localhost:5173/</span></div>`)
+      .pasteString(`<div class="block text-grey">→  Network: use <span class="text-white font-medium">--host</span> to expose</div>`)
+      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
+      .pauseFor(1500)
+      .pasteString(`<div class="block text-grey">${currentTime} <span class="text-aqua">[vite]</span> (client) <span class="text-vite">hmr update</span> /src/App.tsx</div>`)
+      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
+      .callFunction(() => {
+        if (props.onAnimationComplete) {
+          props.onAnimationComplete()
+        }
+      })
+      .start();
+})
+
+onUnmounted(() => {
+  if(typewriter){
+    typewriter.stop()
+  }
+})
+</script>
+
+<template>
+  <p class="font-mono text-sm text-white leading-[1.5rem]">
+    <span id="terminal-code"></span>
+  </p>
+</template>

package/components/terminal-animations/TerminalAnimation3.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import Typewriter from 'typewriter-effect/dist/core'
+import {onMounted, onUnmounted} from "vue";
+
+const props = defineProps<{
+  onAnimationComplete?: () => void
+}>()
+
+let typewriter;
+
+onMounted(() => {
+    const target = document.getElementById('terminal-code');
+  typewriter = new Typewriter(target, {
+    loop: false,
+    delay: 1,
+  })
+  typewriter
+      .typeString(`<span>$ vite lint</span>`)
+      .pauseFor(200)
+      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
+      .pasteString(`<div class="block text-grey"><span class="text-vite">VITE+ v1.0.0</span> <span class="text-aqua">lint</span></div>`)
+      .pauseFor(500)
+      .pasteString(`<div class="block text-grey">Found <span class="text-white">0 warnings</span> and <span class="text-white">0 errors</span>.</div>`)
+      .pasteString(`<div class="block text-grey"><span class="text-zest">✓</span> Finished in  <span class="text-white">1ms</span> on <span class="text-white">3 files</span> with <span class="text-white">88 rules</span> using <span class="text-white">10 threads</span>.</div>`)
+      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
+      .callFunction(() => {
+        if (props.onAnimationComplete) {
+          props.onAnimationComplete()
+        }
+      })
+      .start();
+})
+
+onUnmounted(() => {
+  if(typewriter){
+    typewriter.stop()
+  }
+})
+</script>
+
+<template>
+  <p class="font-mono text-sm text-white leading-[1.5rem]">
+    <span id="terminal-code"></span>
+  </p>
+</template>

package/components/terminal-animations/TerminalAnimation4.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import Typewriter from 'typewriter-effect/dist/core'
+import {onMounted, onUnmounted} from "vue";
+
+const props = defineProps<{
+  onAnimationComplete?: () => void
+}>()
+
+let typewriter;
+
+onMounted(() => {
+    const target = document.getElementById('terminal-code');
+  typewriter = new Typewriter(target, {
+    loop: false,
+    delay: 1,
+  })
+  typewriter
+      .typeString(`<span>$ vite fmt</span>`)
+      .pauseFor(200)
+      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
+      .pasteString(`<div class="block text-grey"><span class="text-vite">VITE+ v1.0.0</span> <span class="text-aqua">fmt</span></div>`)
+      .pauseFor(500)
+      .pasteString(`<div class="block">src/App.css <span class="text-aqua">0ms</span> <span class="text-grey">(unchanged)</span></div>`)
+      .pasteString(`<div class="block">src/App.tsx <span class="text-aqua">1ms</span></div>`)
+      .pasteString(`<div class="block">src/index.css <span class="text-aqua">0ms</span> <span class="text-grey">(unchanged)</span></div>`)
+      .pasteString(`<div class="block">src/main.tsx <span class="text-aqua">1ms</span></div>`)
+      .pasteString(`<div class="block">src/vite-env.d.ts <span class="text-aqua">0ms</span> <span class="text-grey">(unchanged)</span></div>`)
+      .pasteString(`<div class="block"><span class="text-zest">✓</span> Formatted <span class="text-aqua">2 files</span> in <span class="text-aqua">2ms</span>.</div>`)
+      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
+      .callFunction(() => {
+        if (props.onAnimationComplete) {
+          props.onAnimationComplete()
+        }
+      })
+      .start();
+})
+
+onUnmounted(() => {
+  if(typewriter){
+    typewriter.stop()
+  }
+})
+</script>
+
+<template>
+  <p class="font-mono text-sm text-white leading-[1.5rem]">
+    <span id="terminal-code"></span>
+  </p>
+</template>

package/components/terminal-animations/TerminalAnimation5.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import Typewriter from 'typewriter-effect/dist/core'
+import {onMounted, onUnmounted} from "vue";
+
+const props = defineProps<{
+  onAnimationComplete?: () => void
+}>()
+
+let typewriter;
+
+onMounted(() => {
+    const target = document.getElementById('terminal-code');
+  typewriter = new Typewriter(target, {
+    loop: false,
+    delay: 1,
+  })
+  typewriter
+      .typeString(`<span>$ vite test</span>`)
+      .pauseFor(200)
+      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
+      .pasteString(`<div class="block"><span class="text-vite">VITE+ v1.0.0</span> <span class="text-aqua">test</span> RUN ~/vite-plus-demo</div>`)
+      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
+      .pauseFor(300)
+      .pasteString(`<div class="block"><span class="text-zest">✓</span> test/hello.spec.ts <span class="text-grey">(1 test)</span> <span class="text-zest">1ms</span></div>`)
+      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
+      .pasteString(`<div class="block text-grey">Test Files <span class="text-zest">1 passed</span> <span class="text-grey">(1)</span></div>`)
+      .pasteString(`<div class="block text-grey">Tests <span class="text-zest">1 passed</span> <span class="text-grey">(1)</span></div>`)
+      .pasteString(`<div class="block text-grey">Start at <span class="text-white">00:13:44</span></div>`)
+      .pasteString(`<div class="block text-grey">Duration <span class="text-white">199ms</span> <span class="text-grey">(transform 13ms, setup 0ms, collect 8ms, tests 1ms, environment 0ms, prepare 33ms)</span></div>`)
+      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
+      .callFunction(() => {
+        if (props.onAnimationComplete) {
+          props.onAnimationComplete()
+        }
+      })
+      .start();
+})
+
+onUnmounted(() => {
+  if(typewriter){
+    typewriter.stop()
+  }
+})
+</script>
+
+<template>
+  <p class="font-mono text-sm text-white leading-[1.5rem]">
+    <span id="terminal-code"></span>
+  </p>
+</template>