Sobre este template
Velorah mostra uma forma de construir hero para uma agência ou estúdio e publica as instruções que produziram o resultado. “Where dreams rise through the silence” é a linha que o layout foi construído para sustentar. O esquema de cores é verde-água #01405F por baixo e amarelo #D9BF63 para a tipografia, e a página é composta em Inter. A stack é React e Tailwind CSS; cada medida está registrada, e é isso que a torna reaproveitável. O briefing gasta o orçamento de movimento em transições de 0.8s. Deixe aberto enquanto escreve: o briefing de 3.788 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Fundadores que briefam uma agência vão usar a moldura em 800x589 como teste de aceite da primeira rodada.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Velorah.
- A hero cai bem em times de growth que vão testar o título em A/B sem tocar em Inter.
O que está incluído
- Navegação sem fundo próprio. 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. A ação carrega o destaque enquanto os links ficam na cor do texto, então a hierarquia da barra acompanha a da página abaixo.
- Valores que dá para conferir. Nada no layout fica por sensação: o briefing cita passos de espaçamento de 90px e transições de 0.8s e a construção precisa atingir esses valores. O espaçamento é citado nas mesmas unidades da tipografia, então os dois podem ser comparados direto.
- Texto primeiro, decoração depois. Tudo acima da dobra justifica o lugar. O briefing nomeia o texto, a moldura em 800x589 e os tamanhos de tipo, e não deixa nada decorativo competir com eles. A página é uma composição só em 800x589, e é por isso que ela se sustenta quando o texto muda. Mantenha a moldura; troque o assunto.
- Uma barra de navegação que sai do caminho. A barra fica sobre a hero em vez de empurrá-la para baixo, então a composição mantém a altura inteira da primeira tela. A ação é o único elemento da fileira com preenchimento, o que mantém os links lendo como texto. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
Movimento e interação
Feedback nos controles
Só os controles respondem ao ponteiro (estados de hover nos botões e links, não em todos os cards), então a página parece responsiva sem transformar cada elemento em um alvo. Os estados de pressão estão especificados junto com o hover, então tocar confirma o mesmo que clicar. Mantenha a camada interativa pequena.
Durações vindas do briefing
O briefing fixa o valor da transição em 0.8s, então uma reconstrução não pode cair em um padrão mais lento. A curva de aceleração é especificada junto com a duração (0.8s), então uma reconstrução não pode trocar a sensação sem aviso.
Os números por trás da hero
A maioria das referências mostra o resultado e guarda os números. Esta inverte isso: passos de espaçamento de 90px e transições de 0.8s são publicados ao lado da página, para o resultado ser reproduzido em vez de aproximado. Nada nesta hero depende de um padrão.
A ordem por trás da hero
O briefing tem 3.788 caracteres e nomeia a ordem de leitura explicitamente: a navegação, a linha de estatísticas e o clipe de fundo, com passos de espaçamento de 90px e transições de 0.8s entre eles. O leitor de agência recebe a oferta antes das opções.
O que se move em Velorah
Porte o movimento por último. O briefing o fixa como transições de 0.8s e estados de hover e de clique, que é mais fácil de igualar depois que o layout está de pé. Nada anima por si nesta hero.
Perguntas frequentes
O prompt de Velorah é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 3.788 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 hero do Velorah em outra stack?
Velorah 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.
O que comanda o movimento em Velorah?
As transições estão ligadas a estados da interface, não a uma linha do tempo de scroll, e resolvem na faixa de 0.8s. O briefing registra os valores para que quem for portar a página não precise adivinhar.
