Sobre este template
Antes de reconstruir uma seção de recursos para um produto de IA ou SaaS, leia Vela Ul: a composição e a especificação por trás dela estão as duas aqui. A paleta se reduz a #16120C por baixo e #F7F5F2 para a tipografia, e a tipografia é Arial, Helvetica. A stack é um único arquivo HTML autocontido, então dá para levar seção de recursos para um projeto sem handoff de design. A página mantém o movimento em transições de 720ms, cubic-bezier(.22,1.36,1) e um loop de vídeo ao fundo. É mais útil quando a seção de recursos de IA e SaaS precisa sobreviver a uma troca de texto sem um novo design.
Feito para
- Entregue um único arquivo HTML autocontido ao engenheiro com o recorte em 1920x1418 anexado e deixe que ele reconstrua.
- Escreva o seu próprio título e depois reconstrua esta seção de recursos em um único arquivo HTML autocontido com as medidas intactas.
- Quem usa um builder de IA e quer um briefing que já traga um breakpoint de 410px em vez de deixar isso para o modelo.
O que está incluído
- Linha de cima: marca, links, uma ação. Uma fileira curta de links e uma única ação ficam sobre a seção de recursos, presas a um tamanho de display fixo de 25px e seções de 100vh, para a barra nunca competir com a composição atrás dela. Abaixo de 410px os links colapsam em vez de quebrar para uma segunda linha.
- O loop é o fundo. A mídia faz trabalho de atmosfera, não de narrativa: um loop de 4,7s em 1920x1418 atrás de tudo. Um frame de poster em 1920x1418 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- Uma fileira de estatísticas em vez de uma afirmação. Os números são compostos como tipografia, não dentro de um card: Arial, Helvetica no tamanho de display com rótulos um passo abaixo. O destaque é gasto nos números que fazem uma afirmação, não na fileira inteira. Se um número precisa de um parágrafo, ele não é estatística.
- A escala é clampada, não escalonada. O briefing usa um clamp entre 14px e 20px no título, e é isso que impede uma linha longa de quebrar em um ponto ruim. O menu mobile faz parte do mesmo briefing, então o estado colapsado também foi desenhado.
Movimento e interação
O tempo definido no briefing
Toda mudança de estado na especificação vem com uma duração: as transições assentam em torno de 720ms com cubic-bezier(.22,1.36,1). Nada fica no padrão do navegador, e é por isso que a página parece autoral em vez de animada. As durações são curtas o bastante para o feedback parecer resposta, e não animação. Mudanças de estado rápidas, sem linha do tempo de scroll.
O loop faz o trabalho ambiente
O movimento ambiente vem do loop de 4,7s em 1920x1418, 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.
O que mudar primeiro em Vela Ul
A contrapartida é o reconhecimento. Mantenha muito de Vela Ul e a página lê como de outra pessoa; mantenha os números e mude o conteúdo, e ela lê como sua. Coloque o texto novo no mesmo tamanho de display e confira o contraste de novo antes de acrescentar qualquer coisa. A referência tem captura em 1920x1418.
O argumento que esta seção de recursos faz
A afirmação é feita uma vez, no tamanho de display. Todo o resto da seção de recursos se ordena em volta dessa linha: a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards, e nenhuma segunda promessa disputa a primeira leitura. Vela Ul enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Como a seção de recursos se reorganiza
Não dá para resolver uma tela estreita encolhendo-a. Este briefing trata a mudança na tipografia e na navegação: a escala é fluida, não em degraus, o layout muda em 410px e a seção fica presa a 100vh. A escala muda com a viewport; a sequência, não.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Vela Ul?
O briefing capturado tem 25.889 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.
Posso reconstruir seção de recursos do Vela Ul em outra stack?
Vela Ul foi construído em um único arquivo HTML autocontido, 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 esta entrada de Vela Ul está organizada?
Tudo o que é citado nesta página vem do briefing capturado de 25.889 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
