LZ77 compresses a poem while every back-reference loops back over the page in gold.
A scribe parses the poem with LZ77, the algorithm at the heart of zip, gzip and PNG: at each position it searches everything already written for the longest earlier copy of what comes next, and emits either a literal character or a back-reference saying how far to go back and how much to copy. Each reference is drawn as an arc from the earlier phrase to the new one and the copied letters light up in its color (by copy length), so refrains and rhymes turn into loops over an illuminated page, and overlapping copies like 'bells, bells, bells' copy their own output. As in DEFLATE, the literals are Huffman coded: their tree grows in the margin as a codebook, the compressed token stream scrolls along the bottom, and a live counter compares the bits against plain 8-bit text.
Try it. Click the page and type to write your own verse (Enter for a new line, Backspace to delete, Esc to start blank) and watch the scribe compress it as you go. Hover an arc or a copied phrase to see its distance, length and cost. The left and right arrow keys switch poems. Left alone, it works through four public domain poems.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an LZ77 compression visualizer that draws every back-reference as an arc over the text, using 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:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint it a deep blue background.
- Put a repetitive public domain poem in a string, for example the first stanza of Poe's The Bells, keeping its line breaks.
- Write the LZ77 parser: at each position, scan backwards through everything already seen for the longest match of the text that follows (let it run past the current position, so copies can overlap themselves). If the match is at least 3 characters, emit a reference (distance, length) and skip ahead; otherwise emit a literal character.
- Lay the poem out one character at a time with cached ctx.measureText widths, so you know the x and y of every character, and draw it in a serif font with generous line spacing.
- For every reference, draw a curve (bezierCurveTo) from the middle of the earlier phrase to the middle of the copied one, arching above the text, and color the copied characters to match.
Once that works, make it beautiful:
- Animate a scribe that emits one token at a time: literals ink in quickly, references draw their arc first and then light up the copied letters.
- Color arcs by copy length, give them a soft glow with globalCompositeOperation = "lighter", and add an illuminated drop cap for the first letter.
- Show the compressed token stream along the bottom and a counter comparing the bits used (say 1 flag bit plus 8 bits per literal, 1 + 12 + 6 bits per reference) with plain 8-bit text.
- Let me type my own verse into the canvas and compress it live.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as Huffman coding the literals as DEFLATE does, lazy matching, or hovering an arc to see its distance and length.
