Real SHA-256 woven round by round: flip one input bit and half the state catches fire.
This is the genuine SHA-256 compression function, 32-bit modular arithmetic and all, run on your text and on a copy with one message bit flipped. Each of the 65 rows of the cloth is the 256-bit working state a..h after a round, woven like a Jacquard loom: a 1 lifts the cream weft over the indigo warp, a 0 leaves the warp on top, and the narrow strip on the left is the message schedule word W[t] mixed into that round. Wherever the two runs disagree the thread burns orange. The flip stays invisible until its schedule word enters at round t, then the shift-register structure carries it into all eight words within about four rounds, and from there roughly half the bits differ, exactly what you would expect of a random function. The bars on the right count the differing bits per round and the two digests at the bottom share almost nothing.
Try it. Type to edit the message (up to 55 bytes, one block) and Backspace to delete. Click any bit of the message block, or a message word in the W strip, to choose which bit is flipped; arrow keys move the flip by a bit or a word and Enter picks a random one. Hover a row to inspect both runs' words in hex.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an interactive visualization of the SHA-256 avalanche effect with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Implement SHA-256 yourself for a single 512-bit block (messages up to 55 bytes): pad the UTF-8 bytes with 0x80, zeros and the 64-bit bit length, build the 64-word message schedule, and run the 64 rounds. Use 32-bit arithmetic with `| 0` and `>>> 0`, and check your result against a known hash such as the one for "abc".
- Record the eight working words a..h after every round, so you have 65 rows of 256 bits.
- Run it twice: once on the message, once with a single message bit flipped.
- Draw the rows as a grid of small cells, one row per round, light for 1 and dark for 0, and paint the cells where the two runs differ in a bright warm color.
- Add a text input that recomputes both runs as you type, and let clicking a cell in a small 16 x 32 grid of the message block choose which bit is flipped.
Once that works, make it beautiful:
- Reveal the rounds one row at a time so the difference visibly spreads, starting from the round where the flipped word enters.
- Draw a bar beside each row counting the differing bits, with a line at 128 (half the state), and show both final digests with differing hex digits highlighted.
- Give the differing cells a soft glow (a blurred copy drawn with globalCompositeOperation = "lighter").
Explain the key ideas in short code comments, especially what Σ0, Σ1, Ch and Maj do. When you're done, tell me how to open it and suggest three directions I could take it next, such as shading the cells like woven threads, a magnifier with each round's words in hex, or comparing a deliberately weak hash with fewer rounds.
