← Biblioteca CATALOGO.md CatálogoContratoManualLeia-me
índice

Catálogo

Índice humano. O de máquina é o catalogo.json. Para ver rodando, abra o showroom.

Status: 🟢 estável (sem pendência — copie) · 🟡 revisar (tem pendência aberta na ficha) · 🔵 experimental (a forma ainda pode mudar)

As tabelas abaixo são geradas a partir dos componente.json. Não edite à mão — rode python bin/indice.py.

Hero

Aberturas de página, acima da dobra.

Componente Status Compl. Resumo
hero/full-bleed-media 🟢 alta Abertura de tela cheia com foto sangrada, scrim duplo, headline revelada linha a linha e régua opcional de 4 números.
hero/slideshow-cinematico 🟢 alta Abertura de tela cheia com três slides de foto sangrada que trocam sozinhos a cada 7s. Cada foto entra em fusão com desfoque e passa o slide inteiro num zoom lento (Ken Burns); a headline do slide entra palavra a palavra, com olho e botão próprios. No pé, uma barra de abas numeradas em que a ativa tem uma linha de progresso que enche no tempo do slide. Clique, setas do teclado e arrasto no toque trocam; ponteiro sobre o texto, foco dentro da seção, aba oculta, dobra fora da tela e o botão de pausa param o relógio, que retoma do ponto exato.
hero/campo-de-conversa 🟢 média O hero em que a primeira dobra não é um botão: é um campo. Olho, pergunta em duas linhas, uma frase de apoio e, embaixo, uma caixa de texto grande com um disco de envio no canto e três chips de intenção que submetem por atalho. Sob o campo, a ressalva de compliance. O bloco é um
de verdade: o disco e os três chips são
hero/duas-colunas-produto 🟢 alta Texto à esquerda e um palco à direita: trilho de fotos que vira pelas setas, com cards de interface flutuando sobre a foto em posição percentual. Os cards boiam de leve e podem entrar em sequência, contando uma narrativa de três passos em laço.
hero/centrado-prova-social 🟢 média Hero sem foto: um painel escuro recuado das bordas da página, com canto arredondado e fio de borda, e dentro dele quatro coisas centradas — linha de prova social com três rostos sobrepostos, promessa, apoio e um botão. A coreografia é o componente: quatro tempos disparados por .in na raiz, com a headline entrando palavra a palavra e o botão estourando por último. As faixas de luz do fundo são gradiente, não imagem — a dobra inteira roda sem asset além dos três rostos.
hero/video-fundo 🟢 média Abertura de tela cheia em que a superfície é um loop de vídeo sangrado até a borda: scrim duplo, véu desfocado com máscara em degradê, headline revelada linha a linha e régua opcional de 3 números. O poster é obrigatório e é o que a pessoa vê para sempre sob movimento reduzido, economia de dados ou autoplay recusado; o botão de pausa é o único jeito de parar o loop, e a WCAG 2.2.2 o exige.
hero/letreiro-marca 🟢 média A primeira dobra é o nome: a marca em caixa alta ocupando a largura exata da coluna (100cqi dividido pela largura da palavra em em, que o script mede depois que a fonte carrega), com a capa do showreel pousada sobre as últimas letras. Embaixo, separada por filete, a promessa como

, um link de texto e a hora no escritório — concedida pelo LIB.relogio do core, nunca escrita. O nome entra letra a letra, com blur.

Mídia

Carrossel, galeria, vídeo, antes-e-depois.

