Sobre este template
Antes de reconstruir uma landing page para um produto de IA ou SaaS, leia Neon Logic: a composição e a especificação por trás dela estão as duas aqui. A paleta se reduz a azul profundo #010103 por baixo e branco #FFFFFF para a tipografia, e a tipografia é Space Mono. A entrada nomeia a stack que produziu a página (React e Tailwind CSS) em vez de escondê-la. Tudo o que se move cabe em transições de 800ms. Deixe aberto enquanto escreve: o briefing de 13.601 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Times de estúdio que estão briefando uma construção e procuram uma moldura em 640x474 para reagir.
- Times que constroem landing page para um produto de IA ou SaaS e querem o detalhe medido (tipografia de 12px a 42px e seções de 100vh) em vez de uma captura de tela para copiar.
- Feito para quem cuida do conteúdo e reescreve uma landing page cujo título precisa continuar tão longo quanto o da Neon Logic.
O que está incluído
- A navegação é fina de propósito. A marca segura a borda esquerda e os links correm à direita dela, tudo composto em Space Mono, para a barra pertencer à página abaixo e não a um sistema separado. A ação é o único elemento da fileira com preenchimento, o que mantém os links lendo como texto. Mantenha de quatro a cinco links; a linha foi dimensionada para isso.
- Nada aqui é herdado. Os tamanhos foram lidos do render em 640x474: tipografia de 12px a 42px, seções de 100vh, passos de espaçamento de 14px e transições de 800ms. Como os valores são fixos, uma substituição muda o visual sem mudar o ritmo. Mantenha os valores que parecem arbitrários.
- Navegação em uma só linha. Desenhe o estado colapsado antes de acrescentar um sexto link. A referência tem captura em 640x474.
- Valores que dá para conferir. O espaçamento é declarado do mesmo jeito (tipografia de 12px a 42px, seções de 100vh, passos de espaçamento de 14px e transições de 800ms), não como uma escala que cresce sozinha.
Movimento e interação
Mudanças de estado, cronometradas
O briefing fixa o valor da transição em 800ms, então uma reconstrução não pode cair em um padrão mais lento. Um mesmo valor se repete nos controles, então o tempo deles não pode divergir. Se mudar a curva de aceleração, mude em todos os lugares.
O canvas é o visual
A primeira tela é construída pelo navegador, não entregue como imagem: uma transformação 3D no elemento principal. A cena é desenhada no tamanho do contêiner, então não depende de uma resolução de renderização fixa.
Como a landing page se reorganiza
A maior parte do trabalho responsivo para em esconder elementos. Aqui o layout muda de forma: a tipografia é clampada entre 12px e 42px, a seção fica presa a 100vh e a navegação vira um menu compacto no celular, e nada importante é descartado para a dobra caber. Um espremer teria sido mais barato e não se sustentaria.
Ler Neon Logic como especificação
O custo de uma escala fixa é menos espaço para improvisar. tipografia de 12px a 42px e seções de 100vh mantêm a composição coerente, mas um elemento novo precisa ser encaixado, não apenas colocado. Nada nesta landing page depende de um padrão.
O tempo por trás da landing page
Quando uma página parece inquieta, a causa costuma ser entradas demais. Esta mantém a lista curta: transições de 800ms, estados de hover e de clique e um canvas ao vivo. Nada anima por si nesta landing page.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Neon Logic?
O briefing capturado tem 13.601 caracteres e cobre a moldura, a escala tipográfica, a paleta e as transições. Ao copiá-lo você recebe esse texto; ao enviá-lo ao Studio, o mesmo pedido é preparado com a página já descrita.
Quanto de Neon Logic depende de React e Tailwind CSS?
Neon Logic foi construído em React e Tailwind CSS, e a entrada registra isso para dar procedência. O briefing descreve posições, tamanhos e tempos, então ele se reconstrói em qualquer framework capaz de definir tipografia e posicionar elementos.
Como se comportam as transições de 800ms em Neon Logic?
O movimento é especificado no mesmo nível de detalhe do layout: as mudanças de estado assentam na faixa de 800ms. Porte a composição primeiro e os tempos depois, porque é mais fácil igualá-los depois que o layout está de pé.
