——Text · Free
Typewriter
Types and deletes a rotating list of words on a loop. The classic hero hook, zero deps.
|
import { useEffect, useState } from "react";
export function Typewriter({ words = ["build.", "ship.", "repeat."] }) {
const [sub, setSub] = useState(""); const [i, setI] = useState(0);
const [del, setDel] = useState(false);
useEffect(() => {
const w = words[i % words.length];
if (!del && sub === w) { const t = setTimeout(() => setDel(true), 1100); return () => clearTimeout(t); }
if (del && sub === "") { setDel(false); setI((p) => p + 1); return; }
const t = setTimeout(() => setSub((p) => del ? p.slice(0, -1) : w.slice(0, p.length + 1)), del ? 45 : 100);
return () => clearTimeout(t);
}, [sub, del, i, words]);
return <span className="font-mono text-2xl">{sub}<span className="animate-pulse">|</span></span>;
}How it works
Typewriter is a hand-built text component for React, styled with Tailwind and animated with Framer Motion — no heavy dependency tree, no 60-package install. Drop it in, keep your bundle lean, and it stays performant on real devices. It's free — copy the code above and ship it.
← Browse all components