Componente Status Compl. Resumo
midia/carrossel-anel-3d 🟢 alta Oito cards de foto dispostos sobre um cilindro visto de frente. O anel gira sozinho e devagar, obedece ao arrasto do mouse e do dedo com inércia, encaixa no card seguinte pelas setas do teclado e por dois botões, e leva o card da frente a escala 1 — nítido, sem a ampliação que borra texto em 3D. Os laterais escurecem conforme recuam e a metade de trás não aparece. Abaixo do palco, uma legenda diz o título e a categoria do card da frente, e um contador diz onde se está.
midia/carrossel-foco-central 🟢 alta Fila de cards retrato que encaixa sempre com um no centro: o card centrado fica em tamanho e brilho cheios, os vizinhos encolhem e escurecem em proporção à distância, com um pedaço deles sempre à mostra. Anda por arrasto de mouse, gesto de toque, dois botões, seis pontos e as setas do teclado. Abaixo da fila, a descrição do card ativo troca com blur, ao lado de um contador 02 / 06. O motor é scroll-snap nativo; o script só mede a distância ao centro e escreve --focus-k.
midia/cartoes-3d 🟢 alta Seis cartões desenhados em CSS num tambor que gira em torno do eixo horizontal: o da frente de pé e inclinado, os vizinhos recuando e escurecendo acima e abaixo. Gira por arrasto (vertical no mouse, horizontal no dedo), pelas setas, pelos pontos e pelo teclado; tocar no cartão da frente o vira e mostra o verso. Ao lado, o nome e a descrição do acabamento em destaque. Os acabamentos saem dos tokens — trocar o tema troca os cartões. Nada anda sozinho e nada reage ao cursor. Variação por rolagem: a grade gruda e a página gira o tambor.
midia/faixa-horizontal-pinada 🟢 alta A dobra que atravessa: a seção prende a tela e uma fila de fotos grandes e pequenas alternadas caminha da direita para a esquerda enquanto a pessoa rola, com 1px de rolagem valendo 1px de trilho. Cabeçalho fixo no canto do palco, legenda dentro de cada imagem, barra de progresso e contador 03 / 06 no pé. Sem GSAP: a conta é do componente, dentro do laço único do core. Abaixo de 760px e com movimento reduzido a mesma dobra vira uma faixa comum de scroll-snap horizontal.
midia/roda-de-cards 🟢 alta Linha do tempo sobre o aro de uma roda-gigante cujo centro fica abaixo da dobra: aparece só a calota de cima, com o card do topo em pé e nítido e os vizinhos descendo pelas laterais inclinados como raios, esmaecendo com a distância angular. Arrastar gira a roda com inércia e ela encaixa no card mais próximo do topo; setas, botões e toque num card lateral levam ao mesmo lugar. Um painel central com ano grande, título e uma linha troca com blur a cada parada. A roda tem começo e fim — não dá volta.
midia/video-escovado-scroll 🟢 alta Uma seção alta que prende a tela e usa o scroll como agulha do vídeo: o currentTime acompanha a fração já rolada do trilho. O vídeo não toca — ele é escovado, e desfaz quando a pessoa rola de volta. Por cima, a copy do manifesto ancorada; num canto, a leitura de progresso (início · % · fim) com a ressalva de que aquele percentual é de rolagem e não de rentabilidade. Sem escova sob movimento reduzido, sob economia de dados e sem JavaScript: fica o pôster com a copy inteira.
midia/comparador-antes-depois 🟢 média Duas fotos do mesmo enquadramento, uma sobre a outra, e um divisor vertical que a pessoa arrasta para revelar uma ou outra. O controle é um nativo invisível sobre a imagem — daí vêm teclado, toque e o anúncio de porcentagem. Uma fileira opcional de miniaturas troca o par comparado, de um a quatro, e a ressalva embaixo é exigida: antes e depois é onde um site de assessoria escorrega para promessa de resultado.
midia/showreel-expansivel 🟢 média Capa com foto, botão de play e legenda. No clique ela cresce do lugar exato onde está até cobrir a tela, e entrega um
midia/carrossel-perfis 🟢 alta Coluna de texto com título display gigante à esquerda e, à direita, um trilho infinito de cards de pessoa que anda sozinho, sangra pela borda e responde ao arrasto. A bio cobre a foto no hover. No chão da seção, uma esteira de texto em tinta fraca.
midia/esteira-dupla-imagens 🟢 alta Duas fileiras de fotos paisagem grandes atravessando a tela em sentidos opostos, uma acima e outra abaixo de uma frase centrada. A velocidade das esteiras reage à rolagem: rolar rápido acelera as duas e inclina as fotos, soltar devolve o ritmo de cruzeiro em cerca de um quarto de segundo. Progressivo — sem JavaScript as fileiras já andam por animação de CSS; com JavaScript o script assume o movimento, passa a contar em pixels por segundo e acrescenta a reação.
midia/galeria-pasta 🟢 alta Pilha de fotos dentro de uma pasta: o clique estende as fotos em linha e arrastar uma foto para baixo fecha. Sob o ponteiro a pasta só acende — nada se mexe no hover.
midia/pilha-swipe 🟢 alta Duas colunas: o argumento da dobra à esquerda, com botões e contador, e à direita uma pilha de cinco fotos deslocadas, encolhidas e inclinadas como cartas na mesa. O card de cima acompanha o dedo e gira com o gesto; passado 30% da largura ele voa para fora e entra pelo fundo, e a pilha nunca acaba. Avança também por botão, por seta do teclado e por toque na faixa do card de baixo. O script só reescreve índices — nenhum nó muda de lugar no DOM.
midia/colunas-cascata 🟢 média Parede de fotos em movimento com a promessa parada no meio: quatro colunas verticais de retratos, cada uma uma esteira infinita, vizinhas em sentidos opostos e velocidades diferentes, o conjunto inclinado 6 graus e ampliado até sangrar as quatro bordas, com as pontas desvanecendo em máscara. Por cima, centrado, olho, frase display e botão. CSS puro, sem script: cada trilho anda -50% da própria altura, que é a altura exata de um dos dois conjuntos idênticos.
midia/faixa-videos 🟢 média Índice de uma série de vídeos curtos: três a seis capas 16:9 em grade de três colunas, cada uma com duração, título e o rótulo que situa o item na série — tudo dentro da imagem. O card é um
midia/grade-cases-foto 🟢 baixa Quatro retratos em fileira, cada um um link de verdade: foto 3:4, categoria em cor de marca e título ancorados DENTRO da imagem, sobre gradiente mais véu desfocado com máscara. No hover a foto ganha cor e um filete de marca cresce no rodapé do card. É a grade que o trilho não sabe ser: mostra o conjunto inteiro de uma vez, não pede gesto e não pede uma linha de JavaScript. Em 390px vira 2x2, para o conjunto continuar caindo numa tela.
midia/case-ficha-flutuante 🟢 média Um caso por linha, na largura da coluna: mídia 16:9 (foto ou loop de vídeo mudo) e, pousada no canto de baixo dela, uma ficha clara com o tema, uma frase sobre o trabalho com realce, quem era o cliente em cinco palavras e as frentes em pílulas. O caso inteiro é clicável por um link esticado a partir do título; a ficha fica dentro da mídia também no celular, onde a mídia vira 4:5. Com vídeo, toca só na tela, com pausa do core e parado sob movimento reduzido.
midia/galeria-scroll-horizontal 🟢 média Faixa de cases que sangra até a borda e rola na horizontal com encaixe. Cada card é uma foto 4:3 que ganha cor no hover, com distintivo de marca no canto e nome e tipo sobre a imagem.

