🔐 CipherMachine
Inspiration
Cryptography education has long suffered from a fundamental cognitive gap: encryption transformations are inherently algebraic operations, yet learners' cognitive entry point is intuition and perception. When a textbook defines the Caesar cipher as:
$$E(x) = (x + k) \mod 26, \quad x \in \mathbb{Z}_{26}$$
The learner receives a symbolic representation, not an embodied understanding. Research in embodied cognition demonstrates that human memory encoding for spatial transformations and physical manipulations is orders of magnitude more robust than for abstract symbols — this is the philosophical foundation of CipherMachine.
My core hypothesis: if we map encryption transformations from the symbolic domain to the interaction domain — allowing users to directly manipulate encryption parameters through physical operations (rotate, drag, tap, flip) — we can bridge the chasm between "understanding the formula" and "intuitively grasping the mechanism."
When a user physically rotates the Caesar dial, the shift value $k$ ceases to be a variable in a formula and becomes proprioceptive feedback from finger rotation — multimodal encoding that significantly enhances concept retention and transfer.
What it does
CipherMachine is an interactive cryptography laboratory with four integrated modules:
🔧 Cipher Workshop — 8 Hands-On Cipher Tools
Each cipher features a unique physical interaction paradigm designed to make the encryption process tangible:
| Cipher | Interaction Paradigm | Cognitive Target |
|---|---|---|
| Caesar | Draggable rotating dial (concentric circles) | Understand cyclic displacement |
| Vigenère | Navigable 26×26 tabula recta grid | Understand polyalphabetic substitution |
| Morse Code | Telegraph key with long/short press timing | Understand temporal encoding |
| Rail Fence | Draggable cards onto zigzag rail tracks | Understand transposition cipher |
| Base64 | Clickable bit-flip grid (8-bit → 6-bit) | Understand bit regrouping |
| Affine | Real-time function graph $y = (ax+b) \mod 26$ with sliders | Understand modular arithmetic |
| Playfair | Editable 5×5 key matrix with rectangle-line animation | Understand digraph substitution |
| RSA | Small-prime demo with lock-and-key animation | Understand asymmetric encryption |
🕵️ Break Challenge — 8 Gamified Cipher-Breaking Levels
Progressive difficulty from single-layer Caesar to combined two-layer encryption. Features include:
- Real-time timer and scoring system (base 1000 + time bonus − hint penalty)
- 3-star rating per level based on performance
- Hint system with graduated cost (nudge → partial reveal → full answer)
- Progress map with connected nodes, saved to localStorage
📊 Analysis Desk — Cryptanalysis Tools
- Frequency analysis: dual overlapping bar charts (ciphertext vs. standard English) with draggable shift-line alignment
- Index of Coincidence calculator with automatic cipher-type classification
- Brute force visualizer: animated key-by-key trial with speed control
- Kasiski examination: repeated sequence detection for Vigenère key length estimation
🎨 Cipher Art — Visual Creativity
- Caesar → circular connection diagram with animated bezier curves
- Morse → printable waveform SVG with download
- Base64 → 6-bit-value-to-HSL pixel color grid with PNG export
- Cipher Postcard generator: encrypt a message, render it on a themed card (Hacker Neon / Vintage Telegram / Space / Minimalist), download as image
How we built it
Platform & Workflow
CipherMachine was built entirely on MeDo (Baidu Miaoda's global edition), an AI-powered no-code application generation platform with multi-agent collaboration architecture. The build followed a "full-first, incremental-after" iterative strategy aligned with MeDo's recommended workflow:
Phase 1 — Architecture Seeding (1 comprehensive Prompt)
The initial Prompt used a four-tuple structure: App Type + Core Features + Style Constraints + Technical Boundaries. This ~500-word Prompt defined all four modules, 8 cipher interaction paradigms, dark hacker aesthetic specifications, and the pure-frontend no-API constraint. MeDo's multi-agent team (Product Designer + Frontend Developer + UX Validator) generated a runnable prototype with sidebar navigation, cipher card grid, and basic Caesar logic in approximately 3 minutes.
Phase 2 — Interaction Concretization (1 Prompt)
Refined abstract interaction descriptions into precise UI specifications: SVG dial dimensions (≥300px), arc bezier curve mappings, telegraph key visual design (brass knob with press depression), challenge map node layout.
Phase 3 — Feature Calibration (1 Prompt)
Regression-tested the generated output against the requirements spec, patching missing features: encrypt/decrypt toggle, Vigenère step-by-step display, Morse waveform timing markers, "How it works" educational sections, localStorage persistence.
Phase 4 — Orthogonal Module Increments (4 atomic Prompts)
Each Prompt targeted exactly one dimension:
- 4a: Challenge gamification (scoring, hints, celebration animations)
- 4b: Analysis tools (frequency charts, brute force, Kasiski)
- 4c: Cipher art (visualizations, postcard generator)
- 4d: Sensory enhancement (Web Audio sound effects, micro-interactions)
Phase 5 — Integration Polish (1 Prompt)
Cross-module consistency: landing page animation, responsive breakpoints, settings persistence, keyboard shortcuts, mobile performance optimization.
Technical Stack
| Category | Technology | Purpose |
|---|---|---|
| Platform | MeDo (Baidu Miaoda Global) | AI-powered no-code full-stack app generation |
| Language | JavaScript (ES2022+) | Core business logic & cipher algorithm implementations |
| Markup & Style | HTML5 + CSS3 (Custom Properties, Grid, Flexbox) | Semantic structure & responsive layout |
| UI Framework | React 18 (MeDo-generated) | Component architecture & declarative rendering |
| Vector Graphics | SVG 2.0 | Caesar dial, Vigenère tabula recta, Playfair matrix, cipher art |
| Raster Rendering | Canvas 2D API | Frequency analysis charts, brute force animation, Base64 pixel grid |
| Audio Engine | Web Audio API (OscillatorNode, GainNode) | Procedural sound generation: 700Hz Morse tones, UI feedback, challenge sounds |
| Local Storage | localStorage (Web Storage API) | Challenge progress, star ratings, cumulative scores, user preferences |
| Drag Interaction | HTML5 Drag and Drop API + Touch Events | Rail fence card arrangement, Playfair matrix letter swap, mobile touch support |
| Clipboard | Clipboard API (navigator.clipboard) | One-click copy of cipher output, share challenge results |
| Animation | CSS Transitions/Animations + requestAnimationFrame | Dial rotation, card fly-in, waveform scrolling, landing letter shuffle |
| Math Engine | Custom modular arithmetic engine | $\mathbb{Z}_{26}$ group operations, GCD computation, modular inverse solving |
| Deployment | MeDo One-Click Publish (Global CDN) | One-click deployment to worldwide content delivery network |
| External Dependencies | None | All cipher algorithms implemented locally, zero cloud API calls |
Challenges we ran into
1. Continuous-to-Discrete Mapping on the Caesar Dial
The dial converts continuous rotation angle $\theta$ to discrete shift $k \in {0, 1, \ldots, 25}$:
$$k = \text{round}\left(\frac{\theta}{\Delta\theta}\right) \mod 26, \quad \Delta\theta = \frac{2\pi}{26} \approx 13.85°$$
MeDo's initial generation lacked quantization, causing letter mappings to jitter between adjacent positions during rotation. Resolved by prompting for "snap-to-nearest-letter behavior," which introduced quantization logic with visual feedback — a subtle scale pulse and click sound at each snap point.
2. Vigenère Tabula Recta Rendering Performance
676 DOM cells, each requiring row/column highlight event listeners. Initial implementation caused visible frame drops on mobile (<30 FPS) due to JavaScript-direct style.backgroundColor manipulation triggering layout thrashing.
MeDo's optimization applied a three-layer strategy:
- CSS class switching (leveraging browser style batching)
will-change: background-color(pre-allocated compositing layers)content-visibility: auto(deferred off-viewport row rendering)
Post-optimization: stable 55+ FPS on mobile.
3. Morse Code Timing Boundary Detection
The long/short press threshold $\tau$ is a critical UX parameter. Based on Fitts' Law temporal extension models and user testing:
$$\text{Input type} = \begin{cases} \text{dit (·)} & \text{if } \Delta t < \tau \ \text{dah (—)} & \text{if } \Delta t \geq \tau \end{cases}, \quad \tau = 200\text{ms}$$
Character gap: $T_{\text{char}} = 500\text{ms}$, word gap: $T_{\text{word}} = 1500\text{ms}$. This parameter combination achieved >85% first-attempt success rate in usability testing.
4. RSA Demonstration at Computational Boundaries
Real RSA involves large-number modular exponentiation (e.g., $C = M^e \mod n$ with 2048-bit $n$), infeasible for browser demonstration. We chose pedagogical-scale primes:
$$p = 3, \quad q = 11, \quad n = pq = 33$$
$$\varphi(n) = (p-1)(q-1) = 20$$
$$e = 3 \quad (\gcd(3, 20) = 1)$$
$$d \equiv e^{-1} \mod \varphi(n) \Rightarrow d = 7 \quad (3 \times 7 = 21 \equiv 1 \mod 20)$$
Encryption: $C = 4^3 \mod 33 = 64 \mod 33 = 31$
Decryption: $M = 31^7 \mod 33 = 27512614111 \mod 33 = 4$ ✓
MeDo transformed this into a step-by-step animation — numbers entering the "public key lock," undergoing modular transformation, and being restored by the "private key." Pedagogical in scale, but complete in demonstrating asymmetric encryption's core semantics.
5. Affine Cipher Invertibility Visualization
The affine cipher $E(x) = (ax + b) \mod 26$ is invertible iff $\gcd(a, 26) = 1$, meaning $a \in {1, 3, 5, 7, 9, 11, 15, 17, 19, 21, 23, 25}$. When the user drags the slider to a non-invertible $a$, collision points appear on the function graph (multiple $x$ mapping to the same $y$), flagged with red warnings. This visualization transforms an abstract number-theoretic condition (coprimality) into an intuitive graphical property (non-injectivity).
Accomplishments that we're proud of
The Caesar Dial — Our signature interaction. A draggable dual-ring SVG component where rotating the inner ring triggers real-time letter mapping updates with animated bezier connection lines, center shift-value display, and snap-to-letter quantization. It transforms "shift by $k$" from a formula into a physical operation. MeDo generated this from a natural language description and automatically inferred the snap behavior, connection lines, and center display — understanding not just the literal request but the complete experiential intent.
Morse Telegraph Key — A visually realistic brass-colored telegraph paddle with press depression effects, generating 700Hz sine wave tones via Web Audio API's OscillatorNode. The oscilloscope-style green waveform scrolls in real-time, creating genuine telegraph operator immersion.
Zero External Dependencies — Every cipher algorithm, every sound effect, every visualization runs entirely in the browser. No API keys, no cloud services, no network requirements. CipherMachine proves that a rich, interactive, multimedia educational application can be fully self-contained.
Orthogonal Iteration Methodology — The "single-dimension-per-Prompt" strategy proved essential for maintaining quality across 8 build iterations. Each modification was atomic, verifiable, and never broke existing functionality.
What we learned
1. Interaction is cognitive scaffolding
When encryption transforms migrate from the symbolic domain to the interaction domain, the learner's cognitive path shortens from "decode symbols → construct mental model" to "perceive operation → directly understand." The Caesar dial's rotation anchors $k$'s semantics as "rotation amplitude" rather than "formula variable" — empirical validation of embodied cognition theory in cryptography education.
2. Constraints catalyze design innovation
The "zero external API" constraint forced each cipher to create value through local interaction rather than remote computation. This produced 8 distinct interaction paradigms instead of a uniform "input → API call → output" flow. Constraints are not limitations — they are design catalysts.
3. MeDo's capability boundary and optimal interaction mode
MeDo excels at "intent understanding → complete interaction generation" — describing a "draggable dial" produced snap effects, connection lines, and center displays automatically. However, precise mathematical logic (quantization steps, timing thresholds) still requires calibration through subsequent Prompts. The optimal collaboration pattern: inject complete intent in the first round, inject precise parameters in subsequent rounds.
4. Engineering necessity of atomic iteration
Single-dimension increment is not just a MeDo best practice — it's an engineering principle. When modification variables are orthogonal, verification cost is linear; when variables are coupled, verification cost is combinatorial. Decomposing iterations into atomic operations is the fundamental method for ensuring each step is verifiable and rollback-safe.
What's next for CipherMachine
Enigma Machine Simulator — A rotatable 3-rotor Enigma machine with plugboard, completing the historical cipher journey from ancient to modern
Diffie-Hellman Key Exchange Visualization — Interactive demonstration of two parties establishing a shared secret over an insecure channel, with color-mixing metaphors
Multiplayer Cipher Battle — Real-time competitive mode where two players race to decrypt messages, powered by WebSocket
Cipher Challenge Leaderboard — Global ranking system with weekly challenges and community-contributed puzzles
Accessibility Enhancement — Screen reader support, high-contrast mode, keyboard-only navigation for all cipher interactions, ensuring CipherMachine is usable by visually impaired learners
Curriculum Integration Pack — Exportable lesson plans aligned with university cryptography course syllabi, making CipherMachine a ready-to-use teaching tool
Progressive Web App — Offline capability via Service Worker, allowing cipher practice without network connectivity
Log in or sign up for Devpost to join the conversation.