Sobre este template
Scalable é a referência de hero para um produto de IA ou SaaS, e o briefing por trás dela é uma especificação de construção completa, não um moodboard. “New Feature: Zapier Integration” é a linha que o layout foi construído para sustentar. A página inteira é construída sobre índigo profundo #2B1F36 por baixo. A entrega é React e Tailwind CSS, capturada em 1920x1592 para a moldura estar fixada antes de qualquer linha de código. O movimento se resume a um loop de vídeo ao fundo, mantido discreto o bastante para o texto continuar conduzindo. É a referência certa para hero para um produto de IA ou SaaS que precisa parecer intencional já na primeira tela.
Feito para
- Esta hero serve fundadores que precisam de uma tela de prova de que o texto de SaaS aguenta 10,5s de vídeo em loop.
- Feito para product managers que precisam da hero limitada a uma sprint e sem novos assets.
- Product managers que precisam estimar a construção vão ler React e Tailwind CSS como o escopo do trabalho.
O que está incluído
- A navegação é fina de propósito. Uma fileira curta de links e uma única ação ficam sobre a hero, presas a uma moldura em 1920x1592, para a barra nunca competir com a composição atrás dela. A marca é tratada como tipografia, não como um logo fechado, o que mantém a linha de cima em uma só linha de base.
- Uma ideia por painel. O meio da página é uma grade de cards, não um bloco de texto: cada painel carrega uma ideia com um ícone e uma linha curta, o que mantém o caminho de leitura horizontal e curto. O espaçamento entre painéis é um valor só, e é isso que impede uma grade densa de parecer apertada.
- Uma linha, sem gaveta. A fileira é dimensionada pela própria tipografia, não por uma altura de cabeçalho fixa. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
- O loop é o fundo. A mídia é um clipe de 10,5s recortado para cover na moldura em 1920x1592, então nunca aparecem faixas pretas em nenhuma largura. O loop é curto o bastante (10,5s) para o olho ler como textura e não como linha do tempo.
Movimento e interação
O loop faz o trabalho ambiente
O movimento ambiente é um clipe de 10,5s em 1920x1592, rodando em loop discreto atrás do texto em vez de reagir ao ponteiro. O clipe é mudo e inline, então o primeiro frame está disponível sem interação.
Movimento que sai da frente
Esta é entregue como composição estática em 1920x1592, então a hierarquia precisa funcionar sem movimento, e funciona. A composição fica parada, então a hierarquia precisa sustentar a página, e sustenta.
A hero com a sua cara
Suponha que você só tenha uma tarde. Mude o título e o rótulo da ação, deixe uma moldura em 1920x1592 em paz, e você tem uma página que parece intencional. Uma marca diferente pode reaproveitar a moldura inteira.
A ordem por trás da hero
Compare o topo desta página com uma tela de landing page típica de SaaS. As duas trazem um título e uma ação; aqui a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards ficam em ordem fixa em vez de competir com o mesmo peso. O leitor de SaaS recebe a oferta antes das opções.
O que se move em Scalable
Uma biblioteca de animações prontas daria mais movimento que isto. O briefing pede menos: um elemento sticky e um loop de mídia de 10,5s, e nada decorativo por cima. Nada anima por si nesta hero.
Perguntas frequentes
O que o briefing por trás de Scalable contém de fato?
O briefing capturado tem 8.462 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.
De onde veio o design de Scalable?
A referência foi coletada em sceneai.art, e a mídia pertence a eles. Reconstrua a composição com texto, imagens e paleta próprios, e verifique as condições de uso do site de origem antes de publicar qualquer arquivo retirado de lá.
O briefing de Scalable é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 8.462 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
