Lavra.
Landing de capa de revista para ateliê de pedras naturais: a palavra LAVRA gigante atrás de um busto de mármore escaneado em 3D (Three.js, luz de estúdio real) que gira com o mouse e é cortado por uma linha incandescente de jato d'água ao trocar de pedra, chapas com código de lote correndo com a rolagem e chapas espelhadas que abrem como livro.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Geologica (eixo SHRP)
- Texto
- Geologica
ParaArquitetos, designers de interiores e donos de obra de alto padrão escolhendo pedra para bancada, parede e piso
Seções da página01/08capa de revista: palavra gigante atrás do busto de mármore em 3D, seletor de pedra com ficha e lote
Landing de ateliê de pedras naturais (marca de exemplo: Lavra), em formato de capa de revista. A palavra da marca ocupa a largura da tela e um bloco de pedra polida, desenhado em WebGL, fica na frente dela. A cor chega em folhas inteiras (verde, preto, laranja), nunca em enfeite.
ParaArquitetos, designers de interiores e donos de obra de alto padrão escolhendo pedra para bancada, parede e piso
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Geologica (eixo SHRP) nos títulos, Geologica no texto.
TítulosGeologica (eixo SHRP)
Aag!
Lavra em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoGeologica
A fonte de leitura carrega parágrafos longos sem cansar.
Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.
0123456789 · R$ 1.234,56 · 25/09 às 19h30
Para quem serve
O que a skill /escolher-design compara com o cliente.
- negócio que vende material físico escolhido a olho
- marca que quer parecer revista, não loja
- catálogo com poucas peças de muito valor
- cliente que aceita uma peça em 3D no hero
- loja com centenas de produtos e filtros
- público em aparelho antigo sem WebGL (tem plano B, mas perde a peça)
- marca infantil ou colorida
- serviço sem objeto para mostrar
Tom
O que faz ser Lavra
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Capa de revista (hero): faixa de topo com marca, edição ("Catálogo nº 07") e linha editorial; a palavra LAVRA em
lavra-palavraa ~23vw; o bloco (BlocoCena, canvas transparente cobrindo a seção) na frente das letras; título e ação no canto de baixo à esquerda, seletor de pedra com ficha à direita. - 02
Busto em 3D (
Busto.tsx, Three.js): escaneamento real "Marble Bust 01" do Poly Haven (CC0, arquivos empublic/lavra/3d/), luz de estúdio por HDRI (Poly Haven "Studio Small 09", CC0), sombra de contato num chão invisível, canvas transparente cobrindo a seção. Passeia devagar, segue o mouse, arrasta para girar. Pausa fora da tela; movimento reduzido = parado. A primeira pedra ("Estatuário") é o mármore do próprio escaneamento; as outras são o mármore procedural demarmore.tsaplicado no espaço do objeto (onBeforeCompile), polido. - 03
Corte de jato d'água: ao trocar a pedra no
Seletor, uma linha laranja incandescente desce pelo busto e revela o material novo. O seletor e a cena conversam pelo eventolavra:pedra. - 04
Código de lote:
.lavra-lote(quadradinho laranja inclinado + código). Toda chapa tem lote e número. - 05
Pátio em faixas: duas fileiras de chapas que andam com a rolagem em sentidos opostos (CSS scroll-driven).
- 06
Manifesto que acende letra por letra ao rolar.
- 07
Abertura em livro: duas chapas, a da direita espelhada, abrindo como página de livro com a rolagem (
rotateYem view timeline) dentro da folha verde. - 08
Rodapé preto com a palavra gigante quase apagada.
Regras do jogo
Direto do DESIGN.md.
Identidade
- Fundo cinza pó de mármore
#d8d7d3; superfícies#cdccc7e#c1bfb9. Nada de creme. - Texto quase preto
#121211; secundário#4d4b46(contraste AA sobre o fundo). - Ação preta chapada (
primary); no hover vira laranja de tinta de pedreira#ff4f1a(accent), a cor que marca bloco na pedreira. O laranja também é o quadradinho do código de lote e o anel da amostra escolhida. - Folhas de cor inteira:
.lavra-verde(Verde Alpi#123027),.lavra-nero(#121211) e.lavra-tinta(a folha laranja da visita). Cada folha redefine--d-mutede--lavra-linhapara o texto secundário ter o tom dela, nunca cinza. - Fonte única: Geologica. Títulos com o eixo
SHRP(cantos lavrados):.lavra-palavra900 + SHRP 100 para a palavra gigante e os números do processo;.lavra-titulo760 + SHRP 70. Texto em Geologica normal, números tabulares no design inteiro. - Raio zero. Pedra é cortada em ângulo reto. Réguas de 1px em
--lavra-linha. Sombra só na peça e nas chapas.
Regras
- Uma peça central por página, e ela é a pedra (objeto 3D escaneado de verdade, CC0; nunca foto de banco). Sem gradiente, glow ou vidro na interface.
- Laranja é tinta: marca, lote, hover, corte. Nunca fundo de card nem texto corrido (só a folha da visita).
- Títulos sem rótulo em cima (nada de kicker/eyebrow). Números só onde a ordem é informação (processo).
- Toda imagem de pedra vem do shader (
yarn tsx scripts/lavra-texturas.tsgerapublic/lavra/*.webp). Chapa de cliente real: trocar pela foto da chapa, no mesmo formato 1280 × 760. - Animação de rolagem só em CSS (
animation-timeline); sem suporte, tudo aparece aberto e parado.
Adaptar à marca do cliente
- Trocar
marca,hero.palavrae os textos; palavra curta (4 a 7 letras) cabe melhor na capa. - Pedras do seletor: ajustar
pedrasemmarmore.ts(cores base, nuvem, veio, frequência, turbulência, espessura) e a ficha emcontent.ts; regenerar as texturas com o script. - Outra cor de folha: trocar
--lavra-verdepela pedra mais forte do catálogo do cliente. - Outro objeto: qualquer glTF CC0 do Poly Haven (polyhaven.com/models) entra no lugar do busto; ajustar
ALTURA,CENTRO_Ye o chão emBusto.tsx. Marcenaria, joalheria: trocar o objeto e o material.
Leve o Lavra
para o cliente.
Dentro do projeto do cliente, cole o comando. A skill lê o DESIGN.md e o meta.json deste design e aplica tokens, fontes e textos.
/escolher-design usar o design Lavra (lavra)
Parecidos
Landings com tom ou nicho em comum com Lavra.