Faixa de prova social: rótulo curto centralizado e uma fileira de logos deslizando em loop contínuo, pausando no hover. CSS puro, zero JavaScript.
Quando usar
- Provar rede: instituições, parceiros, clientes, integrações, veículos de imprensa.
- Quando há 6 a 12 logos — o suficiente para a esteira não repetir na tela.
- Como respiro entre duas dobras pesadas. A faixa é baixa e rápida de ler.
Quando não usar
- Menos de 6 logos. Com 4 a repetição fica óbvia e a esteira parece bug. Use uma fileira estática centralizada.
- Quando cada logo precisa de link, tooltip ou legenda — movimento e alvo de clique brigam.
- Quando os logos são a prova principal da página (ex.: "nossos clientes" numa página de cases). Aí eles merecem grid parado, com nome e resultado.
Padrão editorial
| Slot | Regra |
|---|---|
.marquee-label |
1 linha, 4 a 9 palavras, caixa alta por CSS. Enquadra o que a fileira prova. Não é título de seção — não use h2. |
| Ordem dos logos | Os mais conhecidos primeiro e por volta do meio. O visitante pega a esteira em qualquer ponto. |
Exemplos de rótulo que funcionam: "Atuamos na instituição financeira de sua preferência", "Integra com as ferramentas que você já usa", "Presente em". Rótulo que não funciona: "Parceiros" — não diz nada que a fileira já não diga.
Especificação dos logos
- SVG sempre que possível; PNG só com fundo transparente e 2× a altura final.
- Monocromático, na cor do texto da seção. Logo colorido em faixa escura vira sopa.
- Altura de renderização: 26px para wordmark (largo), ~40px para selo quadrado — use
.marquee-logo--tall. - Normalize a área óptica, não a caixa: dois logos com a mesma altura de arquivo podem pesar diferente na fileira. Ajuste um a um.
- Peso: até 20 KB cada.
Como usar
<link rel="stylesheet" href="componentes/prova/marquee-logos/estilo.css">
Sem script. Cole o markup entre duas seções.
Estrutura obrigatória
O .marquee-rail precisa conter dois .marquee-track idênticos. A animação anda -50% do trilho, que é exatamente a largura de um track — é isso que fecha o loop sem salto. A segunda cópia leva aria-hidden="true" e alt="", senão o leitor de tela lê a lista duas vezes.
Ajustes por variável
Todos no .marquee-strip, sem tocar no resto do CSS:
| Variável | Padrão | Para quê |
|---|---|---|
--marquee-dur |
40s |
Velocidade. Regra prática: ~5s por logo. |
--marquee-gap |
64px |
Respiro entre logos. |
--marquee-h |
26px |
Altura base do wordmark. |
Variações
.marquee-logo--tall— 1,55× a altura base, para selo quadrado ao lado de wordmarks largos.- Sentido inverso — troque o
to{transform:translateX(-50%)}por50%e inverta a ordem dos tracks. Útil para duas esteiras empilhadas correndo em sentidos opostos. - Sem pausa no hover — remova a regra
:hover. Só faça isso se a faixa for puramente decorativa. - Retratos —
.marquee-strip--retratosna faixa, e<figure class="marquee-face">com<img class="marquee-face-img" alt="">e<figcaption class="marquee-face-nome">no lugar dos logos (o markup está nopreview-extra.html). Retrato redondo de 76px em cinza que ganha cor sob o ponteiro, e o nome numa etiqueta que acende embaixo dele — a esteira já pausa no hover, então o nome fica parado para ser lido. Nada cresce: a referência escala o retrato 5% no hover, e aqui não (CLAUDE.md §6). O nome é texto no DOM o tempo todo (só a opacidade muda), por isso oalté vazio. A faixa vive numa janela de 480px (--marquee-janela) centrada sob o rótulo, com as pontas esmaecidas por máscara horizontal: na largura da tela, seis retratos deixavam metade da faixa vazia no laço de -50% (medido a 1440px). A conta: um.marquee-tracktem de passar da janela — 90px por pessoa, seis pessoas fecham 540px. Dois cuidados medidos: o<figure>chega commargin:1em 40pxdo navegador (o vão era 94px em vez de 14), e o seletor da variação tem duas classes porque a media query de 640px reescreve--marquee-gapem.marquee-strip. No toque (hover:none) e com movimento reduzido a etiqueta desce para o fluxo, sem fundo, e a foto fica em cor — faixa parada é fileira de retratos, e fileira de retratos mostra os nomes (obin/varredura.jsacusou os seis nomes invisíveis sobreduceantes disso). Gente real com nome real: equipe com autorização de imagem, ou cliente com autorização por escrito. Referência: o portfólio do Dudes Becker. Experimental.
Gotchas
padding-rightno track, nãomargin. O gap precisa existir também na emenda entre a cópia 1 e a cópia 2. Sem ele, dois logos colam no ponto do loop.width:max-contentno rail é obrigatório. Sem isso o flex encolhe os tracks para caber na tela e o-50%deixa de corresponder a um track.- Nunca use seletor de
altcomo gancho de estilo. A produção original tinhaimg[alt="Itaú"]{height:40px}— quebra na primeira revisão de copy ou tradução. Virou.marquee-logo--tall. overflow:hiddenem dois níveis (.marquee-stripe.marquee) é proposital: o strip corta o sangramento lateral, o marquee corta o trilho.- Logo grande demais trava a leitura. Se um logo passa de
max-width:140px, ele domina a fileira. Recorte o arquivo, não aumente o teto. prefers-reduced-motionpara a esteira e sobe a opacidade para .72 — parada, os logos precisam ser legíveis de vez.
Histórico
| Projeto | Onde | Data | Diferenças |
|---|---|---|---|
| referência: Dudes Becker | https://portfolio.dudesbecker.com/portfolio — a fila de retratos sob o título "Portfolio" | 2026-10-01 | variação retratos: o zoom de 5% no hover saiu (§6), a etiqueta virou <figcaption> sempre no DOM, a janela estreita e a máscara das pontas vieram da referência, e o toque ganhou a etiqueta no fluxo |
| Liberta Wealth | index.html, entre "Wealth planning" e "Valores" |
2026-08 | Origem. Wrapper .strip, rótulo .strip-label, .marquee fazia o papel de trilho animado, altura do selo por img[alt="Itaú"], sem tratamento de movimento reduzido. |
Normalizações aplicadas na extração: prefixo único em tudo; separação de papéis em três níveis (.marquee-strip corta / .marquee recorta / .marquee-rail anda); velocidade, gap e altura viraram variáveis locais; hack de alt virou classe modificadora; adicionado prefers-reduced-motion; adicionado breakpoint mobile.