# Tech Text (React Bits) — a letra vira o próprio desenho técnico sob o ponteiro

Medido 2026-09-30 em `reactbits.dev/text-animations/tech-text` (canvas, sem letra no DOM),
modo `letter`: a letra sob o ponteiro perde o preenchimento e vira contorno tracejado (traço
4, vão 2, linha 1,5); moldura de 1 px a 50% na caixa de tinta do glifo (`measureText`
`actualBoundingBox*`), alças de 4 px nos cantos, rótulo mono "letra ▢ L × A" em cima à
esquerda, ~15 quadradinhos cheios ou vazados piscando e renascendo em volta, sorteados por
letra; a moldura desliza entre letras.

- **Contorno de fonte variável traz as sobreposições internas.** `strokeText` desenha todo
  contorno, inclusive os que a fonte variável sobrepõe por dentro da tinta (DM Sans: orelha e
  elo do "g", junção do "y"). Silhueta limpa: traçar com o dobro da largura e apagar o glifo
  com `globalCompositeOperation = 'destination-out'` + `fillText` — somem as sobras internas e
  a metade interna do traço, e fica a metade externa na largura pedida. Desenhar o contorno
  primeiro, antes da moldura e dos pontinhos, para o apagamento não comer o resto.
- Em DOM + canvas sobreposto: `span` inline por letra (desloca ≤ 0,1 px, ao contrário de
  inline-block), a letra ativa com `color: transparent`, e a linha de base = topo do `span`
  inline + `fontBoundingBoxAscent`.
- Conota: o tipo mostrado como objeto de ofício — medido, selecionado, editável — a marca
  de quem faz ferramenta.