Typing Words cycles through a list of words letter by letter, but instead of a plain backspace wipe each character flips out with a blur and 3D rotation. The word list, cycle speed, and text styles are props. Built with Framer Motion and Tailwind CSS. A natural fit for hero headlines that rotate roles or features, such as "Build landing pages, dashboards, docs" with one word swapping at a time.

Installation

Usage

import { TypingWords } from "@/components/ui/typing-words";

<h1 className="text-5xl font-bold">
  Ship faster with{" "}
  <TypingWords
    words={["less code", "clean design", "pure motion", "zero config"]}
    startIndex={1}
    typingSpeed={70}
    deletingSpeed={35}
  />
</h1>

Props