# 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.

- **Source:** https://amplifiedcreations.com/lab/live-code-panel
- **Publisher:** amplified creations (https://amplifiedcreations.com/)
- **Published:** 2026-05-15
- **Updated:** 2026-05-16
- **Language:** en
- **Stack:** Canvas 2D, requestAnimationFrame, JavaScript

---

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.

---

Published by amplified creations, an independent technology studio in Leiria & Lisboa, Portugal. Contact: info@amplifiedcreations.com · More: https://amplifiedcreations.com/llms.txt