Lavra.
Landing en couverture de magazine pour un atelier de pierres naturelles : le mot LAVRA géant derrière un buste de marbre scanné en 3D (Three.js, vraie lumière de studio) qui tourne avec la souris et est tranché par une ligne incandescente de jet d'eau quand on change de pierre, des plaques à code de lot qui défilent avec le scroll et des plaques en miroir qui s'ouvrent comme un livre.
- Type
- Landing page
- Thème
- Clair
- Titres
- Geologica (eixo SHRP)
- Texte
- Geologica
PourArchitectes, architectes d'intérieur et maîtres d'ouvrage haut de gamme qui choisissent la pierre pour plans de travail, murs et sols
Sections de la page01/08couverture de magazine : mot géant derrière le buste de marbre en 3D, sélecteur de pierre avec fiche et lot
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.
Extrait du DESIGN.md, en portugais pour l'instant.
PourArchitectes, architectes d'intérieur et maîtres d'ouvrage haut de gamme qui choisissent la pierre pour plans de travail, murs et sols
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Geologica (eixo SHRP) pour les titres, Geologica pour le texte.
TitresGeologica (eixo SHRP)
Aag!
Lavra en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteGeologica
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- activité qui vend un matériau physique choisi à l'œil
- marque qui veut ressembler à un magazine, pas à une boutique
- catalogue de peu de pièces à forte valeur
- client qui accepte une pièce en 3D dans le hero
- boutique avec des centaines de produits et de filtres
- public sur appareils anciens sans WebGL (il y a un plan B, mais la pièce est perdue)
- marque enfantine ou colorée
- service sans objet à montrer
Ton
Ce qui fait Lavra
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Emmenez Lavra
chez votre client.
Dans Claude Code, Cursor ou n'importe quelle IA : elle lit le DESIGN.md de ce design et applique tokens, polices et textes au projet du client.
Similaires
Des landings qui partagent un ton ou un secteur avec Lavra.
