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