Autorais

Componente que nasceu aqui, sem projeto de origem e sem uma referência externa única. O que entra é um padrão de interação que aparece em muitos sites premium — o anel 3D arrastável, a faixa horizontal pinada, a lista cuja imagem segue o cursor — reescrito do zero dentro do contrato.

A diferença para o clone de referência é só de registro: não há URL. A regra de ouro continua valendo — antes de construir, procure no catalogo.json — e cada ficha diz qual irmão catalogado ela substitui e em que caso.

A leva de 2026-09-03: carrosséis e movimento

Pedido: olhar a biblioteca com o olhar de quem já fez site de banco e de marca de esporte, e trazer as opções de carrossel que faltavam — imagens grandes e pequenas, girando, passando, atravessando — mais o que dá o "uau" de entrada sem quebrar o contrato. Tudo já na voz da Liberta (assessoria de investimentos), porque a biblioteca vai virar produto para clientes do ramo financeiro.

O que faltava (mapa de lacunas)

O que existia antes desta leva, em movimento de imagem: prova/marquee-logos (logos em esteira), prova/carrossel-depoimentos (cards de texto em esteira), midia/carrossel-perfis (trilho infinito com arrasto), midia/galeria-scroll-horizontal (scroll-snap alinhado à coluna), midia/galeria-pasta (pilha que abre em leque), hero/duas-colunas-produto (slider manual de setas), listas/baralho-sticky (cards que grudam ao rolar), conteudo/apresentacao-foto-alternada (fusão de três fotos). Boa base — e estas eram as lacunas:

O que entrou

Princípios que valeram para todos

O "uau" não é quantidade de efeito. É uma ideia de movimento clara, com timing certo, que continua funcionando sem mouse, sem hover, com "reduzir movimento" ligado e em 390px. Cada componente desta leva foi medido nessas quatro condições antes de entrar, e a ficha registra os números.

• Sem GSAP. Nenhum dos onze pediu timeline encadeada nem scrub. O que é preso ao scroll usa LIB.onScroll (o laço único do core) com fallback próprio; o que é contínuo usa um requestAnimationFrame por instância, que dorme fora da tela.
• Tempo, não quadro. Velocidade em px/s ou graus/s multiplicada por dt, com teto de 50ms — 60Hz e 120Hz andam igual, e voltar de uma aba em segundo plano não salta.
• Toque não tem hover. Tudo que depende de hover nasce visível em @media(hover:none) ou tem alternativa (miniatura inline, botões).
• Movimento reduzido desliga o que anda sozinho, nunca o que a pessoa pediu: arrasto e setas continuam, sem inércia.
• Medido, não suposto. O bin/medir.js (Chrome headless) foi a régua: transform antes e depois do arrasto, classe ativa após a tecla, scrollWidth contra clientWidth, console limpo.

A leva de 2026-09-03/04: ferramentas interativas

Segundo pedido do dono, na mesma noite, depois de ver o conteudo/trio-cards-ui-simulada rodando: mais peças com movimento, patrimônio e gráfico, e em especial ferramentas — coisas que a pessoa usa antes de falar com um assessor, para servirem de mote em campanha. A referência de forma que ele mandou foi o simulador de carteira do avenue.us: um assistente de quatro passos sobre uma foto, que pergunta objetivo, composição, faixa e conhecimento, e devolve uma leitura.

A diferença para a leva anterior é o que a peça entrega. Lá era movimento; aqui é interação com resultado.

As sete, entregues

Todas com 0 alertas de conformidade, console limpo, sem estouro horizontal em desktop e celular, e um estado honesto sem JavaScript.

A regra que governa a família inteira: compliance vem antes da forma

Ferramenta que devolve número em site de assessoria pisa em terreno regulado, e isso decidiu o desenho, não só o texto:

• A calculadora desenha uma faixa, não uma linha. Linha única diz "seu dinheiro vai chegar aqui". Faixa diz "o resultado mora nesta região, e ela é larga".
• O comparador compara custo, nunca resultado. Custo é aritmética verificável a partir de premissa declarada; resultado é promessa.
• O simulador mostra alocação, nunca rentabilidade.
• A premissa fica visível na peça, não em letra miúda: comparador que esconde a premissa é propaganda, não ferramenta.
• Ressalva no passo do resultado, onde a pessoa lê o número — não no rodapé da página.
• Nenhuma ferramenta coleta dado pessoal e nenhuma grava em localStorage. As respostas vivem em memória e morrem no recarregamento. Quem captura é o conversao/cta-formulario-lead, para onde o botão final aponta.

