Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Install the KitGuide
LandingDarktechnicallocaltrustworthy
FFibra

Fibra.

A hill at dusk made as a WebGL shader, with digits falling across the sky and a dot-matrix headline. Ink blue, sodium light and teal: technical, local and cinematic without a startup look.

Type
Landing page
Theme
Dark
Headings
Doto
Body
Geist

ForFamilies and small businesses in inland towns hiring infrastructure services

Get access · from R$49or every design for R$297 a year
Open full screen Use with AI
/preview/fibra

Page sections01/10pill nav

All the copy lives in content.ts and the colors in tokens.css.
Concept

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

From DESIGN.md, which is in Portuguese for now.

ForFamilies and small businesses in inland towns hiring infrastructure services

Palette

The four colors that define the design and every variable in tokens.css. Click to copy.

Typography

Doto for headings, Geist for body text.

HeadingsDoto

Aag!

Fibra in one line

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

BodyGeist

The reading font carries long paragraphs without tiring the eye.

Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.

0123456789 · $1,234.56 · Sep 25, 7:30 PM

Who it's for

What the AI compares with your client to pick the design.

Great for
  • telecom or tech brand with orange, amber or dark blue
  • regional company that wants to seem modern and close
  • service with plans, coverage by neighborhood and installation
Avoid for
  • light or pastel brand
  • fashion, beauty or food business
  • audience that needs large, simple type (seniors) in the title
  • site with no animation or very limited hosting
Niches
internet providerfiber opticregional telecomTV and phone operatorradio and dedicated linkregional solar energysanitation and city serviceslocal hosting and data center

Tone

technicallocaltrustworthycinematic

What makes it Fibra

The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.

  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ó.

House rules

Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.

View 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

Take Fibra
to your client.

In Claude Code, Cursor or any AI: it reads this design's DESIGN.md and applies the tokens, fonts and copy to your client's project.

Use with AI

Similar

Landings that share a tone or niche with Fibra.

Browse catalog
LandingDarkView design

Commit

LandingDarkView design

Torque

LandingLightView design

Safra

LandingLightView design

Solar