Timbre.
Landing cinematográfica para startup de IA de atendimento: fita de luz em WebGL em tela cheia, título condensado de ponta a ponta, atendimentos que correm em faixas com a rolagem, manifesto que acende letra por letra e passos em cartões que empilham.
- Tipo
- Landing page
- Tema
- Escuro
- Títulos
- Sofia Sans Extra Condensed
- Texto
- Sofia Sans
ParaDonos de clínicas, oficinas e salões que perdem cliente porque ninguém atende o telefone
Seções da página01/10hero em tela cheia com fita de luz WebGL e título de ponta a ponta
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.
ParaDonos de clínicas, oficinas e salões que perdem cliente porque ninguém atende o telefone
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Sofia Sans Extra Condensed nos títulos, Sofia Sans no texto.
TítulosSofia Sans Extra Condensed
Aag!
Timbre em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoSofia 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 de voz, áudio ou telefonia
- IA que quer parecer calorosa e não roxa
- SaaS com uma demonstração forte para mostrar
- marca laranja, cobre ou âmbar
- negócio local sem produto digital
- marca clara e pastel
- público que não roda WebGL (painel de aparelho antigo)
- site com muitas fotos de produto
Tom
O que faz ser Timbre
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 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).
Regras do jogo
Direto do DESIGN.md.
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.
Leve o Timbre
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 Timbre (timbre)
Parecidos
Landings com tom ou nicho em comum com Timbre.