Essência.
Preto quente com uma fita de vidro âmbar em 3D atravessando o hero, frascos renderizados como foto de produto e rolagem com história (coleção fixa que anda de lado, pirâmide olfativa que se constrói). Luxo autoral sem brilho de interface.
- Tipo
- Landing page
- Tema
- Escuro
- Títulos
- Funnel Display
- Texto
- Funnel Sans
ParaAdultos 25-55, compra de presente ou de assinatura pessoal, ticket alto e produto feito em pequena escala
Seções da página01/09nav fina
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.
ParaAdultos 25-55, compra de presente ou de assinatura pessoal, ticket alto e produto feito em pequena escala
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Funnel Display nos títulos, Funnel Sans no texto.
TítulosFunnel Display
Aag!
Essência em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoFunnel Sans
A fonte de leitura carrega parágrafos longos sem cansar.
Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.
0123456789 · R$ 1.234,56 · 25/09 às 19h30
Para quem serve
O que a skill /escolher-design compara com o cliente.
- produto físico que fica bonito em render ou foto de estúdio
- marca com tons âmbar, mel, cobre ou rosé
- venda com experiência presencial (ateliê, degustação, sessão)
- catálogo curto de 4 a 8 itens
- serviço sem produto físico
- catálogo grande com filtros
- marca infantil ou colorida
- público que usa celular antigo (3D pesado; fica o poster)
Tom
O que faz ser Essência
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 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.
Regras do jogo
Direto do DESIGN.md.
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).
Leve o Essência
para o cliente.
Dentro do projeto do cliente, cole o comando. A skill lê o DESIGN.md e o meta.json deste design e aplica tokens, fontes e textos.
/escolher-design usar o design Essência (essencia)
Parecidos
Landings com tom ou nicho em comum com Essência.