Selo de texto circular

Um disco de texto curvo em caixa alta que gira devagar, com um sinal parado no miolo. Cola sobre foto, no canto de uma dobra, ao lado de um título ou preso ao rodapé.

O que ele resolve: dar movimento e assinatura a uma dobra parada sem pedir mais conteúdo. Uma foto grande com um selo girando no canto lê como peça de estúdio; a mesma foto sozinha lê como banco de imagem. E custa zero JavaScript — a volta inteira é uma animação CSS.

Quando usar

• Canto de uma foto grande — hero, dobra de abertura, capa de case.
• Ao lado de um título de seção, como carimbo de credencial ("desde 2011", "consultoria independente").
• No rodapé, junto do convite para voltar ao topo — com a variação presa ao canto da janela.

Quando não usar

• Perto de texto que se lê. Movimento contínuo na periferia da visão atrapalha leitura. Selo mora em dobra de imagem, não em dobra de parágrafo.
• Mais de um por tela. Dois discos girando competem, e o olho não sabe qual é o importante.
• Como botão principal. Ele é ornamento. Se a ação for real, o miolo tem de virar um <button> de verdade — ver a variação.

Padrão editorial

O texto curvo é rótulo, não frase. Três a cinco palavras separadas por ·, em caixa alta, repetidas duas vezes no markup para fechar a volta sem emenda visível.

O que funciona: valores da marca (Patrimônio · Estratégia · Independência), credencial (Consultoria independente · CVM 2.140), convite (Role para ver · Role para ver).

O que não funciona: frase com sujeito e verbo. Curva quebra a leitura linear, e uma oração dando a volta obriga a pessoa a girar a cabeça para entender — o que ninguém faz. Se precisa ser lido, não é selo.

A repetição é obrigatória. O texto tem de dar a volta inteira. Escrito uma vez só, sobra arco vazio, e o vazio girando parece bug.

Especificação dos assets

O selo não pede asset nenhum — é tipografia e um traço em SVG.

O palco de demonstração usa uma foto paisagem (1600×900 ou maior, recorte 16:8). No uso real, a foto é da dobra onde o selo pousa, não dele.

Como usar

Cole o bloco .selo onde quiser. Fora do palco ele é um bloco comum, que entra em qualquer fluxo:

<div class="selo" data-selo>
  <svg class="selo-svg" viewBox="0 0 100 100" aria-hidden="true" focusable="false">
    <defs>
      <path id="selo-arco" fill="none"
            d="M 50,50 m -37,0 a 37,37 0 1,1 74,0 a 37,37 0 1,1 -74,0"></path>
    </defs>
    <text class="selo-texto">
      <textPath href="#selo-arco" startOffset="0">
        Patrimônio · Estratégia · Patrimônio · Estratégia ·
      </textPath>
    </text>
  </svg>
  <span class="selo-miolo" aria-hidden="true"><!-- ícone --></span>
  <span class="visually-hidden">Sua frase, em prosa.</span>
</div>

Ganchos

Variações

Gotchas

• O id do arco tem de ser único na página. O <textPath> aponta para o <path> por id. Dois selos com o mesmo id fazem os dois textos seguirem o primeiro arco — e como os arcos são idênticos, ninguém percebe até o dia em que um selo tiver tamanho diferente do outro. Segundo selo: troque nos dois lugares (selo-arco-2, href="#selo-arco-2").

• data-rv nunca no .selo. O componente gerencia o próprio transform (a rotação), e [data-rv].in{transform:none} tem especificidade (0,2,0) contra (0,1,0) da classe: o giro morreria em silêncio assim que a dobra entrasse. O data-rv vai no invólucro — no palco, é o .selo-palco. Mesma separação do efeitos/inclinacao-3d.

• Gira o SVG, não o bloco. Se a rotação fosse no .selo, o miolo giraria junto — e seta girando não aponta para nada.

• O corpo do texto é 7.4px dentro de um viewBox de 100. A unidade ali é porcentagem do disco, não pixel de tela: a tipografia acompanha --selo-size sozinha, sem clamp e sem media query. Mexer nesse número muda a proporção, não o tamanho.

• aria-hidden no SVG não é descuido. O texto curvo é uma repetição em laço com bullets: sem isso, o leitor de tela anuncia "Patrimônio ponto médio Estratégia ponto médio…" duas vezes, porque a frase aparece duplicada para fechar a volta. A frase real vai num .visually-hidden ao lado.

• O texto curvo não quebra linha, e o excedente some sem aviso. O arco mede 232,5 unidades de viewBox e a tipografia padrão gasta 4,38 por caractere: cabem cerca de 53, contando espaços e bullets. Texto mais longo não encolhe nem quebra — o que passa do fim do arco simplesmente não é desenhado.

• textLength não resolve isso. A saída óbvia seria mandar o SVG encaixar o texto no arco com textLength mais lengthAdjust="spacing". Medido no Chrome: é ignorado em <textPath> — o texto continuou com 363,5 unidades depois de receber textLength="232.5". A conta é na mão, e é por isso que o texto padrão foi escolhido pela medida: Patrimônio · Estratégia · repetido duas vezes dá 221,1, e a folga de 11,4 é justamente o vão entre a última letra e a primeira.

Movimento reduzido / toque

Com prefers-reduced-motion: reduce, o giro para e o selo fica parado e legível — o texto curvo é desenho, não informação em movimento, então não há nada a compensar. A regra que desliga fica colada à que liga, no próprio estilo.css.

No toque não há nada a adaptar: o selo não depende de ponteiro, hover nem gesto.

Histórico

Origem. O selo girando aparece em portfólio de estúdio, em página de moda e em quase todo template premiado de agência — padrão de domínio comum, sem dono. Nada foi copiado: reescrito do zero dentro do contrato desta biblioteca. O registro consolidado vai em projetos/autorais.md.

Decisões da tradução para o contrato. O texto curvo é textPath e não offset-path: offset-path faria a letra andar pela curva, mas exigiria um elemento e um deslocamento por letra, escritos à mão ou por script — e este componente não tem script. Gira o SVG e não o bloco, para o miolo ficar parado. O corpo é porcentagem do viewBox, o que dispensa clamp. O SVG é aria-hidden com a frase real ao lado. E o data-rv mora no invólucro, pela regra de especificidade do §5.

Calibragem no primeiro uso. Espere ajustar --selo-size e a contagem de caracteres do texto: os dois andam juntos, e é a única coisa deste componente que não se resolve por token.