Typewriter Text

type x cursor

Typewriter effect with blinking cursor. From Cult UI.

texttypewritercursorcultui

Code

text-typewriter.tsx

"use client";
import { useEffect, useState } from "react";

export function Typewriter({ text }: { text: string }) {
  const [out, setOut] = useState("");
  useEffect(() => {
    let i = 0;
    const t = setInterval(() => {
      if (i <= text.length) { setOut(text.slice(0, i)); i++; }
      else clearInterval(t);
    }, 80);
    return () => clearInterval(t);
  }, [text]);
  return <span className="font-mono"><span>{out}</span><span className="animate-pulse">|</span></span>;
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Typewriter Text component and wire it to my accent.”