Ravox UIby Ravox Labs
Landingescurotécnicolocalconfiável
FFibra

Fibra.

Morro ao anoitecer feito em shader WebGL, com dígitos caindo no céu e manchete em matriz de pontos. Azul-tinta, luz de sódio e teal: técnico, local e cinematográfico sem cara de startup.

Tipo
Landing page
Tema
Escuro
Títulos
Doto
Texto
Geist

ParaFamílias e pequenos negócios de cidade do interior contratando serviço de infraestrutura

Obter acesso · a partir de R$ 49ou todos os designs por R$ 297 ao ano
Abrir em tela cheia
/preview/fibra

Seções da página01/10nav em pílula

Todo o texto fica em content.ts e as cores em tokens.css.
Conceito

Landing de provedor regional de internet por fibra (marca de exemplo: Cuesta Fibra, Pardinho/SP).

ParaFamílias e pequenos negócios de cidade do interior contratando serviço de infraestrutura

Paleta

As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.

Tipografia

Doto nos títulos, Geist no texto.

TítulosDoto

Aag!

Fibra em uma linha

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoGeist

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.

Combina com
  • marca de telecom ou tecnologia com laranja, âmbar ou azul-escuro
  • empresa regional que quer parecer moderna e próxima
  • serviço com planos, cobertura por bairro e instalação
Evitar para
  • marca clara ou pastel
  • negócio de moda, beleza ou gastronomia
  • público que precisa de fonte grande e simples (idosos) no título
  • site sem animação ou hospedagem muito limitada
Nichos
provedor de internetfibra ópticatelecom regionaloperadora de TV e telefonerádio e link dedicadoenergia solar regionalsaneamento e serviços de cidadehospedagem e data center local

Tom

técnicolocalconfiávelcinematográfico

O que faz ser Fibra

As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.

  1. 01

    Morro em WebGL (Duna.tsx): fragment shader em WebGL puro, um triângulo em tela cheia. Três camadas de altura por fbm 1D (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 pasto sin(d*150 - fbm), névoa de profundidade misturando a serra no céu, luzes da cidade por hash em grade, grão de filme hash(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: uScroll sobe o morro conforme o hero sai da tela. - Pausa fora da tela (IntersectionObserver) e com a aba escondida; prefers-reduced-motion desenha um quadro parado; sem WebGL fica o SVG de reserva (.fibra-reserva).

  2. 02

    Matriz de pontos como mostrador: velocidade dos planos, medidor de vazão (Medidor.tsx, 44×12 pontos revelados por --p só com CSS clamp), mapa da cidade em pontos (Cobertura.tsx).

  3. 03

    Manifesto fixado: a seção fica presa e acende palavra por palavra na rolagem.

  4. 04

    Cabo desenhado: na instalação, o cabo do poste até o roteador é desenhado pela rolagem (stroke-dashoffset com pathLength=1) e cada passo acende um nó.

Regras do jogo

Direto do DESIGN.md.

Ver DESIGN.md

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 em h2 com o número da seção em Doto.
  • Contraste AA: texto de apoio #97a2b6 no fundo tinta; nunca texto sobre a parte clara da crista.

Adaptar à marca do cliente

  • Troque --d-primary pela cor da marca se for quente (laranja, âmbar, vermelho); ajuste sodio no shader para o mesmo tom. Marca azul/verde: use-a no --d-accent e mantenha o sódio na cena.
  • Relevo da cidade: mude hMain (largura do dome, frequência do fbm) para morro, serra ou planície; hNear é a silhueta da cidade.
  • Mapa: redesenhe a grade MAPA com a mancha real da cidade (uma letra por bairro) e os status em content.cobertura.bairros.
  • Planos: até 4 cartões no mesmo grid; o destaque é borda + faixa laranja, nunca brilho.
Claude Code

Leve o Fibra
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 Fibra (fibra)

Parecidos

Landings com tom ou nicho em comum com Fibra.

Ver catálogo
LandingescuroVer design

Commit

LandingescuroVer design

Torque

LandingclaroVer design

Safra

LandingclaroVer design

Solar