1f:Tcc52,

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from "vue";

const props = withDefaults(
  defineProps<{
    lines?: string[];
    duration?: number;
    holdDelay?: number;
    loop?: boolean;
    showCursor?: boolean;
    color?: string;
  }>(),
  {
    lines: () => ["Type something."],
    duration: 60,
    holdDelay: 1200,
    loop: true,
    showCursor: true,
    color: "#FF4D8D",
  },
);

type Phase = "typing" | "holding" | "erasing" | "done";

const queue = computed(() => (props.lines.length > 0 ? props.lines : ["Type something."]));
const lineIndex = ref(0);
const length = ref(0);
const phase = ref<Phase>("typing");
const reduced = ref(false);
let timer: ReturnType<typeof setTimeout> | undefined;

const line = computed(() => queue.value[Math.min(lineIndex.value, queue.value.length - 1)] ?? "");
const shown = computed(() => line.value.slice(0, length.value));
const idle = computed(() => phase.value === "holding" || phase.value === "done");
const cursorStyle = computed(() => ({
  background: props.color,
  animation: idle.value && !reduced.value ? "typing-cursor-blink 1s steps(1) infinite" : "none",
  opacity: 1,
}));

function clear() {
  if (timer !== undefined) {
    clearTimeout(timer);
    timer = undefined;
  }
}

function schedule(ms: number, run: () => void) {
  clear();
  timer = setTimeout(run, Math.max(1, ms));
}

function step() {
  const index = Math.min(lineIndex.value, queue.value.length - 1);
  const current = queue.value[index] ?? "";
  const isLast = index === queue.value.length - 1;
  const ms = Math.max(1, props.duration);

  if (phase.value === "typing") {
    if (reduced.value) {
      length.value = current.length;
      phase.value = "holding";
      step();
      return;
    }
    if (length.value < current.length) {
      schedule(ms, () => {
        length.value += 1;
        step();
      });
      return;
    }
    phase.value = "holding";
    step();
    return;
  }

  if (phase.value === "holding") {
    schedule(props.holdDelay, () => {
      phase.value = !props.loop && isLast ? "done" : "erasing";
      step();
    });
    return;
  }

  if (phase.value === "erasing") {
    if (reduced.value) {
      length.value = 0;
      lineIndex.value = (index + 1) % queue.value.length;
      phase.value = "typing";
      step();
      return;
    }
    if (length.value > 0) {
      schedule(ms, () => {
        length.value -= 1;
        step();
      });
      return;
    }
    lineIndex.value = (index + 1) % queue.value.length;
    phase.value = "typing";
    step();
  }
}

function restart() {
  clear();
  lineIndex.value = 0;
  length.value = 0;
  phase.value = "typing";
  step();
}

onMounted(() => {
  reduced.value = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
  step();
});
onUnmounted(clear);
watch(() => [props.lines.join("\n"), props.loop], restart);
</script>

<template>
  <div class="typing-cursor-text">
    <span class="sr-only">{{ line }}</span>
    <span aria-hidden="true" class="typing-cursor-text__text" :style="{ color }">{{ shown }}</span>
    <span v-if="showCursor" aria-hidden="true" class="typing-cursor-text__cursor" :style="cursorStyle" />
  </div>
</template>

<style scoped>
.typing-cursor-text {
  white-space: nowrap;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.25rem;
  line-height: 1.4;
}
.typing-cursor-text__text {
  white-space: pre;
}
.typing-cursor-text__cursor {
  position: relative;
  top: -0.06em;
  margin-left: 2px;
  display: inline-block;
  width: 3px;
  height: 1em;
  border-radius: 1px;
  vertical-align: middle;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@keyframes typing-cursor-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .typing-cursor-text__cursor {
    animation: none !important;
  }
}
</style>

20:Tfeb,

{#if showCursor} {/if}

21:Td6c7,

<script lang="ts">
  import { onDestroy, onMount } from "svelte";

  let {
    lines = ["Type something."],
    duration = 60,
    holdDelay = 1200,
    loop = true,
    showCursor = true,
    color = "#FF4D8D",
  }: {
    lines?: string[];
    duration?: number;
    holdDelay?: number;
    loop?: boolean;
    showCursor?: boolean;
    color?: string;
  } = $props();

  type Phase = "typing" | "holding" | "erasing" | "done";

  let lineIndex = $state(0);
  let length = $state(0);
  let phase = $state<Phase>("typing");
  let reduced = $state(false);
  let timer: ReturnType<typeof setTimeout> | undefined;

  const queue = $derived(lines.length > 0 ? lines : ["Type something."]);
  const line = $derived(queue[Math.min(lineIndex, queue.length - 1)] ?? "");
  const shown = $derived(line.slice(0, length));
  const idle = $derived(phase === "holding" || phase === "done");

  function clear() {
    if (timer !== undefined) {
      clearTimeout(timer);
      timer = undefined;
    }
  }

  function schedule(ms: number, run: () => void) {
    clear();
    timer = setTimeout(run, Math.max(1, ms));
  }

  function step() {
    const index = Math.min(lineIndex, queue.length - 1);
    const current = queue[index] ?? "";
    const isLast = index === queue.length - 1;
    const ms = Math.max(1, duration);

    if (phase === "typing") {
      if (reduced) {
        length = current.length;
        phase = "holding";
        step();
        return;
      }
      if (length < current.length) {
        schedule(ms, () => {
          length += 1;
          step();
        });
        return;
      }
      phase = "holding";
      step();
      return;
    }

    if (phase === "holding") {
      schedule(holdDelay, () => {
        phase = !loop && isLast ? "done" : "erasing";
        step();
      });
      return;
    }

    if (phase === "erasing") {
      if (reduced) {
        length = 0;
        lineIndex = (index + 1) % queue.length;
        phase = "typing";
        step();
        return;
      }
      if (length > 0) {
        schedule(ms, () => {
          length -= 1;
          step();
        });
        return;
      }
      lineIndex = (index + 1) % queue.length;
      phase = "typing";
      step();
    }
  }

  function restart() {
    clear();
    lineIndex = 0;
    length = 0;
    phase = "typing";
    step();
  }

  onMount(() => {
    reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
    step();
  });
  onDestroy(clear);

  let runKey = $derived(lines.join("\n") + "|" + loop);
  let prevKey = runKey;
  $effect(() => {
    if (runKey !== prevKey) {
      prevKey = runKey;
      restart();
    }
  });
</script>

<div class="typing-cursor-text">
  <span class="sr-only">{line}</span>
  <span aria-hidden="true" class="typing-cursor-text__text" style="color: {color}">{shown}</span>
  {#if showCursor}
    <span
      aria-hidden="true"
      class="typing-cursor-text__cursor"
      class:blink={idle && !reduced}
      style="background: {color}"
    ></span>
  {/if}
</div>

<style>
  .typing-cursor-text {
    white-space: nowrap;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 1.25rem;
    line-height: 1.4;
  }
  .typing-cursor-text__text {
    white-space: pre;
  }
  .typing-cursor-text__cursor {
    position: relative;
    top: -0.06em;
    margin-left: 2px;
    display: inline-block;
    width: 3px;
    height: 1em;
    border-radius: 1px;
    vertical-align: middle;
    opacity: 1;
  }
  .typing-cursor-text__cursor.blink {
    animation: typing-cursor-blink 1s steps(1) infinite;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  @keyframes typing-cursor-blink {
    0%,
    49% {
      opacity: 1;
    }
    50%,
    100% {
      opacity: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .typing-cursor-text__cursor {
      animation: none !important;
    }
  }
</style>

Nearby