# Typewriter Text
> A sharp terminal-style typewriter that types, holds, accelerates through deletion, and cycles to the next phrase in sync with cursor and progress signals.
Canonical: https://gsapvault.com/effects/typewriter-text
Live demo: https://gsapvault.com/demos/typewriter-text/index.html
| Property | Value |
|----------|-------|
| Type | effect |
| Tier | free |
| Price | Free |
| Difficulty | beginner |
| Plugins | ScrollTrigger |
| Techniques | text-animation, typewriter, scroll-reveal, infinite-loop |
| Uses Lenis | No |
## Overview
A focused typewriter effect that turns one bold line into a paced creative command sequence. GSAP types each phrase character by character, gives it a deliberate hold, then accelerates the delete pass before landing on the next phrase, while optional cursor, status, progress, and background hooks react to the same phase changes. Configuration stays in data attributes and the complete text remains available without JavaScript or motion.
## Features
- Character-by-character typing driven by snapped GSAP proxy tweens
- Accelerating delete pass creates a clear shift in velocity
- Deliberate per-phrase hold prevents a frantic loop
- Optional looping phrases with responsive mobile alternates
- Automatic single-line fitting across every configured phrase
- Per-element speed, delay, hold, delete speed, and cursor controls
- Optional cursor, phase status, and progress hooks for synchronized UI feedback
- ScrollTrigger starts each sequence once when it enters the viewport
- Reduced-motion and no-JavaScript states show the strongest complete phrase
- Custom typewriter:start and typewriter:complete events for integration
## Use Cases
- Creative studio hero statements with terse rotating capabilities
- Developer-tool landing pages with a controlled terminal voice
- Product value propositions that need more character than a crossfade
- Portfolio introductions with a paced command-line reveal
- Section headlines triggered as the reader reaches them
## Vibe-Code Ready Setup
This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.
[How AI-assisted setup works](https://gsapvault.com/vibe-coding)
## How It Works
Each [data-typewriter] element is read into an array of characters and rendered from a proxy value animated by gsap.timeline(). A linear snapped tween creates the rapid type pass, the timeline pauses for the configured hold, and a power3.in delete tween visibly gains speed before the next phrase begins. ScrollTrigger plays the paused sequence once on entry, while gsap.matchMedia() swaps the animation for the original complete phrase when reduced motion is requested; owned timelines, triggers, and replay handlers are removed through the context cleanup.
## Documentation
A scroll-triggered typewriter sequence that types rapidly, holds, accelerates through deletion, and cycles through optional phrases. Cursor, status, progress, and background hooks can react to every phase.
## Quick Start
**1. Add to your HTML ``:**
```html
```
**2. Add before the closing `` tag:**
```html
```
**3. Add `data-typewriter` to text in your ``:**
```html
WE MAKE IDEAS MOVE.
```
The element's complete text is the static fallback. When it reaches 85% of the viewport, the script clears it and types it back once.
## Options
| Attribute | Values | Default | Description |
|---|---:|---:|---|
| `data-type-speed` | Seconds per character | `0.045` | Typing speed; lower values type faster |
| `data-type-delay` | Seconds | `0` | Delay after the element enters the viewport |
| `data-type-cursor` | `true`, `false` | `true` | Adds the generated cursor when no external cursor hook exists |
| `data-type-loop` | Comma-separated phrases | none | Phrases to rotate through after the element's own text |
| `data-type-mobile` | Text | element text | Shorter initial phrase below 600px to preserve a single line |
| `data-type-loop-mobile` | Comma-separated phrases | `data-type-loop` | Shorter looping phrases below 600px |
| `data-type-hold` | Seconds | `1.8` | Time each looping phrase remains complete |
| `data-type-delete-speed` | Multiplier | `0.5` | Delete duration relative to typing; lower is faster |
The original `speed`, `delay`, `cursor`, and looping phrase attributes remain compatible. `hold` and `delete-speed` are optional additions.
## Examples
### Looping Creative Commands
**Add to your HTML ``:**
```html
WE MAKE DIGITAL IDEAS MOVE.
```
The element's own text always runs first. Every phrase types linearly, holds, then deletes with `power3.in` acceleration before the next phrase lands.
### Deliberate One-Time Reveal
**Add to your HTML ``:**
```html
Deliberate, dramatic typing.
```
Omit `data-type-loop` for a one-time scroll-triggered sequence.
### Hide the Generated Cursor
**Add to your HTML ``:**
```html
Clean typing, no cursor.
```
## Optional System Hooks
Wrap the line in `data-typewriter-system` to synchronize your own interface. All hooks are optional.
**Add to your HTML ``:**
```html
DESIGN WITH INTENT
READY
```
During playback, the wrapper's `data-phase` changes between `typing`, `holding`, `deleting`, and `ready`. Use those values in CSS to react without adding more JavaScript:
**Add to your CSS:**
```css
[data-typewriter-system][data-phase="typing"] [data-typewriter-cursor] {
background: lime;
}
[data-typewriter-system][data-phase="deleting"] [data-typewriter-cursor] {
background: cyan;
transform: scaleY(0.45);
}
```
## Generated CSS Classes
| Class | Description |
|---|---|
| `.typewriter__text` | Span containing the animated characters |
| `.typewriter__cursor` | Generated cursor when `data-type-cursor` is enabled |
| `.is-typing` | Applied while characters are being added |
| `.is-deleting` | Applied while characters are being removed |
| `.is-complete` | Applied after a non-looping sequence settles |
## Events
Events bubble from the animated element.
**Add to your JavaScript:**
```javascript
const el = document.querySelector('[data-typewriter]');
el.addEventListener('typewriter:start', (event) => {
console.log('Sequence started:', event.detail.text);
});
el.addEventListener('typewriter:complete', (event) => {
console.log('Phrase complete:', event.detail.text, event.detail.index);
});
```
| Event | Detail | Description |
|---|---|---|
| `typewriter:start` | `{ text }` | Fires when the timeline first begins |
| `typewriter:complete` | `{ text, index }` | Fires whenever a phrase finishes typing |
## Cleanup
The effect stores its GSAP context on `window.gsapContext`. In a page transition or component teardown, call:
**Add to your JavaScript teardown:**
```javascript
window.gsapContext?.revert();
```
This kills the effect's timelines and ScrollTriggers and removes replay listeners.
## Accessibility
- The element's original complete phrase is its no-JavaScript fallback and accessible label.
- Generated character and cursor spans are hidden from assistive technology.
- `prefers-reduced-motion: reduce` skips typing, deletion, cursor motion, and looping, leaving the strongest complete phrase visible.
- Replay uses a native `