TypeWriter
Classic typewriter effect cycles through words with a blinking cursor.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| words | string[] | ["Design.", "Build.", "Ship.", "Scale."] | Array of words to cycle through |
| typingSpeed | number | 80 | Milliseconds per character when typing |
When to Use
A versatile staple for hero sections, CTAs, and any context where you want to cycle through multiple values or actions dynamically.
Best Practices
Keep words short (1-2 words) for the smoothest effect. Use words that share a grammatical structure for cohesive reading.
Why This Component Matters
Typewriter effects communicate dynamism and list multiple value propositions without cluttering the layout.
FAQ
QCan I control the delete speed?
Deleting runs at half the typing speed automatically for a natural feel.
QHow long does it pause between words?
1800ms pause after each word is fully typed before deleting begins.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.