Typewriter
A smooth typewriter effect that cycles through configurable phrases with realistic typing and deleting animation. Perfect for hero sections, landing pages, or any heading that needs dynamic rotating text.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
typewritertexttypingphrases
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A smooth typewriter effect that cycles through phrases with realistic typing and deleting animation.
CSS
css
.tw { font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 24px; color: #3b82f6; white-space: nowrap; }
.tw .cursor { animation: blink 0.6s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<span class="tw"><span id="txt"></span><span class="cursor">|</span></span>Full Source
html
<!DOCTYPE html>
<html>
<head>
<style>
.tw { font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 24px; color: #3b82f6; white-space: nowrap; }
.tw .cursor { animation: blink 0.6s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style>
</head>
<body>
<span class="tw"><span id="txt"></span><span class="cursor">|</span></span>
<script>
var phrases = ["Welcome to Grepped", "Build awesome animations.", "Customize everything."];
var speed = 100;
var deleteSpeed = 50;
var delay = 1500;
var pi = 0, ci = 0, deleting = false;
var el = document.getElementById("txt");
function tick() {
var phrase = phrases[pi];
if (!deleting) {
if (ci < phrase.length) {
el.textContent += phrase[ci];
ci++;
setTimeout(tick, speed);
} else {
setTimeout(function(){ deleting = true; tick(); }, delay);
}
} else {
if (el.textContent.length > 0) {
el.textContent = el.textContent.slice(0, -1);
setTimeout(tick, deleteSpeed);
} else {
deleting = false;
ci = 0;
pi = (pi + 1) % phrases.length;
setTimeout(tick, speed);
}
}
}
tick();
</script>
</body>
</html>