Conteúdo

Blocos de texto e imagem: manifesto, colunas, alternado, grids editoriais.

Componente Status Compl. Resumo
conteudo/rolagem-sincronizada 🟢 alta Duas colunas e um fio no meio: à esquerda quatro blocos de texto altos que passam rolando, à direita um painel de foto pinado que troca de imagem em fusão com blur quando o bloco correspondente chega à faixa de leitura. O passo ativo acende em tinta cheia, os outros ficam em tinta de apoio, e o trilho vertical preenche continuamente com um ponto por passo. No celular a mesma árvore vira uma coluna com o painel pinado no topo e o texto passando por baixo dele.
conteudo/trio-cards-ui-simulada 🟢 alta Cabeçalho em duas colunas — título e botão de um lado, apoio do outro — e três cards altos de mesma altura, cada um com uma peça de interface funcionando dentro: uma fila de classes de ativo que rotaciona, uma foto com pílulas de imposto evitado girando por cima e um card claro com seletor de período e gráfico de barras que se recalcula.
conteudo/entregaveis-pastas 🟢 média O serviço intangível vira objeto: uma pasta desenhada em CSS por documento que o cliente recebe — nome, quantas páginas, do que trata — e ao lado o guia do cliente aberto numa página de papel, com um botão que vira para a seguinte. Pastas paradas (nada abre no hover); sem JavaScript o guia fica na primeira página.
conteudo/manifesto-com-imagens 🟢 baixa Faixa de três linhas em caixa alta e corpo grande, quebradas na mão, em que retângulos de foto ocupam o lugar de uma palavra dentro da frase. A imagem entra em linha (inline-block, align-middle, medidas em em), não como bloco: ela é uma palavra, não uma ilustração. Cada palavra acende numa cor de marca no hover, e o respiro vertical é menos da metade do de uma seção — a faixa é pontuação entre duas dobras, não uma dobra.
conteudo/bento-recursos-expansivel 🟢 média Dobra clara com cabeçalho à esquerda e um bento de três colunas em duas linhas: um card largo de foto com título e parágrafo por dentro da imagem, um card escuro com lista de checks e botão ao lado, e três cards escuros embaixo cujo parágrafo abre no clique de um botão redondo.
conteudo/lista-beneficios-palco 🟢 média Duas colunas ~7/5. À esquerda um palco: uma foto com quatro peças soltas boiando em volta — um cartão de patrimônio consolidado, uma confirmação de ação concluída, um arco e uma linha pontilhada ligando as duas. À direita quatro benefícios em lista, cada um com ícone em círculo, título com pílula opcional, uma frase, um link opcional com seta e um filete de 2px, mais um botão fechando a coluna. Zero JavaScript.
conteudo/vitrine-destaque 🟢 média Uma frente por vez, do tamanho de uma dobra: card largo com foto sangrada, categoria e título escritos dentro da imagem, um número grande com o rótulo do que ele mede e a ressalva presa a ele, uma frase e três atributos com ícone de traço. Embaixo, a fileira de três a quatro escolhas troca o destaque — abas no padrão APG, com setas, Home/End e roving tabindex. Sem script a peça continua inteira: os quatro destaques ficam empilhados e legíveis, e a fileira vira quatro âncoras de verdade.
conteudo/apresentacao-foto-alternada 🟢 baixa Dobra de apresentação em duas colunas: retrato que se reveza entre três fotos no mesmo quadro, e do outro lado um título display gigante quebrado na mão com dois parágrafos. A troca é fusão com blur, não corte seco.
conteudo/imagem-lista-numerada 🟢 baixa Duas colunas: foto que estica na altura da linha e desloca em parallax, e lista numerada de 3 a 4 diferenciais com título e frase.
conteudo/pilares-texto-na-foto 🟢 baixa Grade de três cards em retrato; número, título e frase ficam dentro da imagem, sobre gradiente e blur mascarado.
conteudo/abertura-tipografica 🟢 baixa Dobra que anuncia um capítulo da página e não carrega nada: olho, uma frase em corpo de display alinhada à coluna e um apoio curto. Sem card, sem lista, sem foto e sem botão. Não é o cabeçalho de uma seção — é a porta de entrada dela, e é por isso que o ritmo vertical é assimétrico (respiro cheio em cima, 40% embaixo) e que a frase usa a primitiva gráfica .display-xl em vez do rótulo h2.sec-title. A quebra de linha é escrita à mão e devolvida ao balance do core abaixo de 720px; a entrada é palavra a palavra pelo data-split.
conteudo/grade-servicos-icone 🟢 baixa Quatro serviços em grade regular de pesos iguais: filete no alto, ícone de traço em caixa, título de uma a três palavras e uma frase. Sem foto, sem hover, sem JavaScript — é a peça de menor custo editorial da casa.
conteudo/grid-entidades 🟢 baixa Quatro cards de vidro, cada um com uma marca (logo ou texto) e uma lista curta de atributos. Alinha logo e texto pela mesma faixa de altura fixa.
conteudo/grid-equipe 🟢 baixa Cabeçalho centralizado, uma pessoa em destaque num card largo e o restante do time em grade de três. Placeholder de iniciais enquanto não há fotos.
conteudo/manifesto-citacao 🟢 baixa Citação grande em itálico revelada palavra a palavra, com parágrafo de apoio e link de texto na coluna ao lado.

