Example 1 — Monospace Typewriter
Building AI-powered apps is the future.
Example 2 — Gradient Typewriter
CSS is more powerful than you think.
How it works
width: 0 → Nch animated with steps(N, end) — each step reveals one character. The blinking cursor is a border-right with a separate animation.
Animation speed: 2.8s Cursor style:
Click a prompt to stream it:
Speed: 30ms Variance:
AI
W3Tweaks Assistant
Powered by streaming · JavaScript demo
Online
AI
👋 Hi! I'm a demo AI that streams responses character by character — just like ChatGPT. Ask me anything about CSS, JavaScript, or HTML, or pick a quick question below.
The same sentence streamed at different speeds — notice how natural variance makes slower speeds feel more human.
⚡ Fast 15ms / char
✦ Natural 30ms + variance
🐢 Slow 80ms / char
🎭 Word-by-word 120ms / word