Como ele é
Parece um livro de capa dura em pé numa vitrine. A capa é um degradê escuro, por padrão em tons de grafite, com o conteúdo em branco na parte de baixo: ícones, título e uma descrição curta. Perto da borda esquerda, um vinco sutil imita a dobra da capa dura. Ao passar o mouse, o livro gira 30 graus em um segundo, com movimento suave, e deixa ver a borda branca das páginas e a contracapa, que projeta uma sombra larga. A proporção é de 3 por 4, com largura de 180 a 300 pixels. A sombra é cinza-clara no modo claro e quase preta no escuro.
Você pode estar procurando isto se pediu algo assim
- mostrar a capa do meu e-book em 3D na landing page
- livro que vira de lado quando passo o mouse
- mockup de livro para divulgar um guia gratuito
- capa de material rico com cara de livro de verdade
- imagem de e-book em 3D sem precisar de programa de design
- deixar a página de captura do meu e-book mais profissional
- livro em pé com sombra, tipo vitrine de livraria
Também chamado de
- livro 3D
- book mockup
- mockup de e-book
- 3D book cover
- capa de livro 3D
- ebook mockup
- CSS 3D book
Quando usar
- Página de captura para baixar e-book, guia ou relatório
- Seção de materiais ricos de um blog ou de uma consultoria
- Lançamento de livro, apostila ou curso em formato de guia
- Vitrine de publicações com um livro por cor e tema
Quando evitar
- Capas que dependem de uma arte ou foto específica, já que o componente desenha a capa com degradê e texto
- Páginas acessadas quase só no celular, em que o giro depende do hover; ali vale usar a versão parada
Como pedir para a sua IA
Crie um livro 3D em CSS para divulgar meu e-book na página de captura: capa em degradê com as cores da marca, título e ícone, giro lateral suave no hover que revela as páginas, versão parada para movimento reduzido e no celular, e título como h2 para não duplicar o h1.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Códice
Dá para usar Códice sem animação, com o livro parado?
Sim. Códice tem a prop isStatic, que deixa o livro fixo já virado 30 graus, mostrando a borda das páginas, sem depender do mouse. É a saída simples para movimento reduzido e para celulares, e o prompt do THM Componentes pede à IA justamente uma versão estática para quem prefere menos movimento.
Como troco as cores e o tamanho de Códice?
Códice aceita a prop color com 22 tons da paleta do Tailwind, como blue, emerald ou rose, sempre num degradê do mais escuro para o mais claro, e a prop size com quatro larguras, de 180 a 300 pixels. Também dá para ajustar cantos, sombra e a duração do giro, que é de um segundo por padrão.
O título de Códice atrapalha o SEO da página?
Pode atrapalhar. O BookTitle de Códice renderiza um elemento h1, e uma página com o h1 principal mais o do livro fica com dois títulos de primeiro nível. Peça à IA para trocar por h2 ou h3 conforme a hierarquia da seção, sem mudar o visual.
