Sobre este template
Vision Reveal mostra uma forma de construir hero para uma agência ou estúdio e publica as instruções que produziram o resultado. O título da própria página é “I build compelling visual stories & motion that make ideas shine”, e a composição é construída em volta exatamente dessas palavras. A paleta se reduz a branco #E4E4E4 por baixo, preto #111111 para a tipografia e verde-água #75C5DE carregando os destaques, e a tipografia é Inter. A entrega é Framer Motion: uma página só, sem plugin e sem ferramenta de build entre você e o design. O movimento fica restrito a transições de 0.3s, cubic-bezier(0.96,-0.02,0.38,1.01) e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 16.723 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Esta hero é feita para agências que precisam da moldura em 1460x1080 sobrevivendo a três rodadas de edições do cliente.
- Esta hero responde a quem constrói e quer saber o que tipografia de 14px a 42px e seções de 100vh controla de fato no layout.
- Profissionais de marketing de produto que precisam que hero continue legível com 5,8s de vídeo em loop atrás do texto.
O que está incluído
- Uma barra de navegação que sai do caminho. A linha de cima reúne a marca, quatro ou cinco links e uma única ação tingida de #75C5DE, dimensionada para ficar discreta diante do resto da página. Abaixo de 447px os links colapsam em uma sobreposição de tela cheia. Os rótulos são curtos o bastante para caber em uma linha a 447px, e o item ativo é marcado por peso, não por uma pílula.
- Um elemento de mídia carrega o clima. A mídia faz trabalho de atmosfera, não de narrativa: um loop de 5,8s em 1460x1080 atrás de tudo. Um frame de poster em 1460x1080 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- A escala cai com força. As famílias recebem papéis em vez de serem misturadas: Inter carrega o display e a interface juntos. O tracking aperta conforme o tamanho cresce, e é por isso que a linha de display se sustenta ao longo de 14–42px.
- Uma linha, sem gaveta. Mantenha a linha de cima em uma só. A referência tem captura em 1460x1080.
Movimento e interação
Profundidade vinda da renderização
A profundidade vem da renderização, não da ilustração: um canvas WebGL. A renderização carrega a própria cor, então a paleta em volta fica discreta. Mantenha a interface plana em volta.
Dá para desligar o movimento
O briefing inclui um ramo de prefers-reduced-motion, então dá para desligar a entrada e o loop sem perder o layout. Leve esse ramo direto para o seu build. O feedback de interação continua funcionando com movimento reduzido; só as entradas saem. Mantenha o ramo de movimento reduzido quando portar a página.
O que esta hero acerta
A maioria das páginas de agência falha por acréscimo: mais seções, mais gradientes, mais promessas. Vision Reveal vai pelo caminho oposto. “I build compelling visual stories & motion that make ideas shine” já faz esse trabalho desde o primeiro frame. A composição fica em branco #E4E4E4 com verde-água #75C5DE nas ações, e isso basta para parecer intencional. Vision Reveal enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
A ordem por trás da hero
Enquanto uma página de marketing empilha prova abaixo da dobra e torce, esta hero coloca a navegação, o título, a linha de estatísticas e a lista de recursos na frente do leitor e segura o resto. O leitor de agência recebe a oferta antes das opções.
O que mudar primeiro em Vision Reveal
Comece pelo texto, não pela cor. Reescreva “I build compelling visual stories & motion that make ideas shine” como uma frase sobre o seu produto e componha em Inter no tamanho que o briefing usa. A moldura e a escala são o que deixar em paz.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Vision Reveal?
O briefing capturado tem 16.723 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 Vision Reveal em outra stack?
A referência foi construída em Framer Motion 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.
Posso manter as transições de Vision Reveal e mudar os tempos?
As entradas e as mudanças de estado ficam na faixa de 0.3s usando cubic-bezier(0.96,-0.02,0.38,1.01) com um ramo de movimento reduzido no briefing. Elas são disparadas por mudanças de estado, não por uma biblioteca de scroll, e nunca seguram o texto.