Dados e diagramas

Mapas, globos, diagramas calculados, gráficos.

Componente Status Compl. Resumo
dados/globo-canvas 🟢 alta Esfera em projeção ortográfica desenhada em canvas a partir de pontos lat/lng, girando conforme a rolagem, com arcos de rota que acendem em sequência.
dados/painel-patrimonio 🟢 alta Uma dobra inteira que encena o portal do cliente: um painel de vidro com barra de aplicativo, abas de janela (7d · 30d · 12m) e quatro peças que recalculam juntas — patrimônio consolidado que conta ao entrar na tela, rosca de cinco classes de ativo com a leitura em texto ao lado, barras horizontais por instituição fictícia e a linha da janela desenhando por stroke-dashoffset. Interface simulada e decorativa, sem campo para preencher: ninguém digita nada, e o painel fica inteiro e correto sem JavaScript.
dados/regua-liquidez 🟢 alta Linha do tempo de 30 anos em que a pessoa arrasta cinco fichas de objetivo — reserva, imóvel, faculdade, empresa, renda — e vê a exigência de liquidez redesenhar embaixo, em área SVG montada por string. Ao lado, três faixas por horizonte que somam sempre 100 por maior resto. Arrasto por pointer events com captura e limiar de 6px, equivalente completo de teclado, e fichas que se desempilham em filas quando ficariam sobrepostas.
dados/cards-cotacoes 🟢 média A grade no feitio do app de Ações do iPhone e do painel do Google Finance: um card por papel, com símbolo, nome, minigráfico de área, preço em corpo grande e a variação com seta. O selo "ao vivo" só existe enquanto a leitura está dentro da validade declarada — vencido o prazo, os preços saem do DOM, a cor de direção some e um aviso diz desde quando. O feed real entra por CustomEvent, sem editar o HTML.
dados/diagrama-hub 🟢 alta Dois territórios com listas ligados por traços SVG a um núcleo em órbita, mais uma terceira ramificação embaixo. O caminho de cada traço é calculado a partir da posição real dos elementos.
dados/comparador-cenarios 🟢 média Ferramenta de dobra que compara o custo de dois modelos de remuneração — taxa previamente acordada e comissão embutida no produto — em duas faixas de controle (patrimônio e horizonte), oito barras verticais em quatro marcos de tempo, três números que contam e a tabela com o custo acumulado de cada marco. Compara custo, nunca resultado: o patrimônio entra constante e não há projeção de rentabilidade.
dados/fluxo-conectado 🟢 baixa Três a cinco caixas em fileira, cada uma ligada à seguinte por um traço de 1px que termina em ponta: de onde vem, por onde passa, onde chega. Sem uma linha de JavaScript — o traço mora no vão da grade, e no celular a cadeia vira vertical com o traço acompanhando.
dados/grade-indicadores 🟢 baixa Quatro a seis indicadores em grade, e em cada um o valor, o rótulo, a variação no período e o período em que ela foi apurada. A direção viaja em quatro canais — palavra, seta, cor e período —, nunca só na cor. A data de referência é obrigatória e mora na própria peça. CSS puro, sem script.

