# Códice Capa de livro em 3D feita só com CSS, que gira de lado no hover e revela a borda branca das páginas. > Códice é um componente do THM Componentes que desenha um livro 3D só com CSS: capa em degradê, vinco perto da lombada e um bloco branco de páginas. Ao passar o mouse, o livro gira de lado e revela a espessura. Há 22 cores, quatro tamanhos e uma versão parada. Serve para divulgar e-books e guias. - Categoria: 3D e espaço - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4 - Interação: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/codice/ ## 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 ```text 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. ## Componentes relacionados - [Estojo](https://vibecode.thmtecnologia.com/componentes/estojo/): Um iPhone desenhado em SVG, com a ilha no topo e o print do seu app ocupando a tela. - [Camafeu](https://vibecode.thmtecnologia.com/componentes/camafeu/): Um cartão que inclina seguindo o mouse e faz imagem, título e botões saltarem em camadas de profundidade. - [Convite](https://vibecode.thmtecnologia.com/componentes/convite/): Card que se ergue, inclina em 3D e ganha um reflexo de luz seguindo o cursor, sobre uma sombra profunda. - [Furta-cor](https://vibecode.thmtecnologia.com/componentes/furta-cor/): Cartão com arte que inclina em 3D sob o mouse e brilha com reflexo arco-íris, como uma carta colecionável rara. - [Virada](https://vibecode.thmtecnologia.com/componentes/virada/): Um cartão que troca de logo a cada poucos segundos, dobrando ao meio como um painel de aeroporto antigo. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.