Cada ficha desta família tem uma seção ## Compliance dizendo o que o consumidor precisa trocar antes de publicar.

O brief que os agentes seguiram e o estudo de tokens que dimensionou as ondas estão fora do repositório, no scratchpad da sessão.

A leva de 2026-09-04: cinco da fila, e o elemento nativo como método

Cinco dos padrões que estavam previstos na fila autoral saíram dela. O sexto, o ticker de índices, ficou — e ficou pela razão que a própria fila registrava: valor de cotação fictício num site financeiro é problema, não placeholder. Ele entra quando houver feed real e data.

(Saiu em 2026-09-10 — e o que o destravou foi outra coisa: ver a leva abaixo.)

O componente que nasceu de um print

A prova/manchetes-imprensa não veio de padrão de mercado: veio de uma copy da casa em que as menções de jornal estavam como captura de tela. Print não escala, não quebra no celular, não tem alt, o buscador não lê e o texto amarela no dia em que o veículo troca de layout.

Duas coisas ficaram registradas nela:

• Data e link são estrutura, não opção. Um card com o logo de um jornal de verdade e uma manchete sem data nem link não é peça de marketing, é notícia falsa atribuída a um veículo. Com os dois, é citação. A ficha tem uma seção ## Compliance só sobre isso, no mesmo formato das ferramentas financeiras.

• A tipografia não imita a do veículo. Cada jornal tem a própria fonte, e fonte de terceiro não atravessa (§1). Quem diz de onde veio a manchete é o logo — imitar a letra seria, além de ilegal, a parte errada da imitação.

A terceira medição da leva: transição trava tom

O realce de hover do card começou como transition: background-color. Trocar o escopo da seção de .sec-paper para .sec-dark deixava o fundo preso no valor antigo: --bg resolvia certo no computado, o fio e o texto invertiam, e só o background ficava para trás. Medido no Chrome — com a transição, rgb(237,233,227); removendo-a na hora, rgb(10,10,10).

Transição sobre propriedade que lê custom property não acompanha a troca da própria variável. Como o tom vir da seção é justamente a promessa deste componente, quem saiu foi a transição: o realce virou véu em opacidade num ::before, que não depende de --bg. Vale para qualquer componente da casa que queira animar algo lido de token de escopo.

O método que apareceu nesta leva: usar o elemento nativo

Dois dos cinco tomaram a mesma decisão, e ela vale como regra daqui para a frente: quando existe um elemento HTML que já faz o comportamento, use ele em vez de reimplementar.

O comparador-antes-depois podia ter o arraste escrito à mão, com pointerdown, pointermove, pointerup e captura de ponteiro — é o que quase toda implementação do padrão faz. Em vez disso o controle é um <input type="range"> invisível sobre a imagem, e daí vieram prontos e testados o arraste, o toque, as setas, Home, End, PageUp/PageDown e o anúncio de porcentagem para leitor de tela. O script ficou com vinte linhas e uma responsabilidade: copiar o valor para uma custom property.

O showreel-expansivel fez o mesmo com <dialog> e showModal(): foco preso dentro, Esc que fecha, foco que volta ao botão que abriu e página inerte para tecnologia assistiva. Quatro comportamentos, zero linhas. O irmão overlay/card-expansivel-fullscreen nasceu antes e escreve os quatro à mão — não é erro dele, é data de nascimento.

O que se ganha não é economia de código, é correção de graça: o comportamento nativo já foi testado em navegador, em leitor de tela e em teclado por gente que faz isso em tempo integral.

Duas medições que mudaram o desenho

• textLength é ignorado em <textPath>. No selo-circular, a saída óbvia para encaixar o texto no arco seria pedir ao SVG que ajustasse o espaçamento. Medido no Chrome: o texto continuou com 363,5 unidades depois de receber textLength="232.5". A conta virou manual, e o texto padrão foi escolhido pela medida — Patrimônio · Estratégia · repetido dá 221,1 num arco de 232,5, e a folga de 11,4 é o vão entre a última letra e a primeira.

• Um requestAnimationFrame não basta para o FLIP. No showreel-expansivel, com uma única espera entre escrever o transform inicial e removê-lo, o navegador às vezes agrupa as duas escritas e a transição não acontece: o quadro aparece direto no lugar final. São dois.

O que os três elementos de página têm em comum

progresso-leitura, cursor-disco e o <dialog> do showreel vivem fora de qualquer [data-rv], e não por estilo: o core termina todo reveal em filter:blur(0), blur(0) continua sendo um filtro, e elemento com filtro vira bloco de contenção para descendente position:fixed. Dentro de uma dobra revelada, os três passariam a se posicionar em relação à dobra em vez da janela — e só depois que ela entrasse na tela. Está no MANUAL §5, e agora tem três precedentes.

