Typing Racer
Race a rival car by typing: correct characters drive you forward, mistakes shake. Live WPM and accuracy.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Your car moves with every correct character while the rival drives at a fixed WPM. Ships with dev-themed sentences, or pass your own text.
Installation
$ npm i @guetix/typing-racer
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
Usage
example.tsx
import { TypingRacer } from "@/components/guetix/typing-racer";
export default function Example() {
return <TypingRacer />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Sentence to type. |
| rivalWpm | number | 45 | Rival speed. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- A hidden, labelled input receives typing; stats are announced.