Timbre.
Cinematic landing for an AI customer-service startup: a full-screen WebGL ribbon of light, an edge-to-edge condensed headline, calls running in bands with the scroll, a manifesto that lights up letter by letter and steps in stacking cards.
- Type
- Landing page
- Theme
- Dark
- Headings
- Sofia Sans Extra Condensed
- Body
- Sofia Sans
ForOwners of clinics, repair shops and salons who lose customers because nobody answers the phone
Page sections01/10full-screen hero with WebGL light ribbon and edge-to-edge headline
Landing de startup de IA que atende ligação e WhatsApp de pequenos negócios (marca de exemplo: Bina). Composição de cinema: uma peça de luz feita à mão em WebGL no centro, tipografia condensada enorme sobre ela, interface escura, seca e sem efeito. A luz mora só dentro da peça.
From DESIGN.md, which is in Portuguese for now.
ForOwners of clinics, repair shops and salons who lose customers because nobody answers the phone
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Sofia Sans Extra Condensed for headings, Sofia Sans for body text.
HeadingsSofia Sans Extra Condensed
Aag!
Timbre in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodySofia 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.
- voice, audio or telephony product
- AI that wants to feel warm, not purple
- SaaS with one strong demo to show
- orange, copper or amber brand
- local business without a digital product
- light, pastel brand
- audience that cannot run WebGL (old-device panels)
- site with many product photos
Tone
What makes it Timbre
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 voz (
Fita.tsx, modohero): fragment shader com 34 fios que torcem como uma fita; onde a fita fica de perfil os fios se juntam e acendem (cáustica), o lado de trás esfria para menta, névoa e grão. Fina e apagada à esquerda (atrás do título), cheia à direita. Reage ao mouse (torção e bojo) e à rolagem (volume sobe). Canto de baixo escurecido no próprio shader para o título ler. - 02
Onda de quem fala (
Fitamodolinhadentro deChamada.tsx): faixa horizontal no topo do painel de demonstração; a energia sobe enquanto a fala é escrita e a cor troca: laranja Bina, menta cliente, branco quente humano. - 03
Transcrição ao vivo: abas por negócio (título condensado grande + régua laranja que corre), falas escritas letra a letra, "O que a Bina fez" com hora em mono aparecendo em compasso, resultado em condensada.
- 04
Faixa "Em linha agora" no pé do hero, com medidor de 5 barras (CSS) e tempo em mono.
- 05
Resolve sozinha x Passa para você: duas colunas tipográficas, check discreto de um lado e seta laranja do outro. É a promessa central do produto (saber quando chamar gente), não um grid de features.
- 06
Número de demonstração gigante na chamada final, com a linha de espera (a mesma onda em traço plano).
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
Identidade
- Fundo preto quente
#0b0a08; blocos alternados emsurface#121110e destaque de plano emsurface-2#1b1917. Nunca preto puro nem cinza azulado. - Texto
#f1ebe2; secundário#a0968b; terciário--timbre-apagado#6f675fsó em número grande de passo. - Primária laranja de orelhão
#ff7a2e: botão (chapado, sem brilho), régua do plano destacado, medidor. Em texto pequeno use--timbre-brasa#ff9a52. - Destaque verde-menta
#8fdcc6: só a voz do cliente (rótulo na transcrição e cor da fita quando ele fala). - Fontes: Sofia Sans Extra Condensed em caixa alta nos títulos (peso 280 a 820, o contraste de peso é a assinatura: "O telefone toca." fino, "A Bina atende." pesado); Sofia Sans no texto; Red Hat Mono só em hora, tempo e contagem (dado, nunca enfeite).
- Raio 2px/4px. Réguas de 1px (
bordere--timbre-linhapara a régua forte). Sem sombra.
Regras
- Luz, cor rica e brilho só dentro da fita. Interface sem glow, glass, gradiente, pílula ou ícone em caixa.
- Hero sempre assimétrico: título embaixo à esquerda (8 colunas), texto e botões à direita, peça ocupa o quadro.
- Títulos de seção em condensada
text-[3.1rem] md:text-[5.25rem], sem sobretítulo. Seçõespy-24 md:py-32, containermax-w-[1440px]compx-5 md:px-10. - Máximo de uma chamada laranja por bloco; a segunda ação é link sublinhado.
data-sobeno hero,data-revelaabaixo. Com movimento reduzido: fita vira quadro parado (T_PARADO), transcrição aparece inteira, medidor para.- Performance da cena: DPR até 1,5 e teto de ~2,4 MP, pausa fora da tela (IntersectionObserver) e com aba oculta, contexto liberado ao desmontar. Sem WebGL, fica o quadro em SVG gerado pela mesma fórmula.
Adaptar à marca do cliente
- Troque
--d-primarye as cores da fita emCORES(Fita.tsx):aé a cor da frente,ba de trás. Mantenha a de trás complementar e fria (dá profundidade). Evite roxo/azul como par principal. - Fundo da cena:
FUNDOnoFita.tsxprecisa ser igual a--d-bg/--d-surface. - Enquadramento:
centroezoomemmedir()posicionam a fita (celular sobe a fita para cima do título). - Cenários da demonstração: troque em
content.atendimento.cenariospelos do nicho do cliente (ex.: pet shop, escritório de contabilidade), mantendo um que termina passando para humano.
Take Timbre
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 Timbre.
