Timbre.
Landing cinematográfica para una startup de IA de atención: cinta de luz en WebGL a pantalla completa, título condensado de punta a punta, llamadas que corren en franjas con el scroll, manifiesto que se enciende letra por letra y pasos en tarjetas que se apilan.
- Tipo
- Landing page
- Tema
- Oscuro
- Títulos
- Sofia Sans Extra Condensed
- Texto
- Sofia Sans
ParaDueños de clínicas, talleres y salones que pierden clientes porque nadie atiende el teléfono
Secciones de la página01/10hero a pantalla completa con cinta de luz WebGL y título de punta a punta
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.
Del DESIGN.md, que por ahora está en portugués.
ParaDueños de clínicas, talleres y salones que pierden clientes porque nadie atiende el teléfono
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Sofia Sans Extra Condensed en los títulos, Sofia Sans en el texto.
TítulosSofia Sans Extra Condensed
Aag!
Timbre en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoSofia Sans
La fuente de lectura sostiene párrafos largos sin cansar.
Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.
0123456789 · $1.234,56 · 25/09 a las 19:30
Para quién es
Lo que la IA compara con el cliente para elegir el diseño.
- producto de voz, audio o telefonía
- IA que quiere parecer cálida y no violeta
- SaaS con una demo fuerte para mostrar
- marca naranja, cobre o ámbar
- negocio local sin producto digital
- marca clara y pastel
- público que no puede ejecutar WebGL (pantallas de dispositivos antiguos)
- sitio con muchas fotos de producto
Tono
Lo que lo hace Timbre
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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).
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Lleva Timbre
a tu cliente.
En Claude Code, Cursor o cualquier IA: lee el DESIGN.md de este diseño y aplica tokens, fuentes y textos en el proyecto del cliente.
Similares
Landings con tono o nicho en común con Timbre.