M23 — Decorative Type

Faixa horizontal com tipografia decorativa de grande dimensão que atravessa a página de um lado ao outro, com um pequeno efeito de movimento quando o utilizador faz scroll. Serve como elemento separador entre secções, dando ritmo visual e destaque à identidade do hotel.

Campo	Valor
Módulo	M23 — Decorative Type
Estado	Rascunho
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Figma Variantes	Abrir no Figma
Zoho Task	P894-T626
Criada	2026-04-21
Aprovada	—
Aprovada por	—

Screenshots de Referência

Desktop (1440px)

Mobile (375px)

Todas as variantes e temas

Links Figma: Desktop | Mobile | Todas as variantes

Descrição Geral

O Decorative Type é um módulo puramente visual: apresenta uma palavra ou curta expressão em tipografia de grande dimensão, repetida várias vezes ao longo de uma faixa horizontal que atravessa toda a largura da página. As repetições estão separadas por traços longos (ex: “Lorem Ipsum Dolor — Lorem Ipsum Dolor — Lorem Ipsum Dolor”) e o texto extravasa as margens do ecrã nos lados, criando um efeito de continuidade.

A faixa tem uma animação contínua de marquee — o texto move-se em loop infinito da direita para a esquerda. A velocidade do movimento aumenta ou diminui consoante a velocidade com que o utilizador faz scroll na página: scroll rápido acelera a faixa, scroll lento ou parado mantém o ritmo base. Esta animação pode ser desativada no backoffice — quando desligada, a faixa fica completamente estática.

O módulo não tem botões, imagens (exceto na variante própria) nem outros elementos interativos — é pensado como respiração e transição entre secções de conteúdo.

Aparece tipicamente em páginas institucionais, páginas de apresentação de um hotel, entre módulos de conteúdo para dar ritmo, e em zonas onde o objetivo é reforçar a marca com um detalhe tipográfico.

Variantes

Variante 1 — Fundo cor A

Como utilizador, quero ver uma faixa tipográfica limpa, com texto em destaque sobre fundo cor A, para que o módulo funcione como uma pausa visual discreta e elegante entre secções claras de conteúdo.

Elementos visíveis:

Fundo cor A
Texto em tipografia de grande dimensão, cor do tema do hotel (geralmente dourada ou escura)
O texto extravasa o ecrã à esquerda e à direita

Critérios de Aceitação:

A faixa ocupa toda a largura do ecrã
O texto aparece repetido, com traços de separação entre as repetições
O texto extravasa os limites do ecrã dos dois lados (parte do texto é cortada nas extremidades)
A faixa movimenta-se quando o utilizador faz scroll
O fundo é branco

Variante 2 — Fundo cor B

Como utilizador, quero ver uma faixa tipográfica com fundo cor B), para criar contraste entre secções de conteúdo com fundo cor A.

Elementos visíveis:

Fundo de cor B (definido pelo tema do hotel)
Mesma estrutura de texto da variante 1

Critérios de Aceitação:

O fundo é uma cor B definida pelo tema do hotel
Todos os outros comportamentos funcionam como na variante 1

Variante 3 — Fundo Cor C

Como utilizador, quero ver uma faixa tipográfica com fundo cor C, para criar um contraste forte e um momento de destaque visual na página.

Elementos visíveis:

Fundo cor C (cor do tema do hotel)
Texto em cor C (consoante o tema)
Mesma estrutura de repetição e traços

Critérios de Aceitação:

O fundo é uma cor C definida pelo tema do hotel
O texto é legível sobre o fundo C
Todos os outros comportamentos funcionam como nas variantes anteriores

Variante 4 — Imagem decorativa

Como utilizador, quero ver uma faixa horizontal com uma imagem decorativa (padrão, textura, detalhe arquitetónico) em vez de texto, para introduzir um elemento visual diferente entre secções de conteúdo.

Elementos visíveis:

