Cada card roda o preview real do componente, não uma captura. Se o código mudar, a vitrine muda junto.
Hero
primeira dobra, acima da linha de corte
ago 2026
hero/full-bleed-media
Hero full-bleed com mídia, headline em linhas e régua de stats
3 set 2026
hero/slideshow-cinematico
Hero em slideshow cinematográfico
21 set 2026
hero/campo-de-conversa
Hero com campo de conversa
31 ago 2026
hero/duas-colunas-produto
Hero de duas colunas com palco de produto
1 set 2026
hero/centrado-prova-social
Hero centrado com prova social
1 out 2026
hero/letreiro-marca
Hero em letreiro de marca
Títulos
peças em que a tipografia é o conteúdo — a frase em corpo grande é a peça gráfica, sem card e sem lista
3 set 2026
midia/colunas-cascata
Colunas em cascata
1 set 2026
conteudo/manifesto-com-imagens
Manifesto tipográfico com imagens na linha
9 set 2026
conteudo/abertura-tipografica
Abertura tipográfica de dobra
ago 2026
conteudo/manifesto-citacao
Manifesto com citação em duas colunas
2 colunas
grade de dois blocos de conteúdo lado a lado
3 set 2026
conteudo/rolagem-sincronizada
Rolagem sincronizada com painel pinado
29 set 2026
conteudo/entregaveis-pastas
Entregáveis em pastas
6 set 2026
conteudo/lista-beneficios-palco
Lista de benefícios com palco ilustrado
1 out 2026
conteudo/apresentacao-foto-alternada
Apresentação com foto alternada
ago 2026
conteudo/imagem-lista-numerada
Imagem com parallax e lista numerada ao lado
3 colunas
grade de três blocos de conteúdo lado a lado
1 set 2026
conteudo/trio-cards-ui-simulada
Trio de cards com interface simulada
1 set 2026
conteudo/bento-recursos-expansivel
Bento de recursos com parágrafo expansível
ago 2026
conteudo/pilares-texto-na-foto
Três pilares com o texto dentro da foto
ago 2026
conteudo/grid-equipe
Equipe com pessoa em destaque e grade
4 colunas
grade de quatro blocos de conteúdo lado a lado
1 out 2026
midia/grade-cases-foto
Grade de cases com foto
6 set 2026
conteudo/grade-servicos-icone
Grade de serviços com ícone
ago 2026
conteudo/grid-entidades
Grade de entidades em cards de vidro
Carrossel
trilho, esteira, slider ou pilha — conteúdo que anda na horizontal, por gesto, por seta ou por rolagem
3 set 2026
midia/carrossel-anel-3d
Carrossel em anel 3D
3 set 2026
midia/carrossel-foco-central
Carrossel de foco central
29 set 2026
midia/cartoes-3d
Cartões 3D em tambor
3 set 2026
midia/faixa-horizontal-pinada
Faixa horizontal pinada
3 set 2026
midia/roda-de-cards
Roda de cards
31 ago 2026
midia/carrossel-perfis
Carrossel de perfis arrastável
3 set 2026
midia/esteira-dupla-imagens
Esteira dupla de imagens
ago 2026
midia/galeria-pasta
Galeria em pasta com leque de fotos
3 set 2026
midia/pilha-swipe
Pilha de cards com swipe
ago 2026
midia/galeria-scroll-horizontal
Galeria de cases em scroll horizontal
1 set 2026
prova/carrossel-depoimentos
Carrossel de depoimentos
1 out 2026
prova/marquee-logos
Esteira infinita de logos
Vídeo
peça cujo conteúdo é vídeo
6 set 2026
hero/video-fundo
Hero com vídeo de fundo em loop
21 set 2026
midia/video-escovado-scroll
Vídeo escovado pelo scroll
4 set 2026
midia/showreel-expansivel
Showreel expansível
1 out 2026
midia/faixa-videos
Faixa de vídeos
9 set 2026
prova/depoimento-video
Depoimento em vídeo
Big numbers
a cifra é o argumento, em corpo grande, com rótulo curto
10 set 2026
dados/cards-cotacoes
Cards de cotação
9 set 2026
dados/grade-indicadores
Grade de indicadores com variação
ago 2026
prova/stats-contador-regua
Régua de números com contagem
6 set 2026
prova/numero-gigante
Número gigante com fonte do dado
Ferramentas
a pessoa mexe em controles e lê um resultado: calculadora, simulador, comparador, painel
21 set 2026
midia/comparador-antes-depois
Comparador antes e depois
3 set 2026
dados/painel-patrimonio
Painel de patrimônio
3 set 2026
dados/regua-liquidez
Régua de liquidez com objetivos arrastáveis
3 set 2026
dados/comparador-cenarios
Comparador de cenários de custo
3 set 2026
conversao/calculadora-projecao
Calculadora de projeção
3 set 2026
conversao/calculadora-sucessao
Calculadora de sucessão
4 set 2026
conversao/diagnostico-perfil
Diagnóstico de perfil em cinco perguntas
3 set 2026
conversao/simulador-carteira
Simulador de carteira
Listas
enumeração com interação — etapas, perguntas, serviços, matriz de critérios
21 set 2026
conteudo/vitrine-destaque
Vitrine com destaque comutável
ago 2026
listas/baralho-sticky
Baralho de cards que se empilham sobre foto pinada
3 set 2026
listas/lista-imagem-flutuante
Lista com imagem flutuante
21 set 2026
listas/etapas-em-abas
Etapas em abas com reprodução
21 set 2026
listas/leque-paineis
Leque de painéis verticais
6 set 2026
listas/linha-do-tempo-etapas
Linha do tempo de etapas
6 set 2026
listas/paineis-empilhados
Painéis empilhados com índice
29 set 2026
listas/lista-honorarios
Lista de honorários por serviço
6 set 2026
listas/tabela-comparativa
Tabela comparativa de modelos
29 set 2026
listas/acordeao-faq
Acordeão de perguntas frequentes
Artigos e agenda
conteúdo com data — artigo, carta, evento: o que envelhece e por isso carrega a data na peça
29 set 2026
listas/agenda-eventos
Agenda de eventos que expira sozinha
29 set 2026
listas/programacao-evento
Programação de evento por dia
29 set 2026
listas/grade-artigos
Grade de artigos com destaque
Prova social
logos, depoimento, imprensa — por que acreditar
1 out 2026
midia/case-ficha-flutuante
Case com ficha flutuante
4 set 2026
prova/manchetes-imprensa
Manchetes de imprensa
31 ago 2026
prova/grade-logos-miolo
Grade de logos com miolo de texto
29 set 2026
prova/mural-depoimentos
Mural de depoimentos com fonte
Diagramas
relação entre entidades, desenhada e calculada
ago 2026
dados/globo-canvas
Globo de pontos em canvas, girando pelo scroll
ago 2026
dados/diagrama-hub
Diagrama hub com traços calculados sobre o DOM
9 set 2026
dados/fluxo-conectado
Fluxo conectado de caixas
CTA e formulário
pede o próximo passo: chamada, formulário, agendamento, planos, campo
29 set 2026
conversao/cta-com-assessor
CTA com o rosto do assessor
6 set 2026
conversao/agendamento-reuniao
Agendamento de reunião em três passos
29 set 2026
conversao/contato-escritorios
Contato com canais e escritórios
6 set 2026
conversao/planos-honorarios
Planos de honorários com alternância
29 set 2026
conversao/selo-prazo
Selo de prazo e vagas
29 set 2026
conversao/cta-dois-caminhos
CTA em dois caminhos
29 set 2026
conversao/cta-pilula-gigante
CTA em pílula gigante
ago 2026
conversao/cta-formulario-lead
CTA com formulário de captura
ago 2026
conversao/cta-fechamento-foto
CTA de fechamento com foto
29 set 2026
conversao/faixa-newsletter
Faixa de newsletter com consentimento
ago 2026
conversao/select-custom
Select customizado acessível
Sobreposições
modal, drawer, aviso de consentimento, toast — o que cobre a página
ago 2026
overlay/card-expansivel-fullscreen
Card que expande para tela cheia
6 set 2026
overlay/drawer-lateral
Drawer lateral de conteúdo
6 set 2026
overlay/modal-dialogo
Modal de diálogo
6 set 2026
overlay/aviso-cookies
Aviso de cookies com preferências granulares
6 set 2026
overlay/toast-aviso
Toast de aviso
Navegação
menu, âncora, progresso de leitura, botão flutuante
29 set 2026
navegacao/indice-ancoras
Índice de âncoras
ago 2026
navegacao/nav-fixa-vidro
Menu fixo com fundo de vidro
ago 2026
navegacao/drawer-fullscreen
Menu mobile de tela cheia
4 set 2026
navegacao/progresso-leitura
Progresso de leitura
ago 2026
navegacao/botao-flutuante
Botão flutuante de contato
Efeitos
veste o que já existe: cursor, moldura, quebra de seção, selo, inclinação
4 set 2026
efeitos/cursor-disco
Cursor disco
21 set 2026
efeitos/destaque-texto-scroll
Destaque de texto pelo scroll
3 set 2026
efeitos/inclinacao-3d
Inclinação 3D
31 ago 2026
efeitos/cursor-anotacao
Legenda de cursor
4 set 2026
efeitos/selo-circular
Selo de texto circular
1 out 2026
efeitos/desfoque-progressivo
Desfoque progressivo na borda da tela
ago 2026
efeitos/moldura-secao
Moldura de seção
ago 2026
efeitos/quebra-papel-rasgado
Quebra em papel rasgado
Rodapé
o fim da página e a faixa legal
31 ago 2026
rodape/cortina-fixa
Rodapé cortina de tela cheia
ago 2026
rodape/quatro-colunas
Rodapé de quatro colunas com texto legal
Nenhum componente bate com esse filtro.
Se era para existir, ele ainda não foi catalogado: confira a fila abaixo.
Fila
como a biblioteca cresce
A biblioteca cresce por referência externa. Um site no ar, uma seção dele, e um clone reescrito
do zero dentro do contrato. O código nunca é copiado — a URL entra como referência visual e a
implementação é nossa, em token, prefixo e motion.js.
Clone assim entra como
estável — o status fala do código, não do histórico, e a
procedência vive na ficha e nos registros de
projetos/.
As 11 categorias já têm conteúdo: entra o que aparecer numa referência de verdade, não o que falta
para preencher tabela.
-
midia/palco-de-produto-pinado
SkinBoost (design review)
#produtos -- palco pinado com o produto girando no scroll
A secao prende a tela e o objeto no centro monta, gira e se abre conforme a pessoa rola; duas notas de texto entram nas laterais em momentos diferentes da rotacao.
travada
https://skinboost-design-review.vercel.app/
-
efeitos/texto-que-digita (ou variacao do…
SkinBoost (design review)
#diferenciais -- o card do bento com o prompt que digita sozinho
Dentro de um card do bento, uma pergunta aparece sendo digitada, como se alguem estivesse escrevendo para o assistente. E' o unico movimento da dobra e ele carrega a promessa do produto.
pronta para clonar
https://skinboost-design-review.vercel.app/