Uma malha de células separadas por filete de 1px. O texto da dobra ocupa o centro dela — o miolo — e os logos moram nas células de fora. Célula sem logo não fica vazia: mostra hachura diagonal. E de dois em dois segundos alguns logos vizinhos trocam de célula, deslizando.
O problema editorial é o da prova social por logo: a lista de parceiros é sempre incompleta e sempre desatualizada, e uma fileira de doze logos convida a conferir quem falta. A malha resolve mudando a pergunta. Ela não afirma "estes são os nossos parceiros" e sim "isto é um ecossistema" — as células vazias dizem que há espaço, a troca diz que a lista se move, e o texto no meio ocupa o lugar onde estaria o logo mais importante. Ninguém conta logos numa grade que não para.
É por isso que a hachura importa e não é decoração: célula vazia lê como falta, célula hachurada lê como vaga.
Quando usar
- Dobra de instituições onde a casa opera, parceiros, custódia, seguradoras
- 12 a 18 logos. Menos de 10 deixa a malha mais vazia que cheia e a leitura vira "quase ninguém"
- Quando a lista cresce e você não quer refazer a dobra a cada instituição nova
- Página de assessoria, consultoria, produto, infraestrutura
Quando não usar
- Logos de cliente que são o argumento principal. Se o nome vale mais que o conjunto, ele merece tamanho e legenda — não uma célula de 150px que troca de lugar
- Menos de 10 logos. Aí é
prova/marquee-logos, que não tem buraco para preencher - Quando a dobra precisa de texto longo. O miolo aguenta título mais três linhas; acima disso ele cresce e come as células
- Quando os logos vêm em cores próprias e variadas. Ver Gotchas
Padrão editorial
| Slot | Regra |
|---|---|
| Olho | uma ou duas palavras, o nome da categoria: "Instituições", "Onde atuamos", "Custódia" |
| Título | 5 a 8 palavras, com <em> no meio e não no fim. Numa caixa estreita o realce no fim cai sozinho na última linha |
| Apoio | duas linhas. Diz o que a multicustódia poupa ("sem vínculo, e sem custo a mais"), não quantas instituições são |
| Logo | SVG monocromático, altura óptica equalizada |
| Densidade | 12 a 18 logos em 24 células. A referência tem 18 |
O texto do miolo não menciona número de instituições. "Mais de 50 instituições" envelhece e transforma a dobra numa promessa auditável; "as principais instituições do mercado" não. Se o número é o argumento, ele é um prova/stats-contador-regua, não isto.
E repetir logo na malha é legítimo — a referência repete dois. Numa grade que troca de posição a cada 2s, ninguém cataloga; o que se lê é densidade.
Especificação dos assets
- Formato: SVG, traço único, sem gradiente.
currentColorde preferência - Dimensão: altura óptica equalizada entre eles, não altura de caixa. Logo horizontal e logo quadrado com a mesma altura de arquivo pesam diferente na célula — o quadrado sempre parece maior. O
.mesh-logo-tallexiste para os quadrados - Peso alvo: 4 KB por logo. São 18 na mesma dobra
- O que não pode ter: fundo próprio, moldura, sombra, texto legal, versão em cor de marca (ver Gotchas)
Como usar
<link rel="stylesheet" href="componentes/prova/grade-logos-miolo/estilo.css">
<script src="componentes/prova/grade-logos-miolo/script.js"></script>
Célula com logo e célula vazia diferem em uma coisa: ter ou não ter o <img>.
<div class="mesh-cell" data-mesh-cell>
<img class="mesh-logo" data-mesh-logo src="…" alt="Meridian">
</div>
<div class="mesh-cell" data-mesh-cell></div>
O miolo vem primeiro no HTML e é o único item que declara posição:
<div class="mesh-grid" data-mesh-grid>
<div class="mesh-core"> … </div> <!-- grid-column:3/span 2; grid-row:2/span 3 -->
<div class="mesh-cell" data-mesh-cell></div>
<!-- as outras 23, sem declarar linha nem coluna -->
</div>
Ganchos
| Gancho | Papel |
|---|---|
[data-mesh] |
a seção. Liga o script |
[data-mesh-grid] |
a malha. Recebe .is-still durante o resize |
[data-mesh-cell] |
a célula. Ganha .is-empty quando nenhum logo está nela |
[data-mesh-logo] |
o logo. Recebe --mesh-dx/--mesh-dy |
data-mesh-pairs |
pares que trocam por onda. Padrão 3 |
.mesh-core |
o miolo. O único com grid-column/grid-row |
.mesh-logo-tall |
logo quadrado, ganha altura |
--mesh-row |
altura da linha. Padrão clamp(96px,10.6vw,140px) |
--mesh-line |
espessura do filete. Padrão 1px |
Variações
- malha parada — apague o
script.js. Sobram linhas e logos, sem hachura e sem troca; o CSS sozinho já entrega a dobra - densidade da troca —
data-mesh-pairs. 1 é discreto, 3 é o da referência, 5 em grade grande já vira agitação - outra área de miolo — mexa no
grid-column/grid-rowdo.mesh-coree as células se redistribuem sozinhas - tom claro — troque
.sec-darkpor.sec-light. Filete e hachura leem--rulee acompanham; os logos pedem versão escura - sem hachura —
experimental. Tira o desenho junto
Gotchas
-
As linhas da grade são o
gap, não borda de célula. O fundo da malha é--rulee o de cada célula é--bg: o vão de 1px vira linha. Comborderem cada célula haveria filete duplo entre vizinhas e sobra nos cantos externos. Quem trocar isso por borda vai passar a tarde caçando meio pixel. -
O logo nunca sai da célula dele no HTML. O que muda é
--mesh-dx/--mesh-dy, medidos do centro da célula de casa até o centro de onde ele está agora. Foi a escolha contra duas alternativas que não animam: trocargrid-columnreposiciona sem transição, e mover o nó no DOM exigiria um FLIP à mão comtransitionendpara cada logo a cada onda. Efeito colateral bom: a ordem de leitura do HTML fica estável para leitor de tela mesmo com a malha se mexendo. -
A hachura nasce apagada, e sem o
script.jsela não aparece. Não dá para resolver com:not(:has(> [data-mesh-logo])): como o logo nunca sai da célula, esse seletor acusaria como vazia exatamente a célula de onde o logo saiu, e brigaria com o.is-emptya cada onda. A alternativa — nascer acesa em toda célula — pintaria hachura por trás dos logos, que é pior. Malha sem hachura fica sóbria; malha com hachura errada fica quebrada. -
Quem é vizinho de quem é deduzido das posições medidas, não escrito no script. O
medir()agrupa os centros em faixas e daí saem coluna e linha. É o que permite as media queries mudarem de 6 para 4 e para 3 colunas, e moverem o miolo, sem uma linha de JS. A tolerância do agrupamento é um terço da menor célula: menos que isso e duas colunas estreitas viram uma. -
O miolo não é vizinho de ninguém, e é de propósito. Ele não é uma célula, então uma célula à esquerda dele e outra à direita não trocam entre si. Um logo atravessando o texto por trás seria pior que um logo que não atravessa.
-
A onda sorteia com teto de tentativas.
while (feitos < quantos && tentativas++ < 60). Em malha pequena, muito cheia ou muito vazia, pode não haver par elegível — e umwhilesem teto travaria a aba. Se a malha tem poucas células, algumas ondas simplesmente movem menos quedata-mesh-pairspediu. Isso é o comportamento correto, não um bug a "corrigir" tirando o teto. -
VIAGEMno script tem de casar com a transição doestilo.css. São 1100ms e 1.05s. O script usa esse prazo para tirar o.is-moving, que é o que mantém o logo acima das vizinhas durante o percurso. Encurtar a transição sem encurtar oVIAGEMsó deixa o z-index sobrando um instante; encurtar oVIAGEMsem a transição faz o logo passar por baixo da vizinha no fim do trajeto. -
Logo em cor de marca não funciona aqui. Dezoito logos coloridos numa malha de 24 células viram um mosaico, e o miolo — que é o conteúdo — perde a briga. A referência usa os logos coloridos e paga esse preço: na dobra dela o olho vai para o TikTok, não para o título. Aqui os logos entram monocromáticos em
opacity:.5, subindo a 1 no hover, como nomarquee-logos. Se o cliente exigir cor, aceite em no máximo três logos e deixe o resto neutro. -
As linhas usam
minmax(var(--mesh-row),auto), não altura fixa. Foi correção de um bug medido: em 768px o miolo passa a ocupar a largura inteira, o texto quebra em mais linhas, e com altura fixa ele transbordava — a linha da grade cortava a última frase ao meio. Comminmaxa linha cresce se o miolo pedir. No desktop nada muda (o miolo cabe com folga nas três linhas) e nas quebras estreitas o miolo é o único item da linha dele, então crescer não distorce célula nenhuma. Efeito colateral bom: texto mais longo que o do exemplo não quebra a dobra. -
O resize recalcula com a transição desligada. A malha troca de número de colunas nas media queries, então o resize não é só "ficou mais largo" — os centros mudam de lugar. Sem o
.is-stilltodos os logos deslizariam a cada pixel arrastado. Os doisrequestAnimationFrameencadeados existem para religar a transição sem que isso mesmo anime nada.
Histórico
| Projeto | Onde | Data | Diferenças |
|---|---|---|---|
| referência: Corvex | https://usecorvex.com.br/ — dobra de integração | 2026-08-31 | referência visual, não origem de código |
Normalizações aplicadas na tradução: a referência é Framer — classes hash, sem licença declarada, e nada foi copiado (§11). Medido nela e reproduzido: célula 194×165, colunas do meio 1,33 vez mais largas, malha 6×5 com o texto em 2 colunas por 3 linhas, hachura diagonal na célula vazia, onda de troca a cada ~2050ms com 3 a 4 pares, título 48/57.6 com tracking −0.02em.
O que é nosso: os logos saíram — são marcas de terceiros e não atravessam a tradução (§11); o preview usa os placeholders de showroom/demo/, monocromáticos e a opacity:.5. A hachura era um SVG hospedado e virou repeating-linear-gradient em --rule, sem asset. O layout era flex de cinco colunas com células empilhadas à mão; virou um CSS Grid onde só o miolo declara posição, o que faz as media queries reorganizarem tudo sem JS. O olho, o título e o apoio vêm das primitivas do core (.eyebrow, h2.sec-title, .sec-lead) em vez de tipografia própria. O movimento para quando a dobra sai da tela; a referência não para.
Divergências conhecidas vs. a referência: o olho leva o traço do .eyebrow do core, não o ponto verde-limão #B9F42E do original — o traço é a assinatura da casa e um ponto colorido pediria um token de cor novo (§9.3) para uma dobra só. O título vem em --display peso 700, e não no peso 500 da fonte de texto que a referência usa: mais afirmativo, menos técnico. As colunas do meio são 1,5 vez as de fora e não 1,33, porque o --max do projeto é mais estreito que a coluna do site de origem e sem esse fio a mais o título quebrava em cinco linhas. A densidade bate — 18 logos em 24 células, como no original — mas a mistura de formatos não: a referência tem seis ícones quadrados de marca (TikTok, WhatsApp, Shopify) que pesam muito na malha, e a biblioteca só tem um placeholder quadrado. O preview repete esse um para representar a mistura; com os logos reais do cliente a dobra fica mais próxima do original que o preview sugere.