Typing Animation

Characters appearing in typed animation

View source on GitHub

<script setup lang="ts">
import TypingAnimation from "@/components/spark-ui/typing-animation/typing-animation.vue";
</script>

<template>
  <div class="grid place-items-center min-h-screen w-full">
    <TypingAnimation class="text-4xl font-bold text-black dark:text-white" text="Typing Animation" />
  </div>
</template>

Installation

Copy and paste the following code into your project:

typing-animation.vue

<script setup lang="ts">
import { computed, onMounted, 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("");

onMounted(() => {
  watch(
    () => [props.text, props.duration] as const,
    ([text, duration], _previous, onCleanup) => {
      displayedText.value = "";
      if (!text) return;

      let index = 0;
      const timer = setInterval(() => {
        displayedText.value = text.slice(0, ++index);
        if (index >= text.length) clearInterval(timer);
      }, duration);
      onCleanup(() => clearInterval(timer));
    },
    { immediate: true },
  );
});

const className = computed(() =>
  cn(
    "font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm dark:text-white",
    props.class,
  ),
);
</script>

<template>
  <h1 :class="className">
    {{ displayedText }}
  </h1>
</template>

Props

Prop	Type	Description	Default
class	string	The class for the component	""
duration	number	The duration to wait in between each char type.	300
text	string	Text to animate.	""

Typing starts empty after mount. Changing text or duration cancels the current sequence and restarts from the first character; removing the component cancels its timer.