feat: add typing animation component

docs/index.md

@@ -80,3 +80,5 @@ import Demos from './src/components/Demos.vue'
 <demo src="./src/example/orbitingCircles/Demo.vue" />
 
 <demo src="./src/example/meteors/Demo.vue" />
+
+<demo src="./src/example/typingAnimation/Demo.vue" />

docs/src/components/spark-ui/typingAnimation/typing-animation.vue

@@ -0,0 +1,51 @@
+<script setup lang='ts'>
+import { ref, watch } from 'vue'
+import { cn } from '../../../lib/utils'
+
+interface TypingAnimationProps {
+  text: string
+  duration?: number
+  class?: string
+}
+
+const props = withDefaults(defineProps<TypingAnimationProps>(), {
+  duration: 300,
+})
+
+const displayedText = ref('')
+const i = ref(0)
+
+function handleTypingEffect(d: number, n: number) {
+  const typingEffect = setInterval(() => {
+    if (n < props.text.length) {
+      displayedText.value = props.text.substring(0, n + 1)
+      n = n + 1
+    }
+    else {
+      clearInterval(typingEffect)
+    }
+  }, d)
+
+  return () => {
+    clearInterval(typingEffect)
+  }
+}
+
+watch(() => [props.duration, i.value], ([d, n]) => {
+  handleTypingEffect(d, n)
+}, {
+  deep: true,
+  immediate: true,
+})
+
+const className = cn(
+  'font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm',
+  props.class,
+)
+</script>
+
+<template>
+  <h1 :class="className">
+    {{ displayedText ? displayedText : props.text }}
+  </h1>
+</template>

docs/src/example/typingAnimation/Demo.vue

@@ -0,0 +1,7 @@
+<script setup lang='ts'>
+import TypingAnimation from './typing-animation.vue'
+</script>
+
+<template>
+  <TypingAnimation class="text-4xl font-bold text-black" text="Typing Animation" />
+</template>

docs/src/example/typingAnimation/typing-animation.vue

@@ -0,0 +1,51 @@
+<script setup lang='ts'>
+import { ref, watch } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface TypingAnimationProps {
+  text: string
+  duration?: number
+  class?: string
+}
+
+const props = withDefaults(defineProps<TypingAnimationProps>(), {
+  duration: 300,
+})
+
+const displayedText = ref('')
+const i = ref(0)
+
+function handleTypingEffect(d: number, n: number) {
+  const typingEffect = setInterval(() => {
+    if (n < props.text.length) {
+      displayedText.value = props.text.substring(0, n + 1)
+      n = n + 1
+    }
+    else {
+      clearInterval(typingEffect)
+    }
+  }, d)
+
+  return () => {
+    clearInterval(typingEffect)
+  }
+}
+
+watch(() => [props.duration, i.value], ([d, n]) => {
+  handleTypingEffect(d, n)
+}, {
+  deep: true,
+  immediate: true,
+})
+
+const className = cn(
+  'font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm',
+  props.class,
+)
+</script>
+
+<template>
+  <h1 :class="className">
+    {{ displayedText ? displayedText : props.text }}
+  </h1>
+</template>