Conversão

CTA, formulário, agendamento, planos, campos de formulário.

Componente Status Compl. Resumo
conversao/calculadora-projecao 🟢 alta Três faixas (patrimônio inicial, aporte mensal, horizonte) e um chip de cenário; ao lado, um gráfico de área em SVG que se redesenha a cada ajuste. O desenho é uma FAIXA entre dois cenários simulados, não uma linha só — é isso que impede a peça de ler como promessa de rentabilidade. Sem lib.
conversao/calculadora-sucessao 🟢 alta Três controles simples (patrimônio em faixa, estado em select, herdeiros em passo-a-passo) e dois cartões que se recalculam lado a lado: inventário judicial contra holding familiar com doação em vida. Cada cartão soma parcelas visíveis — ITCMD, custas e honorários —, mostra prazo em faixa e uma barra scaleX na mesma escala do vizinho. O ITCMD aparece nos dois lados, com o mesmo valor: holding não elimina imposto, antecipa e organiza. Sem lib.
conversao/diagnostico-perfil 🟢 alta Dobra escura, sem imagem, em que uma pergunta por vez ocupa a tela: o enunciado é a peça gráfica (a primitiva .display-xl do core) e as respostas são linhas grandes com número, texto e um filete que acende na cor de marca. Cinco perguntas curtas, ritmo rápido, e no fim um perfil nomeado entre quatro, com parágrafo de leitura, três traços e uma faixa de alocação em texto — faixa, nunca percentual cravado. Radios de verdade em fieldset com legend, foco que vai para o enunciado novo, região aria-live, e avanço automático que existe só para quem clica e desliga em movimento reduzido. Sem JavaScript, as cinco perguntas ficam empilhadas como formulário comum.
conversao/simulador-carteira 🟢 alta Dobra de tela quase cheia partida em dois: foto sangrada com o título display por cima e, sobreposto à direita, um painel-assistente de quatro passos — objetivo em cartões de rádio, composição em select mais seletor de faixa, horizonte e conhecimento em chips, e um resultado com rosca SVG de alocação, leitura em texto, ressalva de compliance e saída para a conversa.
conversao/cta-com-assessor 🟢 média A chamada final com uma pessoa: retrato, uma frase em primeira pessoa, nome, cargo e dois botões (agendar com ela, WhatsApp). O selo "Atende agora · até 18h" ou "Volta amanhã às 9h" é concedido pelo relógio lido no fuso do escritório, nunca escrito; sem JavaScript ele não aparece.
conversao/agendamento-reuniao 🟢 alta Painel de vidro em que a pessoa marca a primeira conversa sem sair da página: uma fila de dez dias úteis com dia da semana, número, mês e o número de vagas — o dia sem vaga fica apagado e tracejado, porque a ausência informa —, depois a grade de horários daquele dia, com o fuso declarado na própria peça, e só então o formulário mínimo, com o resumo do que foi escolhido editável em dois cliques. A disponibilidade vive toda no HTML, em atributos, e o script só reage: plugar um backend não pede reescrever a peça. Dias e horários são grupos de radio de verdade, com setas nativas, aria-live que anuncia "Quinta, 12 de março, 15h30 selecionado" e avanço automático só para quem clica. Sem JavaScript, os dez dias, as oito grades e os quatro campos ficam de pé como um formulário comum.
conversao/contato-escritorios 🟢 média Para quem já decidiu falar: os canais em corpo grande de um lado — WhatsApp, e-mail, telefone, cada linha um link que abre o aplicativo certo — e um card por escritório do outro, com endereço, horário e "Como chegar". O selo "Aberto agora · fecha às 18h" é concedido pelo relógio no fuso do escritório, nunca escrito.
conversao/planos-honorarios 🟢 média Os modelos de relacionamento de uma assessoria em três colunas lado a lado, para a pessoa se reconhecer num deles e seguir para a conversa. Não é tabela de preços de SaaS: cada coluna traz o nome do modelo, para quem é, a faixa de patrimônio de entrada, o honorário em FAIXA (nunca número cravado) e o que está incluído, com a premissa que gera a faixa visível na própria peça. Uma alternância em grupo de radio troca entre dois conjuntos — pessoa física e família, empresa e holding — com saída em blur e entrada escalonada por coluna. As linhas equivalentes das três colunas ficam alinhadas na horizontal por subgrid, nunca por altura fixa, e é isso que permite ler de lado e comparar. O destaque de uma coluna é editorial e qualificado (um filete na cor de marca e uma pílula do core), nunca um "melhor plano". Sem JavaScript os dois conjuntos aparecem empilhados, cada um com o seu subtítulo.
conversao/selo-prazo 🟢 média A escassez que só aparece se for verdade: um bloco de chamada com o selo "Faltam 3 dias" e "Restam 2 de 12 vagas" e a barra de lugares ocupados, todos concedidos pelo script a partir do prazo e da contagem declarados. Contagem velha não aparece; prazo vencido ou vagas zeradas tiram o botão do DOM e mostram a mensagem de encerrado.
conversao/cta-dois-caminhos 🟢 baixa O fecho em que o próximo passo são duas portas de mesma largura, cada uma um link inteiro: com hora marcada ou agora, e-mail ou telefone, família ou empresa. Rótulo pequeno, título em corpo de display, uma linha de apoio e a seta no canto; um dos dois pode vestir a cor de marca. CSS puro.
conversao/cta-pilula-gigante 🟢 baixa O botão é a dobra: uma frase curta em cima e uma pílula da largura da coluna com a chamada em corpo de display e a seta num disco; embaixo, e-mail e telefone em texto pequeno. Parada de propósito, e o hover esvazia o miolo como o .btn-primary do core. CSS puro.
conversao/cta-formulario-lead 🟢 alta Seção de conversão com foto de fundo esmaecida: argumento e lista de benefícios de um lado (sticky), card de vidro com formulário do outro.
conversao/cta-fechamento-foto 🟢 baixa Última dobra antes do rodapé: foto sangrada quase apagada sob gradiente de três paradas, a assinatura da marca em itálico grande e um botão. Sem script.
conversao/faixa-newsletter 🟢 baixa A promessa da carta de um lado; campo de e-mail, botão e caixa de consentimento desmarcada do outro. Envia para o action do form e só diz "Pronto" com resposta de sucesso — sem action, avisa que é demonstração em vez de fingir que inscreveu.
conversao/select-custom 🟢 média Substituto do

