Text Generate Typewriter
A typewriter effect with realistic mechanical keyboard sounds. Types words character by character with key down/up audio feedback, backspaces through text, and ends with a blinking cursor.
We help you build apps that are
We help you build apps that are production ready, design first, performant, and money machines.
Installation
Add sound file
Download the sound file and place it in your public/sounds/ folder:
- sound.ogg - Audio sprite file containing all key sounds
Each character types with a realistic key-down sound, followed by a key-up sound when the character appears. The component uses an audio sprite containing mechanical keyboard samples for every letter.
When a word completes, the component pauses, then plays a backspace key-down sound and rapidly deletes characters. The backspace key-up sound plays once all characters are removed, simulating a press-and-hold deletion.
The final word stays on screen with a period typed at the end. The cursor then blinks at a comfortable 530ms interval.
Animation only triggers when the component enters the viewport (IntersectionObserver with 0.1 threshold) and runs exactly once.
More from Text Animations
Included with All-Access
One payment unlocks the code for this block and every other block, template and page.
Get All-AccessExplore more
About this block
Installation
Each character types with a realistic key-down sound, followed by a key-up sound when the character appears. The component uses an audio sprite containing mechanical keyboard samples for every letter.
When a word completes, the component pauses, then plays a backspace key-down sound and rapidly deletes characters. The backspace key-up sound plays once all characters are removed, simulating a press-and-hold deletion.
The final word stays on screen with a period typed at the end. The cursor then blinks at a comfortable 530ms interval.
Animation only triggers when the component enters the viewport (IntersectionObserver with 0.1 threshold) and runs exactly once.