Typewriter
A 1920s typewriter you actually type on — moving carriage, uneven ink, margin bell, carriage return.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Click and type: each key strikes, the paper carriage shifts one character, ink density varies per letter, a bell rings near the margin and Enter throws the carriage back. Sounds are synthesized with Web Audio.
Installation
$ npx shadcn@latest add https://guetix.com/r/typewriter.json
Uses the shadcn CLI. It creates components/guetix/typewriter.tsx and installs nothing else.
Usage
example.tsx
import { Typewriter } from "@/components/guetix/typewriter";
export default function Example() {
return <Typewriter />;
}
Museum & archive sitesWriters' portfoliosContact forms with character
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01Ink unevenness is deterministic per position (no flicker on re-render).
- 02The bell and the type strike are synthesized, so there are no audio files.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| initial | string | — | Text already on the page. |
| cols | number | 34 | Characters per line. |
| sound | boolean | true | Synthesized sounds. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- A hidden, labelled textarea receives keystrokes (works with screen readers).