A leva de 2026-09-06: as categorias que a própria descrição prometia

Esta leva não saiu de um padrão de mercado nem de uma referência. Saiu de uma auditoria da distribuição: midia tinha 12 componentes e overlay tinha 1, e a descrição de duas categorias prometia, por escrito, peças que nunca foram construídas.

Categoria não é cota — mas descrição que promete e não entrega é dívida, e quem consome a biblioteca descobre isso no pior momento: no meio de um projeto, com o componente faltando e o prazo correndo. Todas as oito peças abaixo seriam improvisadas à mão em cada site, que é exatamente como se escreve um banner de LGPD errado ou uma tabela de comparação que é div.

Duas regras de forma que a leva firmou

Recusar tem de ser tão fácil quanto aceitar, e isso é layout. No aviso-cookies, os dois caminhos do primeiro nível não só usam a mesma primitiva como dividem uma grade de duas colunas iguais. Medido: numa fila comum, "Aceitar todos" saía com 158px contra 230px de "Recusar não essenciais", e a pílula mais curta lia como a secundária. Mesmo estilo não bastava.

Comparação honesta perde pelo menos uma linha. A tabela-comparativa destaca a coluna da casa, mas há um critério em que a alternativa empata ou ganha. Uma matriz em que o outro caminho só tem "não" é propaganda, e o leitor sente — a credibilidade da peça inteira depende dessa linha.

O que a leva devolveu ao core

Duas correções, as duas achadas por medição e nenhuma prevista no plano:

• .btn não zerava background nem appearance. Com color-scheme:only light, todo <button class="btn btn-ghost"> pintava o cromo cinza do sistema sob texto claro: medido em rgb(240,240,240) contra rgb(242,240,236) no conversao/diagnostico-perfil, que já estava assim no catálogo. Passou despercebido porque quase todo uso da primitiva é <a class="btn">, e âncora não tem cromo nativo.
• html{scroll-behavior:smooth} não tinha exceção para reduce. Toda âncora de todo componente atravessava a página rolando para quem pediu menos movimento, e cada script que rolava por conta própria contornava com behavior:'instant'. O contrato promete que reduce desliga tudo; agora o caso nativo também está coberto.

A leva de 2026-09-09: as tags magras, e o que elas revelaram

A vitrine passou a se organizar por tag e não por categoria (bin/tags.json), e a primeira coisa que o levantamento fez foi apontar onde a biblioteca era magra: videos tinha um componente, 4 colunas tinha um, big numbers tinha um. Nove peças depois: 4, 3 e 3.

O que a leva devolveu ao core

Três correções, e nenhuma estava no plano — todas saíram de alguém medindo o próprio trabalho e olhando para o lado.

--accent-ink: a cor de marca não é cor de texto. O core pintava o realce em itálico do título com --accent. Sobre o escuro isso dá 12:1; sobre o creme do .sec-paper, 1,36:1 — e já era assim em quatro componentes publicados. A mistura com a tinta do escopo resolve no claro (4,59:1) e não se aplica no escuro, onde clarearia e apagaria a marca.

Três heros perdiam a headline sem JavaScript. O @media(scripting:none) do core cobre [data-rv], .w e .ttl — e não alcança quem revela por classe própria. O full-bleed-media, que é destaque 3, mostrava foto e mais nada. Varridos os 70: treze usam classe própria, dez estavam certos (ali o script liga o comportamento e o CSS não esconde nada), e só os três heros escondiam argumento.

--sem-js no bin/medir.js. Três agentes escreveram javaScriptEnabled:false à mão antes de virar opção — e é ela que fez o defeito acima aparecer. A distinção importa: desligar o JS faz o Chrome casar scripting:none; apenas apagar as tags de script mede o outro caso, o script que não carrega com o JS ligado, onde nem o media query casa.

Uma recusa que vale mais que uma peça

Pedi a três agentes que parassem e relatassem se achassem que o irmão já resolvia. Nenhum parou — mas o da abertura tipográfica quase: a investigação mostrou que a versão centrada seria duplicata do bloco de texto do colunas-cascata, e a peça só se justificou depois de mudar de forma. É o resultado que a regra de ouro existe para produzir.

A leva de 2026-09-10: cotações, e uma forma descartada no caminho

Um componente só: o dados/cards-cotacoes — o painel de cotações que a fila autoral segurava desde 2026-08 sob o nome "ticker de índices", com a trava escrita no próprio registro: valor de cotação fictício num site financeiro é problema, não placeholder.

