14 CSS Typewriter Effect Designs

A CSS typewriter effect animates text appearing one character at a time, simulating the rhythm of a real typewriter or terminal prompt. The canonical pure-CSS recipe (Demo #01) uses three CSS primitives layered together: (1) overflow: hidden; white-space: nowrap on the text element clips characters that haven't been revealed yet, (2) @keyframes animating width: 0 → 22ch using steps(22) timing — the steps() function produces discrete jumps rather than smooth interpolation, so each step reveals exactly one more character, (3) a second border-right: 3px solid animation toggling between an accent colour and transparent with steps(2) creates the hard on/off blink of a terminal cursor. Both animations run on the same element. Key insight: the ch unit is the width of the 0 character in the current font — combined with steps(), this gives pixel-perfect character-by-character snapping in any monospace font. Zero JavaScript, zero dependencies, ~30 lines of CSS total. The Animated steps() Cursor demo (#01) is the canonical reference everyone reaches for first.

Decision rule by intent. Hero headline / above-the-fold: Demo #01 (steps() Cursor) for the classic terminal feel, Demo #08 (Variable Font Weight Morph) for a premium SaaS subtle effect, Demo #06 (SVG stroke-dashoffset) for handwritten editorial. Landing page subhead: Demo #03 (Word Swap Loop — Designer / Developer / Creator) for the rotating-noun pattern Stripe / Vercel / Linear use, Demo #02 (Multi-line Stagger) for 3-line opening copy. Code demo / docs / IDE replica: Demo #04 (Neon Terminal) for cyberpunk dev tools, Demo #13 (Code Editor Syntax) for tutorial sites and SaaS marketing where you show code typing itself. Brand / portfolio: Demo #07 (Gradient Highlight Sweep) for modern luxury, Demo #11 (Matrix Scramble Decode) for tech / Web3 / cyber brands, Demo #12 (Glitch on Type) for gaming / esports. Scroll storytelling: Demo #14 (Scroll-Triggered Word Reveal) types text as the user scrolls — perfect for long-read landing pages and case studies. Pure HTML/CSS sites (no JS allowed): pick from demos 01–09 — all nine are zero-JavaScript. Marketing experiment / A-B test: Demo #03 (Word Swap) is the highest-converting hero pattern in 2024-2026 SaaS data — replacing static headlines with a rotating-noun typewriter lifted CTA click-through 8-15% across Optimizely / VWO case studies.

Pure CSS works for: single-string typewriters with a known character count (Demo #01), multi-line stagger with fixed text (#02), infinite word-swap loops with a small fixed word list (#03), clip-path reveals (#05), SVG stroke-dashoffset drawing (#06), gradient sweeps (#07), variable-font morphs (#08), per-character span stagger (#09). All nine pure-CSS demos in this collection achieve their effect without any JavaScript. JavaScript is required for: dynamic text that changes at runtime (user input, fetched content, randomized strings — Demo #10), Matrix-style scramble decode where intermediate characters are random glyphs that converge to the target (#11), glitch effects that need RGB-channel pseudo-elements driven by typing position (#12), syntax-highlighted code that needs token-by-token coloring as it types (#13), and scroll-driven typewriters that progress based on IntersectionObserver or scroll-timeline (#14). Modern alternative (Chrome 115+, Safari 26+, Firefox 134+): CSS scroll-driven animations via animation-timeline: scroll() let you do scroll-triggered typewriters in pure CSS too — Demo #14 includes a commented-out scroll-driven-animations version next to its IntersectionObserver implementation. Choose based on whether your text is fixed at build time (CSS) or generated at runtime (JS).

Typed.js (~9.5KB minified, ~250K weekly downloads): the most popular JS typewriter library, supports loops + multiple strings + custom cursors + smart backspacing. TypeIt.js (~13KB minified, ~150K weekly downloads): more configurable than Typed.js, supports rich HTML strings, function callbacks per character, fluent chaining API. typewriter-effect (npm, ~5KB): the most popular React wrapper for vanilla typewriter logic. react-typewriter-effect: similar, React-specific. What you gain by using a library: dynamic string lists, fluent API, backspace + delete behaviors, easier integration with React/Vue state, well-tested edge cases. What you LOSE: ~5-15KB of JavaScript bundle weight per page, an external dependency to update + audit for CVEs, slower First Contentful Paint and Largest Contentful Paint (the library has to download + parse + execute before the text appears). What this collection gives you: the same effect in 30 lines of CSS that ship inline with your HTML — zero bundle cost, zero npm dependency, zero CVE surface, faster FCP/LCP, no library hydration delay. For 90% of marketing use cases (one or two strings, no runtime mutation), the CSS approach wins on every Core Web Vitals dimension. Reserve Typed.js / TypeIt for app dashboards where the text legitimately needs runtime mutation.

Three accessibility concerns matter for typewriter effects. 1. Motion sensitivity: ~35% of adults have some level of motion sensitivity — vestibular disorders, migraine triggers, ADHD-related visual processing. Typewriter animations are textbook motion that can trigger these. Fix: every demo in this collection wraps its @keyframes in @media (prefers-reduced-motion: reduce) { animation: none; } so users with that OS setting see the final text instantly, no typing animation. WCAG 2.3.3 (Animation from Interactions) explicitly recommends this. 2. Screen readers: VoiceOver, NVDA, JAWS, and Narrator may either announce each character as it appears (annoying) or announce the empty element + final text (correct). Default behavior varies. Fix: set aria-live='polite' on the typewriter container so the final text is announced once after the animation completes, NOT per-character. For long strings, use aria-label with the full text + aria-hidden='true' on the visual typewriter so screen readers get the complete message immediately and sighted users get the animation. 3. Cumulative Layout Shift (CLS): a typewriter that animates text width can cause page reflow as characters appear — especially bad on hero sections that ship without the final string reserved. Fix: reserve the final character count with width: 22ch on the container (matching the steps() count), or wrap in a parent with explicit min-width matching the longest variant. Regulatory frameworks: EU EAA (June 2025), US Section 508, Canada ACA, UK Equality Act all require WCAG 2.2 AA compliance.

None of Tailwind UI, shadcn/ui, Material UI / MUI, Chakra UI, Ant Design, Mantine, or HeadlessUI ship a first-class typewriter component — typewriters are typically built per-project using either: (a) the pure-CSS recipe from this collection (Demo #01), (b) a small custom React hook (Demo #10's pattern, ~20 lines), or (c) the Typed.js / TypeIt.js wrappers. Tailwind v3 / v4: you can compose the CSS pattern using arbitrary-value utilities — w-[0ch] animate-[typing_2s_steps(22)_forwards] border-r-2 overflow-hidden whitespace-nowrap — but you still need a custom @keyframes typing in your stylesheet because Tailwind doesn't ship width-to-22ch animation out of the box. Our CSS to Tailwind converter handles the conversion automatically. shadcn/ui (React + Radix Primitives): does not ship a typewriter; the community pattern is to wrap react-typewriter-effect or write a custom hook. Animation libraries: Framer Motion's animate() can drive a per-character variant; GSAP's SplitText plus TextPlugin can do glitch + scramble effects but adds ~30KB. The pure-CSS approach in this collection ships zero JavaScript for nine of the 14 demos — for typewriter-driven hero headlines on marketing pages, this is the lowest-overhead approach.

CLS is one of three Core Web Vitals — Google measures it on every Lighthouse / PageSpeed Insights audit. Typewriters are a notorious cause of CLS spikes: the text container starts at width: 0 and grows to fit the final string. If the parent layout reflows around it, every element below shifts position once per animation step. The fix: reserve the final character width before the animation starts. (1) For single-string typewriters: set width: 22ch on the parent that contains the typewriter, OR set min-width: 22ch on the typewriter element itself with the animation running on a child wrapper. (2) For word-swap loops with variable-length words: use the longest word's character count (e.g. if cycling through 'Designer / Developer / Creator', use width: 9ch matching 'Developer'). (3) For multiline typewriters: explicit height on the parent reserves vertical space. (4) For JS character-injection (Demo #10): pre-render the final string with visibility: hidden via a sibling element so the layout reserves space, then animate a visible sibling on top. Tools: Chrome DevTools Performance Insights (Layout Shift sections), Lighthouse, Web Vitals extension, Core Web Vitals report in Google Search Console. Demos in this collection are designed to avoid CLS by default — see the comment markers in each demo's CSS.

CSS animations interpolate between keyframe values using a timing function. The default linear produces smooth continuous interpolation; ease / ease-in / ease-out produce smooth curves. steps(N, end) is different — it produces N discrete jumps rather than smooth interpolation. So animating width: 0 → 22ch with steps(22) produces 22 discrete width values (0ch, 1ch, 2ch, ... 22ch), each held for 1/22 of the total duration. The text container then jumps from showing 0 characters to 1, to 2, etc. — exactly like a typewriter. Common timing variants: steps(N, start) shows the first step at t=0 (immediate first character); steps(N, end) shows the first step at t=1/N (1-character delay before the first appears) — for typewriter you typically want steps(N, end) or just steps(N) which defaults to end. Pitfall: setting steps(N) where N != character count produces uneven character-reveal timing. Match steps to character count exactly. For variable-length strings (word swap, dynamic content), this means recomputing or using JS character injection (Demo #10). Modern alternative: animation-timing-function: linear(...) with an animation-timeline of scroll() lets you do scroll-driven character reveals via steps() too — see Demo #14.

Two common Safari-specific traps. 1. ch unit calculation: Safari calculates 1ch against the OS-rendered 0 glyph metrics, which can differ subtly from Chrome's rendering — especially with system fonts (San Francisco on macOS vs Inter on Windows). The fix: use a monospace font where ALL characters have identical width (JetBrains Mono, IBM Plex Mono, Geist Mono, Fira Code). With a true monospace font, ch matches every character width exactly, eliminating the Safari/Chrome divergence. 2. steps() + animation-fill-mode: forwards interaction: Safari < 17 has a known bug where animation-fill-mode: forwards combined with steps() sometimes drops the final keyframe state, leaving the typewriter at width: 21ch instead of 22ch. The fix: add animation-fill-mode: both instead of forwards — both applies both 0% and 100% keyframes outside the animation range, which avoids the forwards-only edge case. Demos #01–#09 use both by default for this reason. 3. Variable-font axis animation (Demo #08 — variable-font weight morph): Safari requires the variable font to be fully loaded BEFORE the animation starts, otherwise it falls back to the static weight. Fix: use font-display: block on the variable font's @font-face rule so the page waits for the font before painting — slight FCP cost in exchange for guaranteed rendering.

Yes — all 14 typewriter effects are MIT licensed and free for personal and commercial use, including client projects, SaaS products, design systems, and open-source libraries. The MIT license requires only that you keep the copyright notice if you redistribute the source code as-is; in shipped production HTML / CSS that you've adapted, no visible attribution is needed. If you ship one as part of an open-source UI library or component kit, a one-line credit pointing to https://codefronts.com is appreciated but not legally required. Accessibility: every demo honours prefers-reduced-motion: reduce (animations fall back to instantly-displayed final text), uses semantic HTML, and is designed to work with aria-live regions for screen readers — see FAQ #5 for the full a11y pattern. Verify your specific use case with axe DevTools, Lighthouse, WAVE, or WebAIM contrast checker before shipping to EU EAA / US Section 508 / Canada ACA / UK Equality Act audits — the demos are AA-compliant by default but layout-context matters.