Typewriter Text
A free typewriter text effect with a blinking block cursor for React and Next.js.
The Meridian
We publish the documents, not just the story
Every investigation ships with the filings, the disclosure responses and the working data behind it. Members read all of it on the day; it opens to everyone thirty days later.
Customise
Code
<TextTypewriter>
We publish the documents, not just the story
</TextTypewriter>Typewriter Text is a free text effect component for Next.js and React that types your headline one character at a time with a blinking block cursor, driven by a Motion animation that starts once the wrapper scrolls into view and styled with Tailwind. It types whole characters, so an emoji or an accented letter never appears half-typed.
The full string is rendered in the server HTML and stays in the page while it types, with the characters not yet typed transparent rather than removed, so crawlers, no-JS visitors and reduced-motion users always get the complete copy, the text holds its final lines from the first frame, and each character appears exactly where it rests: layout never shifts while typing, in a heading or inline in a paragraph. Screen readers read the full string once, and one second after the last character lands the cursor is removed, without moving the text, and nothing keeps running.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/text-typewriterUsage
import { TextTypewriter } from "@/components/text-typewriter";
export function Example() {
return (
<h1 className="text-5xl font-semibold">
<TextTypewriter speed={33}>Type out your headline</TextTypewriter>
</h1>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | required | The full string; rendered in the SSR HTML and used for aria. |
| as | ElementType | "span" | Wrapper element, e.g. "span", "h1", "h2". |
| speed | number | 33 | Characters per second (about 30ms per character). |
| className | string | undefined | Additional classes merged onto the wrapper. |
Customisation
Typewriter Text deliberately ships without component-level CSS variables. The cursor inherits currentColor, so it always matches your text colour, and the pace is a single prop. Total duration is the string length divided by speed, capped at 2.4 seconds so long headlines never drag:
<TextTypewriter speed={20}>
A slower, more deliberate keystroke rhythm
</TextTypewriter>Frequently asked questions
- Is Typewriter Text free for commercial use?
- Yes. Typewriter Text is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Typewriter Text accessible to screen readers?
- Yes. The whole string is always in the page: the characters not yet typed are transparent, not removed, so screen readers read the full string once and never hear partial text, and nothing is announced as it types. The wrapper carries no aria-label, so any element works, and a heading is named by its string. With reduced motion enabled the full string renders immediately with no typing and the cursor stays hidden, and the layout never shifts because the text holds its final lines from the start. The untyped characters are hidden with the CSS Custom Highlight API, which changes paint and never layout; in a browser without it, the full string is shown at once with no cursor, exactly as with reduced motion.
- How do I change the typing speed?
- Use the speed prop to set characters per second; the default is 33, about 30 milliseconds per character. Total duration is the string length divided by speed, capped at 2.4 seconds, and the cap compresses per-character time on long strings rather than extending it.