A fila estava certa em segurá-lo. Um painel de cotação construído do jeito comum é um componente que mente por padrão, porque o estado natural de um feed é morrer sem avisar — e a página segue mostrando a cotação de terça na sexta, sem que ninguém perceba.

O que destravou não foi um aviso na ficha

Foi inverter a pergunta. Em vez de "como avisar que o dado pode estar velho?", que é pergunta de documentação, "o que faz este componente afirmar que o dado é novo?" — que é pergunta de forma.

O que saiu disso, e é o motor do componente:

• O script não anima nada. Ele compara data-em com data-validade e escreve data-estado na raiz. O CSS lê o estado.
• A .coto-fonte — provedor, instante e atraso — é parte obrigatória do bloco. Sem provedor e sem instante, o preço acima não é cotação: é um número grande.
• Vencido, o preço sai do DOM — texto e atributo value — e o data-dir sai junto. Apagar por CSS deixaria a cotação retirada intacta na árvore de acessibilidade, e uma seta de alta sobre um traço vazio continuaria afirmando alta.
• O selo "ao vivo" é concedido, não escrito. Ele só é exibido sob [data-estado="vivo"] — não adianta pô-lo no markup. É a afirmação visual de que o número é de agora.
• Data no futuro conta como vencida, e data-validade="0" é a saída honesta de quem publica um fechamento em vez de tempo real.

A primeira forma foi construída inteira, e reprovada

A construção original era uma faixa em esteira, no padrão de ticker de bolsa: símbolo, valor e variação correndo de lado, com a regra "movimento é uma afirmação de que o dado está vivo" — a esteira só andava no estado vivo, e o clone que fechava o laço era criado pelo script, para que sem JavaScript não houvesse laço nem afirmação.

Funcionava, passava na conformidade e tinha ficha inteira. Foi reprovada na revisão pela forma, não pelo motor:

Em faixa, a pessoa espera o papel dela passar. Em card, ela procura.

Numa página institucional, quem abre a dobra de mercado quer conferir um papel específico — e a faixa transforma isso em espera. A forma que ficou é a do app de Ações do iPhone e a do painel do Google Finance, que é a leitura que o público já sabe fazer.

O motor de validade migrou inteiro. O que se perdeu foi a esteira — e o selo "ao vivo" ocupou o lugar que o movimento tinha como afirmação de liveness. Vale registrar porque é barato de esquecer: o mesmo motor serve às duas formas, e a escolha entre elas é de leitura, não de arquitetura. Se um projeto pedir a faixa um dia, o que se reconstrói é o CSS.

O método, e onde ele já tinha aparecido

É o mesmo raciocínio da prova/manchetes-imprensa, de seis dias antes: lá, <time datetime> e o href da matéria entraram no markup como estrutura, não como opção, porque um card com o logo de um jornal real e uma manchete sem data nem link não é peça de marketing — é notícia falsa atribuída a um veículo.

Vale escrever como método, porque os dois casos são o mesmo caso:

Quando a peça faz uma afirmação que ela não pode sustentar sozinha, o que falta vira estrutura do markup — não linha da ficha.

Ficha ninguém lê na hora de colar. Estrutura, sim: ela está no arquivo que a pessoa copia, e some junto se for apagada.

Duas medições que mudaram desenho

• preserveAspectRatio="none" pede vector-effect:non-scaling-stroke. O minigráfico estica até a largura do card, seja ela 230px ou 400px — é o que permite a mesma série servir a qualquer coluna. O preço é uma escala anisotrópica: sem o vector-effect, o traço engorda na horizontal e afina na vertical, e o gráfico do card largo fica visivelmente mais gordo que o do estreito.

• SVG não tem z-index. A área preenchida tem de vir antes da linha na ordem do documento; quem pinta por último fica por cima. Invertido, o preenchimento cobre metade do traço e o gráfico perde o contorno.

O que ficou de fora, e por quê

Verde e vermelho não ficaram de fora — viraram token do core. É a única mudança que esta leva fez fora da pasta do componente, e ela passou pela conversa que o §3 exige antes de criar nome novo no vocabulário da casa. A alternativa, deixar as duas cores como parafuso local, adiava o problema para o próximo que precisasse: o pill-status-pulsante está na fila do gabriel-rocha-studio esperando exatamente isso.

Duas decisões saíram junto, e as duas são do token, não do componente:

