🌐 هذه الصفحة لم تُترجم بعد إلى العربية. يتم عرض المرجع البرتغالي (BR). ساعد في الترجمة.
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>"