Summary
AES today only visualizes ECB and CBC, but "which mode of operation, and why" is arguably the most important practical lesson in symmetric crypto. I'd like to add the streaming modes — CTR, CFB, OFB — with full step instrumentation, plus a side-by-side "modes lab" that shows how a one-byte plaintext change propagates differently under each mode. The headline piece would be the classic ECB penguin: encrypt a bundled bitmap block-by-block in ECB vs CBC/CTR on a <canvas> so the leaked image structure is impossible to miss.
Why
It's the highest-leverage concept the platform is currently missing, the penguin is one of the most famous teaching artifacts in cryptography, and — importantly — it's already on the roadmap: CIPHER_ENGINE.md specs "ECB … visualize penguin problem" (line 648), CTR/GCM (649–651), and "aes-cbc.ts + aes-ctr.ts mode wrappers" (line 1200).
Approach
lib/cipher/symmetric/aes.ts already has a runAesBlocks(..., mode: 'ECB' | 'CBC') core and mode dispatch in encrypt/decrypt — widen the union and add keystream/chaining step emitters following the existing CipherStep pattern. CipherOptions already declares mode and iv.- Registry: the option schema already supports
type: 'select' with choices (used for hexInput), so a mode dropdown drops straight into the AES entry and renders through CipherLayout — no worker-protocol change (the worker just forwards options).
- New
app/modes/page.tsx + components/modes/ModesLab.tsx + components/modes/EcbPenguin.tsx (canvas), a sample bitmap in /public, a Navbar link, and NIST SP 800-38A known-answer vectors in tests/unit/symmetric/.
Scope: L3. Honest note — the penguin needs a per-block canvas loop separate from the normal worker input path, so I'd treat CTR/CFB/OFB + the comparison as the solid core and the penguin as the demo centerpiece on top.
I'd love to take this — happy to be assigned. Want it as one PR, or CTR/CFB/OFB first and the penguin lab as a follow-up?
Contributing as part of Elite Coders Summer of Code (ECSoC 2026).
Summary
AES today only visualizes ECB and CBC, but "which mode of operation, and why" is arguably the most important practical lesson in symmetric crypto. I'd like to add the streaming modes — CTR, CFB, OFB — with full step instrumentation, plus a side-by-side "modes lab" that shows how a one-byte plaintext change propagates differently under each mode. The headline piece would be the classic ECB penguin: encrypt a bundled bitmap block-by-block in ECB vs CBC/CTR on a
<canvas>so the leaked image structure is impossible to miss.Why
It's the highest-leverage concept the platform is currently missing, the penguin is one of the most famous teaching artifacts in cryptography, and — importantly — it's already on the roadmap:
CIPHER_ENGINE.mdspecs "ECB … visualize penguin problem" (line 648), CTR/GCM (649–651), and "aes-cbc.ts + aes-ctr.ts mode wrappers" (line 1200).Approach
lib/cipher/symmetric/aes.tsalready has arunAesBlocks(..., mode: 'ECB' | 'CBC')core and mode dispatch inencrypt/decrypt— widen the union and add keystream/chaining step emitters following the existingCipherSteppattern.CipherOptionsalready declaresmodeandiv.type: 'select'withchoices(used forhexInput), so a mode dropdown drops straight into the AES entry and renders throughCipherLayout— no worker-protocol change (the worker just forwardsoptions).app/modes/page.tsx+components/modes/ModesLab.tsx+components/modes/EcbPenguin.tsx(canvas), a sample bitmap in/public, a Navbar link, and NIST SP 800-38A known-answer vectors intests/unit/symmetric/.Scope: L3. Honest note — the penguin needs a per-block canvas loop separate from the normal worker input path, so I'd treat CTR/CFB/OFB + the comparison as the solid core and the penguin as the demo centerpiece on top.
I'd love to take this — happy to be assigned. Want it as one PR, or CTR/CFB/OFB first and the penguin lab as a follow-up?
Contributing as part of Elite Coders Summer of Code (ECSoC 2026).