🌐 This page is not yet translated to English. Showing Portuguese (BR) reference. Help translate this page on GitHub.
Marquee (Letreiro digital)
App de letreiro digital pra texto animado em tela cheia. Casos típicos: avisos em vitrine, recepção de evento, "voltamos em 5 min" num café, banner motivacional em monitor secundário, prompt pra chamar alguém num escritório aberto.
O que faz
- Escreve um texto, escolhe efeito de animação, cor de fundo, cor do texto, velocidade
- Modo fullscreen com 1 tecla (
Fou botão⛶) - Funciona em qualquer monitor — só arraste a janela pra outra tela e fullscreen
Efeitos disponíveis
| Efeito | Comportamento |
|---|---|
| Scroll horizontal | Texto desliza da direita pra esquerda (letreiro clássico) |
| Scroll vertical | Texto sobe (crédito de filme) |
| Fade in/out | Texto pulsa centralizado |
| Bounce | Texto pula de canto a canto |
| Glow | Pulsa neon, ideal pra fundo preto |
| Wave | Caracteres ondulam (efeito retro) |
| Static | Texto parado (banner simples) |
Cores e fundo
- Cor do texto: HEX picker
- Cor de fundo: HEX picker
- Predefinições (toggle): preto/branco, preto/neon verde, preto/amarelo (placas de aviso), vermelho/branco (emergência), azul/branco (corporativo)
- Gradient toggle: fundo vira gradient suave (3 presets)
Velocidade
Slider de 0.5× a 5×. Default 1× (~10s pra atravessar texto de 30 chars).
Modo fullscreen
Clica ⛶ no topo direito ou pressiona F. Sai com Esc.
Em fullscreen:
- Wallpaper, dock, menubar somem
- Window controls (X, _, ▢) somem
- Cursor esconde após 3s sem mover
Boa prática mobile: travar orientação. Em landscape, texto longo cabe mais.
Mobile
Funciona em smartphone/tablet. Botão de drawer mobile no topo expõe os controles. Em fullscreen mobile, swipe pra cima na borda inferior pra trazer controles de volta.
Anti-pattern resolvido (2026-04-26)
Versão anterior aplicava touch-action: none em <html> pra capturar gestos custom de fullscreen. Bug: se o app fosse fechado por swipe-down OS-level (não pelo botão), a classe ficava presa globalmente e quebrava swipe-to-close de todos os apps subsequentes até reload da página.
Fix: agora usa Fullscreen API nativa do browser (element.requestFullscreen()) que se auto-resolve no destroy. Sem classes globais em <html>.
Atalhos teclado
| Tecla | Ação |
|---|---|
F | Toggle fullscreen |
Esc | Sair de fullscreen |
Space | Pause/resume animação |
↑ / ↓ | Aumentar/diminuir velocidade |
← / → | Trocar efeito |
Limitações
- Não salva presets ainda (texto se perde ao fechar)
- Não tem playlist (rotacionar entre 5 mensagens)
- Sem som
- Sem importar imagens (só texto)
Essas estão no roadmap pra v2 quando demanda justificar.
Casos de uso reais
| Setup | Configuração |
|---|---|
| Vitrine "voltamos em 5min" | Fundo preto, texto amarelo, scroll horizontal lento (0.7×) |
| Recepção de evento "Welcome to ROADSHOW 2026" | Glow neon verde, static |
| Ponto de mostra com nome do palestrante atual | Gradient azul-corporativo, fade in/out 2s |
| "Sala em uso" porta de reunião | Vermelho/branco, bounce |
| Banner motivacional desktop secundário | Wave + fundo gradient, 1× velocidade |
Referências
- App registrado em
src/config/apps.js(procurar porid: 'marquee') - Componente:
src/components/roqueos/apps/ROSMarquee.vue - Rule de regression
.claude/rules/10-ui-patterns.mdseção "ANTIPADRÃO: classes globais em<html>/<body>"