Timbre.
Landing cinématographique pour une startup d'IA d'accueil client : ruban de lumière WebGL plein écran, titre condensé de bord à bord, appels qui défilent en bandes avec le scroll, manifeste qui s'allume lettre par lettre et étapes en cartes qui s'empilent.
- Type
- Landing page
- Thème
- Sombre
- Titres
- Sofia Sans Extra Condensed
- Texte
- Sofia Sans
PourGérants de cliniques, garages et salons qui perdent des clients parce que personne ne répond au téléphone
Sections de la page01/10hero plein écran avec ruban de lumière WebGL et titre de bord à bord
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.
Extrait du DESIGN.md, en portugais pour l'instant.
PourGérants de cliniques, garages et salons qui perdent des clients parce que personne ne répond au téléphone
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Sofia Sans Extra Condensed pour les titres, Sofia Sans pour le texte.
TitresSofia Sans Extra Condensed
Aag!
Timbre en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteSofia 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 de voix, d'audio ou de téléphonie
- IA qui veut paraître chaleureuse et pas violette
- SaaS avec une démo forte à montrer
- marque orange, cuivre ou ambre
- commerce local sans produit digital
- marque claire et pastel
- public qui ne fait pas tourner WebGL (écrans d'appareils anciens)
- site avec beaucoup de photos de produits
Ton
Ce qui fait Timbre
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 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).
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Emmenez Timbre
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 Timbre.