Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Installer le KitGuide
LandingClairéditorialmatièreprécis
LLavra

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

Obtenir l'accès · à partir de 49 R$ou tous les designs pour 297 R$ par an
Ouvrir en plein écran Utiliser avec l'IA
/preview/lavra

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

Tout le texte est dans content.ts et les couleurs dans tokens.css.
Concept

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.

Idéal pour
  • 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
À éviter pour
  • 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
Secteurs
marbreriepierres naturellesmarbre et granitrevêtements haut de gammearchitecture d'intérieurmagasin de sols et revêtementsmenuiserie haut de gammecuisines sur mesuregalerie de matériauxjoaillerie

Ton

éditorialmatièreprécissobre avec une touche de couleur

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.

  1. 01

    Capa de revista (hero): faixa de topo com marca, edição ("Catálogo nº 07") e linha editorial; a palavra LAVRA em lavra-palavra a ~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.

  2. 02

    Busto em 3D (Busto.tsx, Three.js): escaneamento real "Marble Bust 01" do Poly Haven (CC0, arquivos em public/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 de marmore.ts aplicado no espaço do objeto (onBeforeCompile), polido.

  3. 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 evento lavra:pedra.

  4. 04

    Código de lote: .lavra-lote (quadradinho laranja inclinado + código). Toda chapa tem lote e número.

  5. 05

    Pátio em faixas: duas fileiras de chapas que andam com a rolagem em sentidos opostos (CSS scroll-driven).

  6. 06

    Manifesto que acende letra por letra ao rolar.

  7. 07

    Abertura em livro: duas chapas, a da direita espelhada, abrindo como página de livro com a rolagem (rotateY em view timeline) dentro da folha verde.

  8. 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.

Voir le DESIGN.md

Identidade

  • Fundo cinza pó de mármore #d8d7d3; superfícies #cdccc7 e #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-muted e --lavra-linha para o texto secundário ter o tom dela, nunca cinza.
  • Fonte única: Geologica. Títulos com o eixo SHRP (cantos lavrados): .lavra-palavra 900 + SHRP 100 para a palavra gigante e os números do processo; .lavra-titulo 760 + 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.ts gera public/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.palavra e os textos; palavra curta (4 a 7 letras) cabe melhor na capa.
  • Pedras do seletor: ajustar pedras em marmore.ts (cores base, nuvem, veio, frequência, turbulência, espessura) e a ficha em content.ts; regenerar as texturas com o script.
  • Outra cor de folha: trocar --lavra-verde pela 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_Y e o chão em Busto.tsx. Marcenaria, joalheria: trocar o objeto e o material.
Claude Code

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.

Utiliser avec l'IA

Similaires

Des landings qui partagent un ton ou un secteur avec Lavra.

Voir le catalogue
LandingClairVoir le design

Assento

LandingClairVoir le design

Clipping

LandingClairVoir le design

Caso

LandingSombreVoir le design

Minuto