Fluid Typewriter
A liquid-smooth typewriter effect. A glowing cursor seamlessly glides across the text, intelligently wrapping to new lines and pausing at punctuation, while characters emerge from a deep blur.
Last Modified:Aug 17, 2026
Install
CLI
fluid-typewriter
Or install a specific demo variant:
fluid-typewriter-headline-demo
Or install a specific demo variant:
fluid-typewriter-paragraph-demo
Manual
1. Install Dependencies
Dependencies
2. Add Source Code
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | Required | The full string of text to type out. Supports wrapping. |
as | React.ElementType | "h1" | The HTML tag to render as. |
cursorClassName | string | "bg-primary" | Tailwind class for the blinking cursor. |
cursorYOffset | string | number | "0.1em" | Push the cursor slightly down to account for descenders. |
baseSpeed | number | 0.02 | Speed of the cursor glide per character in seconds. |
variance | number | 0.02 | Human variance applied to the typing speed for realism. |
delay | number | 0 | Delay before the typewriter begins (in seconds). |
viewportOnce | boolean | true | Recommended to keep true to avoid reverse-deletion loops. |
triggerStart | string | "top 90%" | Viewport threshold for when the animation should start. |