Live code panel — what you see, while you read
The 'made while you read' panel on the homepage is real code, running. Here's how the live canvas + token stream works — and what we learned tuning it for sub-100ms repaint.
If you scrolled the homepage and noticed a code panel quietly running while you read — yes, it's actually rendering. Not a video loop. Not a gif. Live JS hitting a canvas, repainting on requestAnimationFrame, with the source code typing itself in beside it.
The hard part wasn't the canvas. It was getting both panels to read as one thought: code on the left producing output on the right, both updating in sync, both staying readable at scroll speed. We landed on a token-streamer that paces character emit to match canvas repaint frames, plus a small DSL for declaring "this line renders this frame".
Lessons: 60fps is fine, but the human eye reads 4–6 characters per repaint cycle — too fast and the code panel becomes wallpaper, too slow and the canvas falls behind. We landed on ~6 chars / 16ms. Felt right after a week of staring at it.