Faixa horizontal com uma imagem (em vez de texto)
Versão para computador e versão para telemóvel

Critérios de Aceitação:

A imagem ocupa toda a largura da faixa
A versão para computador é usada em ecrãs grandes; a versão para telemóvel é usada em ecrãs pequenos

Interações do Utilizador

Este módulo é maioritariamente visual, com um único efeito automático:

Interação	Descrição
Carregar a página	A faixa de texto inicia automaticamente a animação de marquee — movimento contínuo em loop da direita para a esquerda
Fazer scroll rápido	A velocidade da faixa aumenta proporcionalmente à velocidade do scroll
Parar o scroll	A faixa abranda progressivamente até regressar ao ritmo base

Notas adicionais:

O utilizador não interage diretamente com o módulo (não há cliques, botões nem links)
O movimento é sempre suave
Utilizadores que preferem menos animação (configuração do sistema) não veem o movimento — a faixa fica estática
A animação é contínua e automática — o utilizador não a ativa nem controla diretamente. O movimento pára apenas quando a animação está desligada no BO ou quando o utilizador tem prefers-reduced-motion ativo no sistema. Referência de implementação: https://reactbits.dev/text-animations/scroll-velocity

Animação referência:
https://reactbits.dev/text-animations/scroll-velocity

Elementos

Conteúdos geridos no backoffice para este módulo:

Elemento	Tipo	Obrigatório	Descrição
Texto decorativo	Título	Sim	Palavra ou expressão curta em destaque. O editor escolhe o nível de cabeçalho.
Imagem decorativa (computador)	Imagem	Não	Usado apenas na variante Image. Suporta JPEG, PNG, WEBP, SVG e GIF animado. GIFs reproduzem automaticamente em loop. Dimensões recomendadas: 1440 × 240px.
Imagem decorativa (telemóvel)	Imagem	Não	Igual ao campo acima, versão para ecrã pequeno. Dimensões recomendadas: 375 × 180px.

Nota: O texto é obrigatório quando o módulo é usado nas variantes de fundo cor A, cor B ou cor C. Se o editor preencher as imagens, o módulo passa automaticamente para a variante “Imagem” e o texto é ignorado.

Opções de Configuração

Opções disponíveis no backoffice para personalizar o comportamento e aspeto do módulo:

Opção	Valores possíveis	Valor padrão	Descrição
Fundo	A / B / C	A	Cor do fundo da faixa (ignorada quando é usada a variante com imagem)
Direção do movimento	Direita para a esquerda	Automática	Sentido em que a faixa se desloca durante o scroll.
Ativar/Desativar	Ativo / Inativo	Ativo	Permite ativar ou desativar o módulo sem o apagar — quando inativo, o módulo deixa de aparecer no site mas toda a configuração é mantida.
Animação de marquee	Ativo / Inativo	Ativo	Quando inativo, a faixa fica completamente estática — sem movimento, mesmo durante o scroll.

Nota: A direção da animação é sempre da direita para a esquerda — não é configurável no backoffice.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Faixa	Ocupa toda a largura do ecrã, texto em tamanho grande	Ocupa toda a largura, texto em tamanho ainda maior relativamente ao ecrã
Texto	Texto	Texto
Efeito de movimento	Deslocamento horizontal subtil ao fazer scroll	Mesmo efeito, adaptado à velocidade e tamanho do ecrã
Imagem (quando usada)	Carrega a versão para computador	Carrega a versão para telemóvel
Altura da faixa	Adapta-se ao tamanho do texto (tipografia de grande dimensão)	Adapta-se — normalmente menor em altura, mas com texto proporcionalmente maior

Estados Visuais

