Sobre este template
Scene AI é uma hero de SaaS construída a partir de um único briefing escrito, e esta página documenta esse briefing. Ela abre com “Create awesome 3D scenes with AI” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. A paleta se reduz a preto #000000 por baixo e branco #EBEAD0 para a tipografia, e a tipografia é Inter. A entrada nomeia a stack que produziu a página (Tailwind CSS) em vez de escondê-la. Tudo o que se move cabe em um loop de vídeo ao fundo. Esta referência é para um produto de IA ou SaaS que quer a primeira tela resolvida antes de a construção começar.
Feito para
- Esta hero serve times que precisam justificar uma moldura em 2056x1476 para alguém que não estava no kickoff.
- Profissionais de marketing de produto que precisam que hero continue legível com 8s de vídeo em loop atrás do texto.
- Quem briefa um modelo para uma hero vai usar o prompt de 2.425 caracteres como ponto de partida.
O que está incluído
- Uma barra de navegação que sai do caminho. A marca segura a borda esquerda e os links correm à direita dela, tudo composto em Inter, para a barra pertencer à página abaixo e não a um sistema separado. Os rótulos são curtos o bastante para caber em uma linha em qualquer largura que o briefing cubra.
- Mídia sem sobreposição. A primeira tela é um único clipe em 2056x1476, e todo o resto se organiza por cima dele. Um frame de poster em 2056x1476 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa. Exporte em 2056x1476 ou mais largo para o recorte continuar honesto.
- Navegação sem fundo próprio. O menu mobile faz parte do briefing, então o estado colapsado foi desenhado, não improvisado. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
- Vídeo na camada de baixo. O loop é curto o bastante (8s) para o olho ler como textura e não como linha do tempo.
Movimento e interação
A interação está nos controles
Cada elemento interativo faz uma coisa (estados de hover nos botões e links, não em todos os cards), e é isso que mantém os estados previsíveis. Os estados interativos não mexem no layout, então nada salta sob o ponteiro.
O loop faz o trabalho ambiente
O movimento ambiente vem do loop de 8s em 2056x1476, não de efeitos de scroll, o que mantém a página calma e a tipografia legível. Como é mudo, o loop pode rodar sob o texto sem disputar som nem foco.
A hero com a sua cara
Componha o texto novo no tamanho de display que o briefing nomeia (uma moldura em 2056x1476), e o resto da escala acompanha sem um novo design. Reescreva o texto e a mídia antes de repintar qualquer coisa.
Ler Scene AI como especificação
A página tem mais números do que parece. uma moldura em 2056x1476 são os que uma reconstrução precisa manter; o resto pode mudar. Nada nesta hero depende de um padrão.
Por que o briefing de SaaS se sustenta
Se a sua primeira tela hoje explica três coisas, esta é a versão que explica uma. a navegação, o selo de anúncio, a linha de estatísticas, o clipe de fundo e o rodapé entram em ordem de leitura, com uma moldura em 2056x1476 marcando o ritmo. Dá ao leitor de SaaS a rota honesta mais curta até a oferta.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Scene AI?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 2056x1476, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Por que a entrada cita Tailwind CSS?
A referência foi construída em Tailwind CSS por circunstância de produção. Nada no layout depende dessa escolha: os valores de espaçamento, tipografia e movimento passam para o que você já usa.
De onde veio o design de Scene AI?
O briefing é uma descrição, não uma licença para redistribuir os ativos de outra pessoa. Mantenha a estrutura e os números, substitua a mídia e as marcas, e credite a origem se um cliente perguntar de onde veio o layout. A referência tem captura em 2056x1476.
