"The heart of the discerning acquires knowledge, for the ears of the wise seek it out." β Proverbs 18:15
Exploring 3,900+ years of encryption, cryptanalysis, and hidden history.
The Cipher Museum is part digital exhibit, part cipher playground, and part codebreaking classroom exploring 3,900+ years of encryption, cryptanalysis, and hidden history across 140 exhibits and 13 exhibit halls. 110 of the 140 exhibits ship a fully interactive encrypt/decrypt demo or hand-built widget β the remaining 30 are codebreaker biographies and historical context pages. Modern cryptography uses more than ciphers β secure systems combine key exchange, encryption, and hashing.
- Exhibit 140 β Bible Code / ELS (ciphers/bible-code.html): Interactive equidistant letter sequence explorer comparing Genesis/Exodus against length-matched random text with the same letter distribution. Registered in Hall VIII and the museum map.
- Lorenz depth-attack interactive (ciphers/lorenz.html): Two-time-pad crib-drag demo and EnigmaβLorenz comparison table added to the existing Lorenz exhibit.
- Full test audit β resolved 12 pre-existing test failures (enigma.html
data-cipherattribute, bible-code artifact card, heading hierarchy); all eight suites green at 436 + 238 + 1843 + 1730 + 522 + 1735 + 777 + 4897 assertions. - Sitemap expanded to all 172 indexable pages (tools, tours, community, all biographies, and the new exhibit).
- README factual audit: corrected interactive-demo count (110/140), page counts (173), and test assertion totals site-wide.
- Historical Context β When, where, who used it, why
- How It Works β Encryption steps, diagrams, interactive demo
- How It Was Broken β The specific technique, with context
- What It Teaches Modern Crypto β The direct line from this cipher to AES/RSA
The 140-exhibit collection includes 83 working cipher engines plus ~27 hand-built widgets β 110 of the 140 exhibits ship a fully interactive demo, all built in vanilla JavaScript with no frameworks or build tools. The remaining 30 exhibits are codebreaker biographies, historical context pages (e.g. Cabinet Noir, Bletchley Park figures), and a small number of cipher pages not yet wired with a demo.
Type a message, set a key, and watch the cipher work in real time. Demos are dynamically generated by js/demo-loader.js from the engine implementations in js/ciphers/all-engines.js, and the same engines power the Codebreaker's Workbench.
For a sortable, filterable view of every cipher system in the museum (era, type, security, hall, solved status, key method) see the Cipher Comparison Table. For the full 140-exhibit roster including biographies and context pages, see the Museum Map.
- Codebreaker's Workbench β A unified hands-on lab that exposes all 83 cipher engines behind one consistent interface. Pick any cipher from the dropdown, paste your text, set a key (or accept the default), and encrypt/decrypt instantly. Beyond the per-exhibit demos it adds:
- Frequency analyser β letter-frequency histogram with Index of Coincidence and Chi-square against English, useful for detecting monoalphabetic vs. polyalphabetic ciphertext at a glance.
- Kasiski / period detector β repeated-trigram spacing analysis for breaking VigenΓ¨re-family ciphers.
- N-gram & entropy panel β bigram/trigram counts and Shannon entropy for distinguishing transposition (preserves frequencies) from substitution (alters them).
- Side-by-side Encrypt/Decrypt panes with copy-to-clipboard and a swap button so you can iterate on a key without retyping ciphertext.
- Same engine source as the exhibits β the workbench pulls from js/ciphers/all-engines.js, so anything you reproduce here matches every demo on the site.
- Site Search β Search across all 140 exhibits, 13 exhibit halls, codebreaker biographies, cryptanalysis techniques, and the timeline. Index-driven, no backend, deep-link via
?q=. - Cryptanalysis Techniques β 10 interactive techniques: frequency analysis, Kasiski examination, index of coincidence, crib dragging, known-plaintext attack, hill climbing, simulated annealing, stepping-switch cryptanalysis (Purple), HMM/SMT decoding (Copiale), and Chaocipher reconstruction.
- Cipher Challenges β 10 progressive puzzles from Caesar to Enigma with hints and solutions.
- Timeline β Interactive 3,900+-year history with era filtering, scroll-spy, and 50+ clickable exhibit events.
- Comparison Table β Sortable, filterable table comparing the museum collection by type, era, hall, security level, solved status, and key method.
- Cipher Flow Explorer β Visual relationship map between cipher families.
- Museum Map β Architectural floor plan with all exhibit halls and cipher exhibits.
- Guided Tours β Structured learning paths through the collection.
- Glossary β Comprehensive cryptography term reference.
- Further Reading β Canon references, journals, and scholar/source index.
- Community β Discussion space for cipher enthusiasts.
git clone https://github.com/systemslibrarian/cipher-museum
cd cipher-museum
python3 -m http.server 8000 # or just open index.htmlNo build tools. No framework. No dependencies beyond Google Fonts. Pure HTML + CSS + Vanilla JavaScript. GitHub Pages ready.
cipher-museum/
βββ index.html β Entrance Hall (hero + 10 hall cards)
βββ museum-map.html β Interactive floor plan with all exhibits
βββ timeline.html β 3,900+ year timeline with era filtering & scroll-spy
βββ comparison.html β Sortable comparison table across the collection
βββ challenges.html β 10 progressive cipher challenges
βββ glossary.html β Cryptography glossary
βββ cryptanalysis.html β Cryptanalysis Techniques (10 interactive techniques)
βββ cipher-flow.html β Visual cipher family relationships
βββ modern.html β Modern Cryptography overview
βββ favicon.svg β Gold cipher wheel icon
βββ css/
β βββ museum.css β Complete design system (~400 rules)
βββ js/
β βββ nav.js β Navigation system (sticky nav, hamburger, ARIA)
β βββ demo-loader.js β Dynamic demo UI generator for all cipher pages
β βββ ciphers/
β βββ all-engines.js β 83 cipher engine implementations
βββ halls/ β 13 exhibit halls
β βββ ancient.html β Hall I: World Origins of Cryptography
β βββ substitution.html β Hall II: Classical Substitution
β βββ polyalphabetic.html β Hall III: Polyalphabetic Revolution
β βββ transposition.html β Hall IV: Transposition & Fractionation
β βββ military.html β Hall V: Military & Spy Ciphers
β βββ civil-war.html β Special Exhibition: Civil War
β βββ machines.html β Hall VI: Mechanical Machines
β βββ puzzle.html β Hall VII: Puzzle & Novelty
β βββ unbreakable.html β Hall IX: The Unbreakable
β βββ codebreakers.html β Special Exhibition: Hall of Codebreakers
βββ ciphers/ β 140 exhibit pages
β βββ caesar.html β with interactive demo + SVG wheel diagram
β βββ enigma.html β with rotor wiring SVG diagram
β βββ vigenere.html β with tabula recta SVG + Kasiski analysis
β βββ playfair.html β with key square builder SVG
β βββ [130+ additional exhibits]
βββ data/
β βββ artifact-cards.json β Metadata cards (era, family, region, key typeβ¦) for all 140 exhibits
βββ lab/
β βββ workbench.html β Codebreaker's Workbench (all 83 engines in one lab)
βββ tours/ β Guided learning paths
βββ community/ β Community discussion and write-up space
βββ tests/
βββ test-all-engines.js β Engine roundtrip & known-answer tests
βββ test-deep-ciphers.js β Edge cases & stress tests
βββ test-comprehensive.js β Cross-cipher invariants across the collection
βββ test-accessibility.js β ADA / WCAG audit
βββ test-mobile.js β Responsive / mobile audit
βββ test-structural.js β Structural / framing audit
βββ test-demo-pages.js β End-to-end JSDOM simulation of every interactive demo
βββ test-local-links.js β Local href/src link checker
| Element | Value |
|---|---|
| Aesthetic | Smithsonian Dark / Scholarly Gold |
| Display | Cinzel (serif) |
| Body | Cormorant Garamond (serif) |
| Code | JetBrains Mono (monospace) |
| Background | #060608 with subtle radial gold gradients |
| Accent | #C9A84C (gold) with 6 tonal variants |
| Text | #EDE5D4 (headings), #C8C0B0 (body), #ACA4B4 (labels) |
- WCAG AA contrast ratios on all text
- Skip links on every page
- ARIA labels on navigation, demos, and interactive elements
- 44px minimum touch targets on all interactive elements
prefers-reduced-motionsupport- Keyboard navigation throughout
aria-hiddenon decorative SVGs
- Unique meta descriptions on every page
- Open Graph + Twitter cards
- Canonical URLs
- XML sitemap (172 pages)
- Structured data (JSON-LD)
- Custom 404 page
The museum ships with eight test harnesses, all green. They cover everything from the cipher engines themselves to the rendered DOM a visitor actually clicks on, plus a local link checker that verifies every relative href/src resolves.
# One-time setup (only needed for the demo-page simulator)
npm install
# Run any suite individually β¦
node tests/test-all-engines.js # 436 β engine roundtrip & known-answer tests across 83 engines
node tests/test-deep-ciphers.js # 238 β edge cases & stress tests
node tests/test-comprehensive.js # 1843 β cross-cipher invariants across the collection
node tests/test-accessibility.js # 1730 β ADA / WCAG audit across 173 pages
node tests/test-mobile.js # 522 β responsive / mobile audit across 173 pages
node tests/test-structural.js # 1734 β structural / framing audit across 173 pages
node tests/test-demo-pages.js # 777 β end-to-end JSDOM simulation of every interactive demo
node tests/test-local-links.js # 4901 β local href/src link checker across 173 HTML files
# β¦ or via npm scripts
npm run test:engines
npm run test:deep
npm run test:comprehensive
npm run test:a11y
npm run test:mobile
npm run test:structural
npm run test:demos
npm run test:links
npm test # runs every suite end-to-endtest-demo-pages.js is the strongest correctness proof: it loads every ciphers/*.html page in JSDOM with the real scripts inlined, lets js/demo-loader.js build the demo UI, then clicks the actual on-page Encrypt and Decrypt buttons and verifies the ciphertext roundtrips back to the original plaintext through the rendered DOM β exactly what a visitor sees. Hand-built pages (Caesar, Playfair, VigenΓ¨re, Zodiac) get dedicated assertions against canonical KATs (Caesar shift-3 β WKHTXLFNEURZQIRA, VigenΓ¨re LEMON β LXFOPVEFRNHR, Playfair MONARCHY decode, Zodiac Z408 reveal).
MIT License β free to use, fork, and build upon.
Built to honor the brilliant, flawed, and often fatal history of human secrecy.