Back to Gallery

TYPEWRITER EFFECT

Classic terminal-style text animations

> Simple Typewriter

> Code Typewriter

// Initialize function
function typeWriter() {
const text = "Hello World";
let index = 0;
return text;
}

> Glitch Typewriter

> Infinite Loop

> Rainbow Typewriter

Settings

Typing Speed: 50ms
Delete Speed: 30ms
Pause Duration: 1500ms

> Implementation

// Typewriter Effect Implementation
class TypeWriter {
    constructor(element, text, speed = 50) {
        this.element = element;
        this.text = text;
        this.speed = speed;
        this.index = 0;
        this.isTyping = false;
    }
    
    type() {
        if (this.index < this.text.length) {
            this.element.textContent += this.text.charAt(this.index);
            this.index++;
            setTimeout(() => this.type(), this.speed);
        }
    }
    
    delete() {
        if (this.element.textContent.length > 0) {
            this.element.textContent = 
                this.element.textContent.slice(0, -1);
            setTimeout(() => this.delete(), this.speed / 2);
        }
    }
    
    reset() {
        this.element.textContent = '';
        this.index = 0;
    }
}
animation: blink 1s infinite; vertical-align: text-bottom; } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* Different Typewriter Styles */ .typewriter-simple { color: #00ff00; } .typewriter-matrix { color: #00ff00; text-shadow: 0 0 5px #00ff00; background: linear-gradient(180deg, #00ff00 0%, #003300 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .typewriter-glitch { position: relative; color: #fff; } .typewriter-glitch::before, .typewriter-glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .typewriter-glitch::before { animation: glitch-1 0.3s infinite; color: #00ffff; z-index: -1; } .typewriter-glitch::after { animation: glitch-2 0.3s infinite; color: #ff00ff; z-index: -2; } @keyframes glitch-1 { 0%, 100% { clip-path: inset(0 0 0 0); } 25% { clip-path: inset(20% 0 40% 0); transform: translate(-2px, 2px); } 50% { clip-path: inset(60% 0 10% 0); transform: translate(2px, -2px); } 75% { clip-path: inset(0 0 70% 0); transform: translate(-1px, 1px); } } @keyframes glitch-2 { 0%, 100% { clip-path: inset(0 0 0 0); } 25% { clip-path: inset(70% 0 0 0); transform: translate(1px, -1px); } 50% { clip-path: inset(10% 0 60% 0); transform: translate(-1px, 2px); } 75% { clip-path: inset(40% 0 20% 0); transform: translate(2px, 1px); } } /* Multi-line Typewriter */ .code-typewriter { font-family: 'Fira Code', 'Courier New', monospace; font-size: 1rem; } .code-line { margin: 0.5rem 0; opacity: 0; } .code-line.typed { opacity: 1; } .keyword { color: #ff79c6; } .string { color: #f1fa8c; } .comment { color: #6272a4; } .function { color: #50fa7b; } .number { color: #bd93f9; } /* Controls */ .controls { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 2rem 0; } .btn { padding: 0.75rem 1.5rem; background: transparent; border: 1px solid #00ff00; color: #00ff00; border-radius: 0.25rem; cursor: pointer; transition: all 0.3s ease; font-family: 'Courier New', monospace; } .btn:hover { background: #00ff00; color: #000; box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); } /* Settings */ .settings { background: #1a1a1a; border: 1px solid #00ff00; border-radius: 0.5rem; padding: 1.5rem; margin: 2rem 0; } .setting-row { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; } .setting-label { min-width: 150px; } .slider { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; background: #333; outline: none; border-radius: 2px; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: #00ff00;