Índice humano. O de máquina é o catalogo.json.
Para ver rodando, abra o showroom.
Status: 🟢 estável (rodou em produção) · 🟡 revisar (tem pendência aberta na ficha) · 🔵 experimental (rodou uma vez) · ⚪ externo (nunca rodou)
As tabelas abaixo são geradas a partir dos
componente.json. Não edite à mão — rodepython bin/indice.py.
Navegação
Menu, drawer, botões flutuantes, âncoras, progresso de leitura.
| Componente | Status | Compl. | Resumo |
|---|---|---|---|
navegacao/nav-fixa-vidro |
🟢 | média | Menu fixo transparente sobre o hero que ganha fundo de vidro e linha inferior depois de 30px de rolagem. Sublinhado animado nos links, CTA em pílula. |
navegacao/botao-flutuante |
🟢 | baixa | Atalho circular fixo no canto inferior direito, na cor de marca. Link real, sem JavaScript. |
navegacao/drawer-fullscreen |
🟢 | baixa | Painel de tela cheia deslizando da direita, com trava de scroll, fechamento por Esc e devolução de foco a quem abriu. |
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. |
Conteúdo
Blocos de texto e imagem: manifesto, colunas, alternado, grids editoriais.
| Componente | Status | Compl. | Resumo |
|---|---|---|---|
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/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/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. |
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. |
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/leque-paineis |
🟢 | média | 4 a 6 painéis de foto lado a lado; o ativo expande e revela título e descrição, os fechados mostram número e título vertical. |
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. |
Mídia
Carrossel, galeria, vídeo, antes-e-depois.
| Componente | Status | Compl. | Resumo |
|---|---|---|---|
midia/galeria-pasta |
⚪ | alta | Pilha de fotos dentro de uma pasta: hover abre em leque, clique estende em linha e arrastar uma foto para baixo fecha. O leque é CSS puro; o script só abre, fecha e arrasta. |
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. |
Prova social
Logos, depoimentos, números, cases, imprensa.
| Componente | Status | Compl. | Resumo |
|---|---|---|---|
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/marquee-logos |
🟢 | baixa | Faixa de prova social com rótulo centralizado e fileira de logos em loop contínuo, pausando no hover. CSS puro. |
Conversão
CTA, formulário, agendamento, planos, campos de formulário.
| Componente | Status | Compl. | Resumo |
|---|---|---|---|
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/select-custom |
🟢 | média | Substituto do |
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. |
Dados e diagramas
Mapas, globos, diagramas calculados, gráficos.
| Componente | Status | Compl. | Resumo |
|---|---|---|---|
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/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. |
Rodapé
Rodapés e faixas legais.
| Componente | Status | Compl. | Resumo |
|---|---|---|---|
rodape/quatro-colunas |
🟢 | baixa | Marca com descrição e social na primeira coluna, três listas de links nas outras, parágrafo legal e barra final de copyright. |
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. |
Efeitos e primitivas
Quebras de seção, cursor, transições reaproveitáveis.
| Componente | Status | Compl. | Resumo |
|---|---|---|---|
efeitos/moldura-secao |
⚪ | baixa | A dobra de tom vizinho ganha faixas de gradiente no topo e na base que dissolvem suas bordas no tom das seções de fora, mais uma cercadura chanfrada com losango no meio. É a resposta canônica à regra do tom vizinho (§3): destaca sem salto de tom. CSS puro, sem imagem e sem JS. |
efeitos/quebra-papel-rasgado |
⚪ | baixa | Seção clara recortada em papel rasgado sobre o escuro: um clip-path de 58 vértices arranca as bordas de cima e de baixo, e o invólucro garante a cor que aparece dentro do corte. CSS puro, sem imagem e sem JS. |
Fila
Liberta Wealth
Varredura concluída — 18 componentes extraídos. Resta um item, e ele não é extração:
| Alvo | Situação |
|---|---|
efeitos/quebra-papel-rasgado |
A construir. Foi previsto no projeto de origem (a classe .torn existe e a seção de soluções a usa) mas nunca ligado: o CSS traz .torn{clip-path:none}. Não há o que extrair — precisa ser feito do zero. |
Projetos a varrer
tarvos-website — é a origem de boa parte das primitivas do core (reveal com blur, tom escopado, grão, .wrap). Deve ser o próximo.
lancamento-terceira-onda · organizza · vantis-platform · gerenciador-campanhas
Categorias ainda vazias
Mídia e sobreposições. Nenhum projeto varrido tinha carrossel, galeria, modal ou aviso de cookies próprio. Entram quando aparecerem — não vale inventar componente para preencher tabela.