Encrypt. Decrypt. Visualize. Learn.
Caesar & Vigenère ciphers with a real-time animated cipher wheel, interactive Vigenère table,
and 2,000 years of cryptography history — all in a single HTML file. Zero dependencies.
| Caesar Cipher | Vigenère Cipher |
|---|---|
 |
 |
| Shift slider + step-by-step animation | Keyword chips + interactive table |
| Cipher Wheel | Timeline |
|---|---|
 |
 |
| Real-time rotating cipher wheel | 2,000 years of crypto history |
- Encrypt & decrypt with a single click
- Adjustable shift slider (1–25) with
+/−buttons - Live step-by-step visualization — watch each letter transform with staggered animation
- Real-time character counter
- One-click copy to clipboard
- Keyword-based polyalphabetic encryption
- Live keyword display — animated letter chips as you type
- Interactive Vigenère table — highlights exact rows/cells used in current encryption
- Encrypt & Decrypt mode toggle
- One-click copy
- Animated cipher wheel rotates in real time as you adjust the shift
- Type any letter → watch it transform on the wheel instantly
- Full 26-letter mapping grid updates live
- Interactive history from 58 BC to present day
- Covers: Julius Caesar · Al-Kindi · Vigenère · Kasiski · Enigma · AES/RSA
- Scroll-triggered fade-in animations for each card
Theme: Dark glassmorphism — frosted glass cards on deep dark background
Background: Animated matrix with falling cipher characters
Typography: Cyan-to-purple gradient headings
Animations: 60fps via requestAnimationFrame — GPU accelerated
Performance: Loads in under 100ms — zero external dependencies
Responsive: Mobile hamburger menu · single-column grid on small screens
| Technology | Usage |
|---|---|
| HTML5 | Semantic structure, Canvas elements |
| CSS3 | Glassmorphism, animations, grid/flex layouts |
| Vanilla JS (ES6+) | Cipher logic, DOM manipulation, Canvas 2D API |
| Canvas 2D API | Cipher wheel rendering & animation |
| IntersectionObserver API | Scroll-triggered animations & counters |
| Clipboard API | One-click copy functionality |
| Google Fonts | Inter + JetBrains Mono typefaces |
No installation required. Open the file directly in any modern browser:
# Clone the repository
git clone https://github.com/builtbysardor/localizing-cipher-tool.git
cd localizing-cipher-tool/cipher-tool
# Open in browser
open index.html # macOS
xdg-open index.html # Linux
start index.html # WindowsOr simply download index.html and open it — it's fully self-contained.
localizing-cipher-tool/
└── cipher-tool/
├── index.html # Complete app — all markup & structure
├── style.css # Design system — tokens, glassmorphism, animations
└── script.js # Cipher engine — Caesar, Vigenère, Canvas visualizer
This tool covers these cryptographic concepts:
| Concept | Description |
|---|---|
| Substitution ciphers | Replacing each letter with another |
| Monoalphabetic ciphers | Caesar — fixed single shift |
| Polyalphabetic ciphers | Vigenère — multiple shifts via keyword |
| Frequency analysis | Al-Kindi's technique for breaking ciphers |
| Key length analysis | Kasiski examination for Vigenère |
| Modern evolution | From Enigma → DES → AES |
- 🔤 More ciphers — Atbash, Rail Fence, Beaufort, Playfair
- 📊 Frequency analysis tool — letter frequency visualization
- 🧩 Cipher breaker — auto-break Caesar with frequency analysis
- 🌍 Multi-language — support non-ASCII alphabets (Cyrillic, Arabic)
- 🎮 Cipher challenge mode — decode mystery messages game
- 📱 PWA — installable as a mobile app
Classical ciphers are not cryptographically secure.
For real data protection, use modern standards: AES-256 or RSA.
This tool is for educational purposes only.
MIT License — free to use, modify, and distribute with attribution.
Built with ❤️ by Sardor Buriyev
⭐ Star this repo if CryptaVault helped you learn cryptography!