Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Installer le KitGuide
LandingSombretechniquelocalfiable
FFibra

Fibra.

Colline au crépuscule réalisée en shader WebGL, avec des chiffres qui tombent dans le ciel et un titre en matrice de points. Bleu encre, lumière au sodium et sarcelle : technique, local et cinématographique sans look de startup.

Type
Landing page
Thème
Sombre
Titres
Doto
Texte
Geist

PourFamilles et petites entreprises de villes de province qui souscrivent des services d'infrastructure

Obtenir l'accès · à partir de 49 R$ou tous les designs pour 297 R$ par an
Ouvrir en plein écran Utiliser avec l'IA
/preview/fibra

Sections de la page01/10nav en pilule

Tout le texte est dans content.ts et les couleurs dans tokens.css.
Concept

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

Extrait du DESIGN.md, en portugais pour l'instant.

PourFamilles et petites entreprises de villes de province qui souscrivent des services d'infrastructure

Palette

Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.

Typographie

Doto pour les titres, Geist pour le texte.

TitresDoto

Aag!

Fibra en une ligne

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TexteGeist

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.

Idéal pour
  • marque télécom ou tech avec orange, ambre ou bleu foncé
  • entreprise régionale qui veut paraître moderne et proche
  • service avec forfaits, couverture par quartier et installation
À éviter pour
  • marque claire ou pastel
  • activité de mode, beauté ou restauration
  • public qui a besoin d'une grande police simple (seniors) dans le titre
  • site sans animation ou avec hébergement très limité
Secteurs
fournisseur d'accès internetfibre optiquetélécom régionalopérateur TV et téléphoneradio et liaison dédiéeénergie solaire régionaleassainissement et services urbainshébergement et datacenter local

Ton

techniquelocalfiablecinématographique

Ce qui fait Fibra

Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.

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

Règles du jeu

Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.

Voir le 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

Emmenez Fibra
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.

Utiliser avec l'IA

Similaires

Des landings qui partagent un ton ou un secteur avec Fibra.

Voir le catalogue
LandingSombreVoir le design

Commit

LandingSombreVoir le design

Torque

LandingClairVoir le design

Safra

LandingClairVoir le design

Solar