Listas e coleções

Serviços, etapas, perguntas — tudo que enumera com interação.

Componente Status Compl. Resumo
listas/baralho-sticky 🟢 alta Etapas em cards de vidro que grudam no topo em alturas escalonadas, encolhendo e apagando conforme são cobertos, sobre uma foto que fica pinada por uma tela inteira.
listas/lista-imagem-flutuante 🟢 alta Seis linhas grandes — número, título display, categoria e seta — e uma foto que aparece ao passar o ponteiro, acompanha o cursor com atraso e se inclina conforme a velocidade da mão. A linha sob o ponteiro acende e as outras esmaecem. No teclado a foto pousa à direita da linha focada; no toque, cada linha mostra a própria miniatura e o script nem roda.
listas/etapas-em-abas 🟢 alta A dobra "como funciona" que anda sozinha no TEMPO, e não pela rolagem. À esquerda a lista de etapas — número, título e a descrição, que só abre na etapa ativa, com um filete que enche embaixo dela no tempo da etapa. À direita o painel que troca junto, em fusão com desfoque. Acima, os três discos de reprodução: anterior, pausar, próxima. É um role="tablist" do W3C APG de verdade: setas, Home/End e roving tabindex. Qualquer escolha explícita desliga o rodízio em definitivo, e o botão de reprodução é o caminho de volta.
listas/agenda-eventos 🟢 média Lista de encontros com o dia em corpo de display, formato, título, linha e horário, e o botão de inscrição no fim da linha. O script compara início e fim de cada evento com o relógio: durante, concede o selo "Acontecendo agora"; depois, tira o botão do DOM e marca "Encerrado", com o link da gravação se houver.
listas/leque-paineis 🟢 média 4 a 6 painéis de foto lado a lado; o ativo expande e revela o conteúdo, os fechados mostram só o rótulo vertical. Dois modos no mesmo motor: serviço (número, título e benefício) e depoimento (.fan-depo — aspas, citação, nome, contexto e contador), este com rodízio opcional e controles de anterior, pausar e próximo.
listas/linha-do-tempo-etapas 🟢 média Cinco etapas de um processo empilhadas numa coluna só, ligadas por um filete vertical que se preenche conforme a página rola. Cada etapa traz número, prazo estimado em pílula, título e um parágrafo; o marcador acende quando ela cruza a linha de leitura, e o preenchimento para exatamente no último marcador. Sem clique, sem JavaScript obrigatório: sem script o filete nasce cheio e as etapas continuam legíveis.
listas/paineis-empilhados 🟢 média Quatro painéis de largura cheia, irmãos e colados no mesmo topo: cada um sobe e cobre o anterior por inteiro, e um índice lateral também colado marca o capítulo corrente e leva a qualquer um deles no clique. A pilha é position:sticky em CSS puro; o script só marca e rola.
listas/programacao-evento 🟢 média O que acontece dentro de um evento: cada dia um bloco, com dia, data, tema e uma frase grudados à esquerda enquanto as sessões passam à direita — hora, duração, formato, título, uma linha e quem fala. No dia do evento, o script concede "Acontecendo agora" à sessão em curso e apaga as que já passaram; fora dele, nada muda.
listas/grade-artigos 🟢 baixa A dobra de conteúdos: um artigo em destaque com foto e o texto dentro dela, e ao lado uma lista tipográfica de três — categoria, data, tempo de leitura, título e linha fina. A data é
listas/lista-honorarios 🟢 baixa O preço antes do trabalho: serviços em linhas — número, nome, para quem é, o que inclui numa frase e o honorário "a partir de" alinhado à direita, com "Sob proposta" onde o valor depende de escopo e a ressalva no pé. Uma
semântica que vira blocos empilhados no celular sem perder os papéis de tabela.
listas/tabela-comparativa 🟢 média Matriz de três modelos de serviço e remuneração, critério a critério: sete linhas de critério, três colunas de modelo, e em cada célula um disco de estado (cheio, meio, vazio) com a palavra e uma frase curta. É uma
de verdade, com caption, escopo de linha e de coluna. A coluna da casa tem filete na cor de marca; a linha inteira acende no hover. No celular a tabela vira um card por coluna, sem duplicar markup, pelo rótulo lido em content:attr(). Compara modelo e custo, nunca resultado.
listas/acordeao-faq 🟢 baixa Lista de perguntas com abertura em altura animada e sinal +/- que gira. Um item aberto por vez, com aria-expanded e aria-controls.

