# Painel de código ao vivo — o que vês, enquanto lês

> O painel "feito enquanto lês" na homepage é código real, a correr. Eis como funciona o canvas ao vivo + token stream — e o que aprendemos a afiná-lo para repaint sub-100ms.

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

---

Se passaste pela homepage e reparaste num painel de código a correr discretamente enquanto lias — sim, está mesmo a renderizar. Não é um vídeo em loop. Não é um gif. JS ao vivo a bater num canvas, a repintar em requestAnimationFrame, com o código-fonte a escrever-se sozinho ao lado.

A parte difícil não foi o canvas. Foi pôr ambos os painéis a ler-se como *um único pensamento*: código à esquerda a produzir output à direita, ambos a actualizar sincronizadamente, ambos legíveis à velocidade de scroll. Aterrámos num token-streamer que ritma o emit de caracteres para coincidir com os frames de repaint do canvas, mais uma pequena DSL para declarar "esta linha renderiza este frame".

Lições: 60fps está bem, mas o olho humano lê 4–6 caracteres por ciclo de repaint — demasiado rápido e o painel de código vira papel de parede, demasiado lento e o canvas atrasa-se. Aterrámos em ~6 chars / 16ms. Pareceu certo depois de uma semana a olhar.

---

Publicado por amplified creations, estúdio de tecnologia independente em Leiria e Lisboa, Portugal. Contacto: info@amplifiedcreations.com · Mais: https://amplifiedcreations.com/llms.txt