Estado	Descrição
Inicial	A faixa aparece com o texto, parcialmente cortado nas extremidades laterais
Animação ativa (estado base)	A faixa move-se continuamente da direita para a esquerda em loop, a velocidade de base
Durante scroll rápido	A velocidade da faixa aumenta proporcionalmente — quanto mais rápido o scroll, mais rápido o marquee
Scroll parado	A faixa abranda progressivamente até ao ritmo base
Animação desligada no BO	A faixa é completamente estática — não reage ao scroll
Fora da vista	Quando a faixa está fora da janela de visualização, o movimento pausa para poupar desempenho
Voltar a ficar visível	O movimento retoma a partir do ponto atual, sem saltos visuais
Preferência de menos animação	Preferência de menos animação
Variante com imagem	A imagem movimenta-se, mesmo durante o scroll
Ecrã muito largo	O texto mantém-se em uma linha;
Texto muito longo	O texto mantém-se em uma linha;

Acessibilidade

O texto é apresentado com um título semântico (o editor escolhe o nível — H2, H3, etc.) para que os leitores de ecrã entendam a importância do texto no contexto da página
Os traços que separam as repetições são decorativos e são ignorados pelos leitores de ecrã
A faixa não contém elementos interativos, por isso não é necessário acesso por teclado
Utilizadores com leitor de ecrã ouvem o texto apenas uma vez, mesmo que visualmente apareça repetido
Utilizadores que configuram o sistema para “menos animação” não veem o movimento — a faixa fica estática
O contraste entre o texto e o fundo cumpre os requisitos de acessibilidade visual em todas as variantes (branco, claro, escuro) e em todos os temas
Na variante com imagem, a imagem tem uma descrição alternativa para leitores de ecrã (ou é marcada como decorativa quando o editor assim o indica)

Temas

O módulo adapta-se visualmente a cada hotel: a cor do texto, a tipografia e as tonalidades de fundo claro/escuro seguem a identidade visual do hotel.

Os 8 sites suportados:

Savoy Palace
Saccharum
Calheta Beach
Hotel Next
Savoy Signature (site do grupo)
Gardens (por desenvolver)
The Reserve (por desenvolver)
Royal Savoy (por desenvolver)

Diferenças visuais observadas entre temas:

Savoy Palace — Texto em tom dourado sobre fundo branco, creme ou roxo muito escuro
Saccharum — Tom terra/castanho sobre bege, creme ou fundo escuro
Calheta Beach — Tipografia sem serifa em tom verde-azulado, variantes de fundo adaptadas ao tema
Hotel Next — Tipografia sem serifa em tom escuro, fundos neutros
Savoy Signature — Tipografia serifada clara sobre fundos escuros, preto ou creme

Em todos os temas, a estrutura, a repetição do texto e o efeito de movimento mantêm-se idênticos — apenas a cor do texto, o tom do fundo e a tipografia variam.

Formatos de Imagem Aceites

As imagens carregadas no backoffice para este módulo aceitam os formatos JPG, PNG, SVG, GIF e WEBP.

JPG — preferencial para fotografias e imagens com tratamento fotográfico.
SVG — preferencial para imagens vetoriais (logótipos, ícones, símbolos, ilustrações simples).
WEBP — alternativa otimizada para fotografia/gráficos quando se procura melhor performance.
PNG — para imagens com transparência ou detalhe gráfico que não seja vetorial.
GIF — apenas quando é necessária animação simples.

Este módulo permite a inserção de imagens em formato GIF. Atenção: dado que estes ficheiros podem ter um peso elevado, é essencial uma gestão cuidada no backoffice — caso contrário, a performance do website poderá ser seriamente comprometida.

Changelog

Data	Estado	Descrição
2026-05-14	Revisão Design + Tech	Análise de Liliana Moreira e Rui Rosa comparando as recomendações de FA
2026-05-11	Revisão Functional Analyst	Análise e recomendações da equipa de Análise Funcional.
2026-05-05	Validação Design	Atualizado e validado por Liliana Moreira
2026-04-21	Rascunho	Versão inicial criada a partir do Figma e do código já implementado