Como Transformar uma TV Antiga em um Quadro de Letras de Aeroporto Vintage

Os displays mecânicos reais de letras pivotantes que costumavam ficar pendurados em estações de trem e terminais de aeroporto custam uma fortuna. Se você quiser comprar um para sua casa ou escritório, os fabricantes comerciais cobrarão de três a cinco mil dólares. O repositório flipoff resolve esse problema com uma solução totalmente digital.

O projeto transforma qualquer tela, tablet ou TV com navegador em um quadro de informações clássico com letras que fazem clique e animação de caracteres aleatórios quando o texto muda.

Sem Bundlers ou Bibliotecas de Terceiros

O repositório não tem package.json, Node.js ou React. O autor escreveu todo o projeto em HTML, CSS e JavaScript puro.

Para iniciar o quadro, basta clonar o repositório e abrir index.html localmente com um clique duplo, ou subir um servidor HTTP simples:

git clone https://github.com/magnum6actual/flipoff.git
cd flipoff
python3 -m http.server 8080

Após abrir a página, o navegador espera o primeiro clique em qualquer lugar para desbloquear a reprodução de áudio via Web Audio API. Pressionar a tecla F expande o quadro para tela cheia, ocultando elementos extras da interface.

Como a Animação e o Som Funcionam

Em vez de renderização complexa com Canvas, o projeto usa uma grade de elementos DOM. Cada segmento do quadro tem seu próprio estado e lógica de atualização.

Quando uma mensagem muda, o script não atualiza toda a grade de uma vez, mas apenas as células cujos caracteres realmente mudaram. Assim como um mecanismo real. Antes de travar a letra ou dígito final, a célula passa por uma sequência de embaralhamento, alternando rapidamente por caracteres aleatórios e mudando as cores de fundo.

O som de clique foi gravado de um quadro mecânico real. Para fazer o projeto funcionar completamente offline sem carregar ativos externos, o autor codificou o arquivo de áudio em Base64 diretamente dentro do script JS flapAudio.js. A faixa de som começa sincronizada com o início do flip da célula.

Você pode controlar o quadro com seu teclado:

• Enter ou Space alterna para o próximo texto
• Setas para esquerda e direita navegam pelas mensagens para trás e para frente
• F ativa o modo tela cheia
• M silencia o som

Personalizando para Suas Necessidades

Todos os parâmetros básicos são extraídos para um arquivo separado js/constants.js. Lá você pode editar:

• Lista de mensagens e citações
• Dimensões da grade (variáveis GRID_COLS e GRID_ROWS)
• Velocidade da animação e atraso do flip
• Paleta de cores para os fundos

Se você precisa exibir dados em tempo real em vez de citações pré-definidas—como status de builds de CI, clima ou taxas de câmbio—você pode reescrever MessageRotator.js para buscar dados via fetch() comum de uma API local.

Onde Você Pode Usar

Ficam ótimos como painel em uma TV em uma sala de estar, em um escritório, ou em um iPad antigo acumulando poeira em uma prateleira. O projeto não requer internet, não sobrecarrega a CPU com cálculos complexos, e escala corretamente para qualquer resolução de tela, até 4K.

O código é escrito de forma transparente e separado em classes pequenas e isoladas (Tile.js, Board.js, SoundEngine.js), então entender a mecânica ou adaptar o projeto às suas necessidades deve levar literalmente meia hora.