Essência.
Noir chaud avec un ruban de verre ambré en 3D qui traverse le hero, flacons rendus comme des photos de produit et défilement narratif (collection épinglée qui glisse sur le côté, pyramide olfactive qui se construit). Luxe d'auteur sans clinquant d'interface.
- Type
- Landing page
- Thème
- Sombre
- Titres
- Funnel Display
- Texte
- Funnel Sans
PourAdultes de 25 à 55 ans, achat cadeau ou signature personnelle, panier élevé et produit fabriqué en petite série
Sections de la page01/09nav fine
Perfumaria autoral fictícia em Pinheiros, São Paulo: perfumes feitos em lote pequeno no próprio laboratório e um ateliê onde o cliente monta o seu com a perfumista.
Extrait du DESIGN.md, en portugais pour l'instant.
PourAdultes de 25 à 55 ans, achat cadeau ou signature personnelle, panier élevé et produit fabriqué en petite série
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Funnel Display pour les titres, Funnel Sans pour le texte.
TitresFunnel Display
Aag!
Essência en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteFunnel Sans
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.
- produit physique qui rend bien en 3D ou en photo de studio
- marque aux tons ambre, miel, cuivre ou rosé
- vente avec expérience sur place (atelier, dégustation, séance)
- catalogue court de 4 à 8 articles
- service sans produit physique
- grand catalogue avec filtres
- marque enfantine ou colorée
- public avec de vieux mobiles (3D lourde ; l'affiche reste)
Ton
Ce qui fait Essência
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 01
Fita de vidro no hero (
cena-fita.ts+Fita.tsx): faixa com perfil de estádio (1,35 x 0,3) varrida ao longo de uma CatmullRom de 12 pontos, com torção e pontas afinando.MeshPhysicalMaterialcom transmission 1, thickness 1.8, ior 1.48, attenuationColor âmbar, dispersion 0.4, clearcoat; cor por vértice (âmbar → mel → rosa-fumê) e um leve brilho interno nas bordas. Fundo pintado em canvas (faixas verticais fracas que o vidro refrata). Luz: HDRI "Brown Photostudio 02" da Poly Haven (CC0) + softboxes em tira. - 02
Movimento do hero: deriva lenta (onda no vertex shader), paralaxe do mouse, torção e subida ao rolar para fora do hero. Pausa fora da tela (IntersectionObserver). Movimento reduzido, economia de dados ou sem WebGL: fica o poster
fita-desktop.webp/fita-celular.webp(o mesmo quadro, então a troca é invisível). - 03
Coleção fixa (desktop): a seção prende na tela e a fileira de frascos anda de lado com a rolagem, com uma barra de progresso 01–06. No celular e sem JS é uma fileira com rolagem lateral e snap.
- 04
Pirâmide olfativa que se constrói: no desktop o desenho fica fixo à esquerda e cada camada (fundo, coração, saída, de baixo para cima) aparece quando o texto dela chega ao meio da tela; no celular as três sobem em sequência quando a pirâmide entra na tela.
- 05
Linha do tempo do laboratório (dia 0 a dia 32) que se desenha com a rolagem.
- 06
Pílula marfim como CTA (vira mel no hover, seta anda 3px); links com sublinhado que cresce.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
Identidade
- Preto quente e marfim. Fundo
#0e0b09, texto#f2ebe1, cinza quente#b0a396para apoio. A interface quase não tem cor: âmbar, mel e rosa-fumê moram dentro do vidro (renders 3D). O mel#e6b97aaparece só em detalhes (notas olfativas, números de etapa, pirâmide, foco). - Peça central: uma fita grossa de vidro âmbar atravessa o hero e faz uma volta, como o rastro de um perfume. É 3D de verdade (three.js), ao vivo, com um poster renderizado offline do mesmo quadro.
- Tipografia: Funnel Display (títulos, peso ~420, tracking -0.035em, entrelinha 0.95) e Funnel Sans (texto). Títulos grandes e calmos; nenhum rótulo em cima do título.
- Frascos como foto de produto: seis frascos modelados em three.js (tijolo, cubo e cilindro de vidro grosso, tampas de latão, pedra ou ébano, rótulo de papel), fotografados num fundo infinito escuro com pedestal de pedra.
Regras
- Cor viva só dentro das peças 3D/fotos. Botões, cards e fundos ficam em preto quente, marfim e bordas
#3a3029. Sem brilho, sem gradiente decorativo, sem vidro na interface (a única sombra é a de leitura sob o título do hero). - Um h1 (o título do hero, sempre em duas linhas: a segunda em marfim a 60%).
- Cantos: pílula para ações, 6px para imagens; o resto é linha fina.
- Números só quando são fato do negócio (concentração, ml, dias de maturação, preço de exemplo). Sem prova social.
- Foco visível em mel; contraste AA do texto de apoio (
#b0a396sobre#0e0b09). - Mobile: hero em
100svhcom o poster em retrato; coleção com rolagem lateral; pirâmide antes dos textos.
Adaptar à marca do cliente
- Cor da fita: troque as três cores por vértice (
ambar,mel,rosa) e oattenuationColoremcena-fita.ts; rodeyarn tsx scripts/essencia-render.ts fitapara regerar os posters. - Forma da fita: edite
CAMINHO(pontos da curva),LARGURA,ESPESSURAeVOLTAS. O enquadramento por proporção de tela está emajustar(). - Produtos: em
scripts/essencia-cena.ts, a listaperfumesdefine forma, tampa e cor do líquido de cada frasco. Com fotos reais do cliente, basta trocarimgnocontent.ts(4:5, fundo escuro). - Outros nichos que vivem do mesmo esqueleto: vela aromática, gin artesanal, vinho natural, joalheria, chocolate: troque a pirâmide por "camadas" do produto (ex.: notas de degustação) e o ateliê pela experiência presencial.
- Tokens em
tokens.css(--d-*); fontes Funnel Display e Funnel Sans (Google Fonts).
Emmenez Essência
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 Essência.
