Lavra.
Magazine-cover landing for a natural stone atelier: the giant word LAVRA behind a 3D-scanned marble bust (Three.js, real studio lighting) that turns with the mouse and is sliced by a glowing waterjet line when you switch stones, lot-coded slabs running with the scroll and mirrored slabs that open like a book.
- Type
- Landing page
- Theme
- Light
- Headings
- Geologica (eixo SHRP)
- Body
- Geologica
ForArchitects, interior designers and high-end homeowners choosing stone for countertops, walls and floors
Page sections01/08magazine cover: giant word behind the 3D marble bust, stone picker with spec sheet and lot number
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.
From DESIGN.md, which is in Portuguese for now.
ForArchitects, interior designers and high-end homeowners choosing stone for countertops, walls and floors
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Geologica (eixo SHRP) for headings, Geologica for body text.
HeadingsGeologica (eixo SHRP)
Aag!
Lavra in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyGeologica
The reading font carries long paragraphs without tiring the eye.
Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.
0123456789 · $1,234.56 · Sep 25, 7:30 PM
Who it's for
What the AI compares with your client to pick the design.
- business that sells physical material chosen by eye
- brand that wants to feel like a magazine, not a store
- catalog with few, very high-value pieces
- client who accepts a 3D piece in the hero
- store with hundreds of products and filters
- audience on old devices without WebGL (there is a fallback, but the 3D piece is lost)
- children's or colorful brand
- service with no object to show
Tone
What makes it Lavra
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Take Lavra
to your client.
In Claude Code, Cursor or any AI: it reads this design's DESIGN.md and applies the tokens, fonts and copy to your client's project.
Similar
Landings that share a tone or niche with Lavra.