Letreiro Temporama

Um canvas que simula um painel de LED de verdade — pontos individuais, não texto com máscara de CSS. Ícone, padrão matemático e texto rolando vivem na mesma grade de brilho, e é por isso que a passagem entre eles nunca é um corte.

A amostra, rodando

arraste sobre o painel para acelerar ou frear a rolagem — soltar volta ao ritmo sozinho

Por que pontos, e não uma fonte

Escrever texto num canvas e aplicar uma máscara de bolinhas por cima é mais barato e parece igual — até o texto se mover. Aí aparece o problema: a máscara é fixa na tela e o texto desliza por baixo dela, então cada letra cintila ao atravessar a grade, porque os pontos acendem em posições que não são as da letra.

Aqui a grade é a unidade: o texto é desenhado numa tela de trabalho oito vezes maior, e cada ponto do painel amostra a média da sua célula. O ponto tem um brilho contínuo entre 0 e 1, não ligado ou desligado — é isso que dá a suavidade de painel real e permite que ícone, padrão e texto se dissolvam um no outro, já que todos são o mesmo Float32Array de brilho.

As quatro fases

tipo	o que faz	campos
text	texto rolando, ou centrado se couber	texto, dur
icon	um ícone de set desenhado na grade	nome, dur
pattern	campo matemático que respira	seedA, seedB, dur
countdown	barra + rótulo, quem conta é você	obterEstado()

Qualquer fase aceita verde: true para sair na cor secundária em vez da primária — é o único jeito de trocar de cor no meio da sequência.

texto e nome aceitam função além de string — é assim que o painel mostra algo que muda sem que ninguém redefina as fases (redefinir zeraria a rolagem). Os ícones são seis: claquete, bobina, camera, ampulheta, lente, luz — e estão em Letreiro.ICONES.

O countdown é o único que não conta sozinho: ele chama obterEstado() a cada quadro e espera { frac, label } — a fração de 0 a 1 que enche a barra, e o texto que aparece em cima. O painel desenha; quem sabe o que está acabando é quem o usa. É a mesma escolha do Relógio, de não fingir que o módulo conhece o mundo em volta.

Levar embora

<script src="https://usapi.temporama.com.br/letreiro/letreiro.js"></script>
<canvas id="painel" style="width:100%;height:220px"></canvas>
<script>
  const lt = Letreiro.criar(document.getElementById('painel'), {
    corPrimaria:   [255, 166,  77],   // o aceso
    corSecundaria: [ 63, 224, 138]    // a mistura
  });
  lt.definirFases([
    { tipo: 'icon',    nome: 'claquete', dur: 1400 },
    { tipo: 'text',    texto: () => new Date().toLocaleTimeString('pt-BR'), dur: 3000 },
    { tipo: 'pattern', seedA: 7, seedB: 11, dur: 4200, verde: true }
  ]);
  lt.iniciar();

  lt.definirRitmo(2.5);   // acelera enquanto o dedo arrasta
  lt.soltarRitmo();       // volta a 1 sozinho, suavizando
  lt.parar(); lt.destruir();
</script>

Um arquivo, nenhuma dependência, nenhum npm install. Ele se redimensiona sozinho com ResizeObserver — e ao virar a tela limpa o cache das tiras de texto, porque a largura de uma tira desenhada para a grade antiga sai errada na nova. Arquivos: letreiro.js · LEIA-ME.md · VERSAO.txt.

De onde ele veio

Do próprio Temporama, e sem uma linha de adaptação na lógica. Foi o módulo mais fácil de extrair de todo o app, por um motivo que dá para medir: dos 24 arquivos em js/, este é um dos três que não importam nada. Já tinha nascido solto — só faltava a porta.

A única mudança foi a embalagem, de módulo ES para script com global, o mesmo formato do Relógio. Os dois se instalam igual, e nenhum dos dois pede bundler.