# Letreiro Temporama — painel de LED (Lt)

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.

**Aberto, sem token:** <https://usapi.temporama.com.br/letreiro/>

## Instalar

```html
<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'));
  lt.definirFases([{ tipo: 'text', texto: 'TEMPORAMA', dur: 3000 }]);
  lt.iniciar();
</script>
```

Um arquivo, zero dependência, sem bundler e sem `type="module"`. Roda num `file://`.

## Opções

`Letreiro.criar(canvas, opts)` — `corPrimaria` e `corSecundaria`, cada uma um `[r,g,b]`.
Padrão: âmbar `[255,166,77]` e verde `[63,224,138]`.

## As quatro fases

| tipo | o que faz | campos |
|---|---|---|
| `text` | texto rolando, ou centrado se couber | `texto`, `dur` |
| `icon` | um ícone 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.

`texto` e `nome` aceitam **função** além de string — é assim que o painel mostra algo que
muda sem redefinir as fases (redefinir zeraria a rolagem).

Ícones: `claquete`, `bobina`, `camera`, `ampulheta`, `lente`, `luz` — em `Letreiro.ICONES`.

O `countdown` chama `obterEstado()` a cada quadro e espera `{ frac, label }`: a fração de
0 a 1 que enche a barra e o texto por cima. O painel desenha; quem sabe o que está
acabando é quem o usa.

## Métodos

```js
lt.definirFases([...]);   // troca a sequência (zera a rolagem)
lt.definirRitmo(2.5);     // acelera; 0.15 a 5
lt.soltarRitmo();         // volta a 1 sozinho, suavizando
lt.iniciar();  lt.parar();  lt.destruir();
```

## Por que pontos, e não uma fonte

Texto num canvas com máscara de bolinhas por cima é mais barato e parece igual — até o
texto se mover. Aí a máscara fica fixa na tela e o texto desliza por baixo dela, então
cada letra **cintila** ao atravessar a grade.

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

## Duas coisas que ele resolve sozinho

Redimensiona com `ResizeObserver`. E ao virar a tela **limpa o cache das tiras de texto**:
a largura de uma tira desenhada para a grade antiga sai errada na nova, e o texto
centralizado sai do centro. Isso foi um bug real, não uma precaução.

## De onde veio

Do Temporama, **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 medível: dos 24 arquivos em `js/`, este é um dos três que não
importam nada. Já nasceu 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](https://usapi.temporama.com.br/relogio/). Os dois se instalam igual.