Esteira infinita de logos

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

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:

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%)} por 50% 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.

Gotchas

• padding-right no track, não margin. 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-content no 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 alt como gancho de estilo. A produção original tinha img[alt="Itaú"]{height:40px} — quebra na primeira revisão de copy ou tradução. Virou .marquee-logo--tall.
• overflow:hidden em dois níveis (.marquee-strip e .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-motion para a esteira e sobe a opacidade para .72 — parada, os logos precisam ser legíveis de vez.

Histórico

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.