Typewriter

A skeuomorphic 1950s typewriter simulator built as a single-page web app with no build tools or dependencies beyond Google Fonts.

Inspired by the Olivetti/Hermes aesthetic — sage-green chassis, chrome trim, cream paper, and the satisfying clack of each keystroke.

Features

• Full QWERTY on-screen keyboard with clickable keys
• Animated hammer arms that strike on each keypress
• Carriage indicator that advances per character and returns on Enter
• Paper that scrolls upward as you type past the visible area
• Per-character ink opacity variation for an authentic typewritten look
• Procedural Web Audio sound engine: clack on keystrokes, ding + whoosh on carriage return
• CapsLock toggle with visual indicator on the CAPS key
• SOUND/MUTE toggle key
• Backspace support (deletes last character or returns to previous line)
• Tab inserts 4 spaces
• International character support via AltGr

Usage

Open index.html directly in a browser — no server required.

Just start typing. You can also click any key on the on-screen keyboard.

Project Structure

typewriter/
  index.html      # Markup and layout
  css/
    style.css     # All styles and animations
  js/
    main.js       # Keyboard, sound engine, rendering logic
  docs/
    plans/        # Original design and implementation docs

Design

• Chassis: #6b8e7f sage green with #4a6b5f dark trim
• Paper: #f5f0e8 cream with ruled lines and a top curl shadow
• Ink: #1a1a2e near-black, rendered with slight opacity variation (0.82–1.0)
• Fonts: Special Elite for labels, Courier Prime for typed text
• Sound: all audio is synthesized via the Web Audio API — no audio files needed