Typewriter Text
A free typewriter text effect with a blinking block cursor, built on GSAP.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- GSAP
- 2 runtime packages
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 GSAP tween that starts once the wrapper scrolls into view and styled with Tailwind.
The full string is rendered in the server HTML and an invisible sizer reserves the finished box, so crawlers, no-JS visitors and reduced-motion users always get the complete copy and layout never shifts while typing. The wrapper carries an aria-label with the full string while the typing node is hidden from assistive technology, and one second after the last character lands the cursor stops blinking and hides.
Template Empire
The headline types itself with a blinking block cursor once it scrolls into view, then the cursor bows out. Enable reduced motion and the finished line is simply here.
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 wrapper element carries an aria-label with the full string and the node whose characters mutate is hidden from assistive technology, so screen readers announce one stable string and never hear the partial text. With reduced motion enabled the full string renders immediately with no typing and the cursor stays hidden, and the layout never shifts because an invisible duplicate reserves the finished box.
- 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.