Fibra.
Cerro al anochecer hecho con shader WebGL, con dígitos cayendo en el cielo y titular en matriz de puntos. Azul tinta, luz de sodio y verde azulado: técnico, local y cinematográfico sin cara de startup.
- Tipo
- Landing page
- Tema
- Oscuro
- Títulos
- Doto
- Texto
- Geist
ParaFamilias y pequeños negocios de ciudades del interior que contratan servicios de infraestructura
Secciones de la página01/10nav en píldora
Landing de provedor regional de internet por fibra (marca de exemplo: Cuesta Fibra, Pardinho/SP).
Del DESIGN.md, que por ahora está en portugués.
ParaFamilias y pequeños negocios de ciudades del interior que contratan servicios de infraestructura
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Doto en los títulos, Geist en el texto.
TítulosDoto
Aag!
Fibra en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoGeist
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.
- marca de telecom o tecnología con naranja, ámbar o azul oscuro
- empresa regional que quiere parecer moderna y cercana
- servicio con planes, cobertura por barrio e instalación
- marca clara o pastel
- negocio de moda, belleza o gastronomía
- público que necesita fuente grande y simple (adultos mayores) en el título
- sitio sin animación o con hosting muy limitado
Tono
Lo que lo hace Fibra
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 01
Morro em WebGL (
Duna.tsx): fragment shader em WebGL puro, um triângulo em tela cheia. Três camadas de altura porfbm1D (serra ao fundo, morro, cidade). Luz: normal a partir da derivada da altura,exp(-d*60)na crista (rim de sódio),exp(-d*420)no fio de luz, fileiras de pastosin(d*150 - fbm), névoa de profundidade misturando a serra no céu, luzes da cidade porhashem grade, grão de filmehash(gl_FragCoord + tempo)e vinheta. - Dígitos: canvas 2D fora da tela (Geist Mono 12px, grade 15×19), colunas caindo com rastro e cintilação a ~18 fps, enviado como textura ao shader; o morro tapa os dígitos. - Paralaxe: o mouse desloca cada camada em proporção à distância (0,006 a 0,045). - Rolagem:uScrollsobe o morro conforme o hero sai da tela. - Pausa fora da tela (IntersectionObserver) e com a aba escondida;prefers-reduced-motiondesenha um quadro parado; sem WebGL fica o SVG de reserva (.fibra-reserva). - 02
Matriz de pontos como mostrador: velocidade dos planos, medidor de vazão (
Medidor.tsx, 44×12 pontos revelados por--psó com CSSclamp), mapa da cidade em pontos (Cobertura.tsx). - 03
Manifesto fixado: a seção fica presa e acende palavra por palavra na rolagem.
- 04
Cabo desenhado: na instalação, o cabo do poste até o roteador é desenhado pela rolagem (
stroke-dashoffsetcompathLength=1) e cada passo acende um nó.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
Identidade
- Cena: o morro atrás da cidade ao anoitecer, feito em shader. A crista pega a última luz (laranja de lâmpada de sódio), a cidade é uma silhueta com luzes de rua, e no céu caem dígitos: os dados passando. A cena é a única coisa com luz e cor rica; a interface em volta é plana.
- Cores: fundo tinta
#0a1020, superfícies#0e1628/#131d33, borda#243049, texto creme#ece6da, apoio#97a2b6. Primária sódio#ff9a3c(CTA, números de passo, destaque do plano), acento teal#4fc9bd(status "no ar", ícones em pixel, rótulos). Nunca roxo, violeta ou magenta. - Tipografia: Doto (matriz de pontos,
font-variation-settings: "ROND" 100, peso 700–800) só em manchete do hero, números (velocidade, passos, leitura do teste, telefone) e logo. Geist para títulos de seção e texto (peso 500, tracking negativo). Geist Mono para rótulos, unidades e notas, em caixa alta com tracking largo. - Forma: pílula para nav e botões, raio 16px nos painéis, quadrados (não bolinhas) como LED e marcador. Sem sombra, sem glow, sem vidro.
Regras
- Uma peça com luz: a cena do hero. Fora dela, nada de gradiente, brilho ou vidro.
- Doto só em número, manchete curta e logo; nunca em parágrafo nem em texto abaixo de 18px.
- LED e marcador são quadrados. Laranja = ação/destaque/em obra; teal = no ar/ok.
- Números de velocidade e preço sempre com unidade em Geist Mono ao lado.
- Um
h1(hero); títulos de seção emh2com o número da seção em Doto. - Contraste AA: texto de apoio
#97a2b6no fundo tinta; nunca texto sobre a parte clara da crista.
Adaptar à marca do cliente
- Troque
--d-primarypela cor da marca se for quente (laranja, âmbar, vermelho); ajustesodiono shader para o mesmo tom. Marca azul/verde: use-a no--d-accente mantenha o sódio na cena. - Relevo da cidade: mude
hMain(largura dodome, frequência dofbm) para morro, serra ou planície;hNearé a silhueta da cidade. - Mapa: redesenhe a grade
MAPAcom a mancha real da cidade (uma letra por bairro) e os status emcontent.cobertura.bairros. - Planos: até 4 cartões no mesmo grid; o destaque é borda + faixa laranja, nunca brilho.
Lleva Fibra
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 Fibra.