Prova social

Logos, depoimentos, números, cases, imprensa.

Componente Status Compl. Resumo
prova/manchetes-imprensa 🟢 baixa Recorte de jornal montado em HTML, no lugar do print de matéria: logo do veículo, manchete, linha fina, data e link para o original. O primeiro card ocupa a fileira inteira. O tom vem do escopo da seção — em .sec-paper lê como papel, em .sec-dark como card da marca. CSS puro, sem script.
prova/grade-logos-miolo 🟢 alta Malha de células com filete de 1px em que o texto da dobra ocupa o centro e os logos moram nas células de fora. Célula sem logo mostra hachura diagonal. A cada 2s alguns logos vizinhos trocam de célula, deslizando — a grade lê como painel vivo, não como lista.
prova/carrossel-depoimentos 🟢 média Cabeçalho de duas pontas — título à esquerda, apoio alinhado à direita — e uma esteira de cards brancos com retrato, nome, área e citação que atravessa a página sem parar, com as pontas desvanecendo em máscara. CSS puro: dois conjuntos idênticos e uma animação até -50% fecham o laço sem salto, e o hover pausa a fila para quem quer ler. Sem seta, sem indicador e sem arrasto — depoimento não se navega, se atravessa.
prova/depoimento-video 🟢 média Dois a quatro depoimentos em grade. Cada um é um retrato em corpo grande, com o nome e a praça da pessoa dentro da foto e a citação em texto logo abaixo — visível, sem clique. No clique, o vídeo cresce do lugar exato do retrato dentro de um nativo, com legenda declarada. A citação é a versão legível do depoimento: é ela que sobra quando o vídeo não toca, e é ela que o buscador lê.
prova/stats-contador-regua 🟢 média Três números gigantes separados por filetes verticais, com rótulo curto embaixo. Cada um conta de zero até o alvo em 1,8s quando a faixa entra na tela, uma vez só. Sem lib.
prova/mural-depoimentos 🟢 baixa Quatro a nove citações curtas paradas, em colunas de altura livre como um mural: a frase, o nome com a inicial do sobrenome, o serviço contratado, a data e a fonte da avaliação. No topo, a média agregada com fonte e data ao lado. Sem foto de cliente e só sobre atendimento, nunca sobre resultado. CSS puro.
prova/numero-gigante 🟢 baixa Uma cifra só, em corpo de 280px, ocupando a dobra: afixos em corpo reduzido na mesma linha de base, rótulo embaixo e, na coluna ao lado, a frase de contexto com a ressalva e a linha obrigatória de fonte e data. Sem JavaScript, sem contagem.
prova/marquee-logos 🟢 baixa Faixa de prova social com rótulo centralizado e fileira de logos em loop contínuo, pausando no hover. CSS puro.

