Typewriter Text

"use client";

import { useEffect, useState } from "react";

const TARGET = "Build something remarkable.";

export function TypewriterText() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = window.setInterval(() => {
      setCount((c) => (c >= TARGET.length + 24 ? 0 : c + 1));
    }, 70);
    return () => window.clearInterval(id);
  }, []);

  return (
    <p className="font-mono text-xl">
      {TARGET.slice(0, Math.min(count, TARGET.length))}
      <span className="ml-0.5 inline-block h-5 w-[2px] animate-pulse bg-amber-500 align-middle" />
    </p>
  );
}