184 Components
Typewriter Cursor Effect
TextRotating multi-phrase typewriter effect with humanized typing rhythms, backspace cadence, and an animated blinking beam cursor.
Build |
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/typewriter-cursor-effect.json"
Props
TypeScript props supported by <TypewriterCursorEffect />.
| Prop | Type | Default | Description |
|---|---|---|---|
| words | string[] | — | Array of phrases to cycle through. |
| typeSpeed | number | 80 | Typing delay per character in milliseconds. |
| deleteSpeed | number | 40 | Backspacing delay per character in milliseconds. |
| delayBetween | number | 1800 | Pause duration before backspacing a completed phrase. |
| cursorChar | string | "|" | Cursor character glyph. |
Key Features
- Humanized typing and accelerated backspacing intervals.
- Blinking cursor beam animation with custom glyph support.
- Infinite rotation through array of headline phrases.
- Graceful reduced-motion fallback that displays the initial phrase statically.
Keyboard & Accessibility
- Continuous readable inline text structure.
- Respects prefers-reduced-motion to avoid distracting motion.