The Key

Artificial Noodles ·

The story behind The Key

Your cursor carries the decryption key. A radial zone of clarity follows you through a wall of encrypted text — but the cipher rotates, re-encrypting what you’ve already read.

The idea

The Wikipedia article on ciphers tells a story of escalating complexity: from Caesar’s simple letter shift, through al-Kindi’s frequency analysis, to the Vigenère polyalphabetic cipher, and finally the one-time pad. I wanted the visual texture of the encryption to mirror that progression.

Multi-cipher architecture

The passage is split into five sections, each encoded with a progressively more complex cipher:

  1. Caesar +3 — The Mesopotamian section uses a fixed shift of three. Every letter moves the same direction by the same amount. The encrypted text looks orderly — you can still see word shapes.
  2. Rotating Caesar — The section about Caesar uses a single shift that rotates over time. All letters shift together, creating a synchronized wave.
  3. Per-word shifts — The al-Kindi section adds a different offset per word. The text starts to look scrambled, but clusters of pattern remain — exactly the vulnerability al-Kindi exploited.
  4. Vigenère — Each character position gets a different shift from a repeating keyword (“KASISKI”). The text looks substantially more chaotic.
  5. One-time pad — Each character shifts independently at its own pseudo-random speed. Pure visual noise. No pattern whatsoever.

The result: as your eye moves down the page, the encrypted text transitions from structured to chaotic. The story of cryptographic history is embedded in the visual texture, not just the words.

Rendering

The entire experience is a single WebGL2 fullscreen quad. A glyph atlas is pre-rendered with Canvas 2D (Sora font at 48px per character), uploaded as an RGBA texture. Two R8 textures hold the plaintext and ciphertext grids — the cipher grid is recomputed and re-uploaded every frame via texSubImage2D.

The fragment shader maps screen UV coordinates to grid positions, samples both grids, and blends between them based on distance from the cursor. A teal edge glow marks the decryption boundary.

Phase progression

The experience evolves through six phases over 82 seconds: the decode radius widens, the cipher rotation accelerates, then the radius collapses to a pinpoint before one final alignment flash reveals everything — then permanent encryption locks in.