Sobreposições

Modal, drawer de conteúdo, toast, aviso de cookies.

Componente Status Compl. Resumo
overlay/card-expansivel-fullscreen 🟢 alta Trilho horizontal de cards retrato. No clique, o card cresce do lugar exato onde está até cobrir a tela e vira um diálogo com foto, texto, tags e CTA. Todo o conteúdo do detalhe mora nos data-* do próprio card — não há HTML duplicado.
overlay/drawer-lateral 🟢 alta Painel que desliza da direita ocupando uma faixa da tela, com a página escurecida atrás. Cabeçalho e rodapé parados, corpo rolando sob máscara. Vários gatilhos, um painel só: o conteúdo de cada item mora no HTML estático e é movido para dentro ao abrir — sem JavaScript a página continua legível.
overlay/modal-dialogo 🟢 média O modal de texto da casa: um botão abre um painel centrado com cabeçalho parado e corpo que rola por dentro, cortado em gradiente em cima e embaixo. Sobre nativo com showModal — foco preso, Esc, retorno do foco e página inerte vêm dele. O disparo é declarativo (data-mdl-abrir="id"), então vários modais convivem na mesma página.
overlay/aviso-cookies 🟢 média Barra discreta colada embaixo, que não bloqueia a leitura e não prende o foco, com os dois caminhos do primeiro nível — "Recusar não essenciais" e "Aceitar todos" — na MESMA primitiva de botão e numa grade de duas colunas iguais, o que lhes dá a mesma caixa medida e não só o mesmo desenho, e um terceiro caminho para as preferências. Dentro, um nativo com um interruptor por categoria, a categoria necessária travada e explicada, e o que cada uma faz em português de gente. O componente não carrega nada de terceiro: ele grava a escolha com a versão da política e a data, e publica o estado em dois canais — o atributo data-lgpd-estado no , para quem chega depois, e um CustomEvent no document, para quem precisa reagir sem recarregar. O gancho [data-lgpd-reabrir] no rodapé é o caminho de volta.
overlay/toast-aviso 🟢 média Pilha de avisos efêmeros presa a um canto da tela (inferior direito no desktop; faixa inferior no celular), no máximo três por vez — o quarto empurra o mais antigo para fora. Cada aviso tem ícone de tom (info, ok, atenção), texto curto, botão de fechar e uma régua de tempo que encolhe por dt, nunca por quadro. Pausa ao passar o ponteiro ou ao receber foco, retomando de onde parou. Disparo é declarativo: qualquer botão da página com data-tst-dispara monta o aviso a partir de um