• O nome fala do papel, não do pigmento. --alta e --baixa, não --verde e --vermelho. Um projeto pode trocá-los por âmbar e azul sem que nenhum componente fique mentindo no próprio código.
• Os valores são redefinidos por escopo de tom, e isso foi medido: nenhum verde único alcança 4,5:1 contra #0a0a0a e contra #ffffff. O par calibrado para o escuro (#57bd82) cai para 2,3:1 sobre papel. Então .sec-dark/.sec-deep têm um par e .sec-paper/.sec-light têm outro, como já acontece com --fg e --rule. Os valores em :root são só o fallback de quem usar o token fora de uma seção com escopo.

E uma regra veio anexada ao token, escrita no tokens.css e no §3: cor nunca é o único portador da direção. O par verde/vermelho é exatamente o que 8% dos homens não distinguem. No cards-cotacoes a direção está na seta, no sinal e por extenso em .visually-hidden — o painel continua legível em preto e branco.

Papéis reais. Os do markup e do preview são fictícios de propósito — MRD3, ALT4, NBY11 e QDR3, das casas inventadas Meridiano, Altamira, Northbay e Quadrant, os mesmos nomes que a prova/manchetes-imprensa já usa. Papel inventado com preço inventado é demonstração; papel real com preço inventado é informação financeira falsa, e nenhum desenho de componente conserta isso.

Linha reta por falta de dado. Card sem série fica sem minigráfico, e não com uma curva plana. Linha reta desenhada por ausência de dado é a mesma mentira do preço vencido, em forma de gráfico.

A leva de 2026-09-29: o que as bibliotecas grandes têm e a casa não tinha

Pedido do dono: carta branca para melhorar a biblioteca — ler tudo, testar, pesquisar bibliotecas externas, criar elementos novos. A leva começou por uma comparação com a taxonomia das grandes bibliotecas de seção (Relume organiza a dela em Hero, Header, Feature, CTA, Contact, Pricing, FAQ, Testimonial, Logo, Blog, Gallery, Banner; Aceternity e Magic UI puxam para efeito de texto e de fundo) e com o que um site de assessoria precisa de fato. Três lacunas eram de tipo de conteúdo, e não de efeito:

O método que atravessou a leva inteira

Quatro dos cinco são o motor do dados/cards-cotacoes aplicado a objetos diferentes — o que a peça afirma e não pode sustentar sozinha vira estrutura:

E nos quatro, sem JavaScript a afirmação não aparece: o span nasce vazio, o selo não é escrito, o botão fica como foi publicado. A peça nunca diz o que não consegue conferir.

Três que ficaram de fora, e por quê

• Texto que acende com a rolagem. Foi construído, medido e publicado no branch — e saiu no merge com a main, onde a leva do SkinBoost de 2026-09-21 já tinha trazido o efeitos/destaque-texto-scroll: o mesmo padrão, mais maduro (acende por linha ou por palavra, variação pinada, seção de compliance). Duas sessões em paralelo chegaram à mesma peça sem uma ver a outra, e a regra de ouro decidiu sozinha: antes de inventar, procure no catálogo — inclusive no catálogo que chegou depois. Ficou a lição de processo: numa sessão longa, git fetch e reler o catalogo.json da main antes de catalogar, não só antes de começar.

• Faixa de anúncio no topo ("novo relatório →", com prazo de validade). Construída na cabeça, reprovada no encaixe: o navegacao/nav-fixa-vidro é position:fixed no topo, e uma faixa em fluxo acima dele nasce coberta pelo menu. Resolver pede que o menu leia a altura da faixa — mexer no componente do menu para caber no vizinho, que é o que o §10 proíbe. Foi para a fila com a nota.

• Brilho que segue o ponteiro (o spotlight card da Aceternity e da Magic UI). Descartado pela regra que entrou no mesmo dia: hover não mexe em nada (CLAUDE.md §6). O brilho não desloca nada, mas é efeito de passagem de mouse, e a razão do dono para a regra — "sempre acaba quebrando as páginas" — pede menos efeito de hover, não um novo.

O que a leva devolveu à casa

• bin/varredura.js — os previews inteiros no Chrome, em quatro cenários. Na primeira passada achou três defeitos publicados que nenhum validador de código via (MANUAL §9, README).
• A regra do hover e a verificação dela no conformidade.py, com dez zooms de foto e cinco botões que saltavam removidos (MANUAL §6).
• A ficha com o componente rodando — palco com largura de tela e tema trocáveis, código com realce e cópia exata (bin/realce.py).
• Dois termos no vocabulário editorial (publicacao-datada, canais-contato) e uma tag de vitrine (Artigos e agenda).

Fila autoral

Padrões mapeados e ainda não construídos. Entram quando um site real pedir — categoria não é cota.