Essência.
Warm black with a 3D amber glass ribbon crossing the hero, rendered bottles like product photography and storytelling scroll (a pinned collection that slides sideways, a fragrance pyramid that builds itself). Signature luxury without interface gloss.
- Type
- Landing page
- Theme
- Dark
- Headings
- Funnel Display
- Body
- Funnel Sans
ForAdults 25-55 buying gifts or a personal signature, high ticket and small-batch product
Page sections01/09slim nav
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.
From DESIGN.md, which is in Portuguese for now.
ForAdults 25-55 buying gifts or a personal signature, high ticket and small-batch product
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Funnel Display for headings, Funnel Sans for body text.
HeadingsFunnel Display
Aag!
Essência in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyFunnel Sans
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.
- physical product that looks good in renders or studio photos
- brand with amber, honey, copper or rose tones
- sales with in-person experience (atelier, tasting, session)
- short catalog of 4 to 8 items
- service with no physical product
- large catalog with filters
- children's or colorful brand
- audience on older phones (heavy 3D; the poster stays)
Tone
What makes it Essência
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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).
Take Essência
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 Essência.
