Sobre este template
Kova Mobile App é uma referência prática para um produto de IA ou SaaS: fluxo de onboarding com layout definido, medidas tiradas e tudo pronto para reconstruir. O título diz “Turn your ideas into cinematic scenes”, e o resto da fluxo de onboarding se organiza em volta disso. A paleta se reduz a branco #FFFFFF por baixo, preto #000000 para a tipografia e índigo #2E1065 carregando os destaques, e a tipografia é Helvetica Neue. A stack é um único componente, então dá para levar fluxo de onboarding para um projeto sem handoff de design. Tudo o que se move cabe em transições de 800ms e um loop de vídeo ao fundo. Parta do briefing capturado e depois edite a fluxo de onboarding em vez de reconstruí-la do zero.
Feito para
- Entregue um único componente ao engenheiro com o recorte em 1252x864 anexado e deixe que ele reconstrua.
- Desenvolvedores front-end que reconstroem isso em um único componente e querem as transições especificadas, não adivinhadas.
- Esta fluxo de onboarding serve designers que precisam entregar uma construção em um único componente a um engenheiro e querem o movimento escrito.
O que está incluído
- Uma barra de navegação que sai do caminho. A navegação é uma faixa fina, não um bloco: marca à esquerda, links à direita do centro, uma ação #2E1065, tudo isso no topo de fluxo de onboarding e sem fundo próprio. Os links são compostos abaixo da marca em tamanho, e a ação #2E1065 é o único elemento da barra com peso. Teste a barra sobre a sua própria mídia antes de dar um fundo a ela.
- Medido contra a viewport. Nada no layout fica por sensação: o briefing cita seções de 100vh, passos de espaçamento de 24px e transições de 800ms e a construção precisa atingir esses valores. O briefing declara valores, não proporções, então a composição mantém as relações quando o texto muda de tamanho. Os números são o design; o resto é arranjo.
- Vídeo na camada de baixo. Um clipe de 8s em 1252x864 faz o trabalho de atmosfera; o briefing fixa o recorte e deixa a tipografia intacta por cima. Exporte em 1252x864 ou mais largo e o recorte cover continua funcionando.
- O tracking aperta ao crescer. A tipografia é o sistema de estilo aqui: Helvetica Neue no tamanho de display, a mesma família em toda a interface e nenhuma segunda cor de destaque fazendo o trabalho. Substituir a família é possível, mas as proporções precisam sobreviver à troca.
Movimento e interação
A cena é o visual
O visual é produzido em tempo de execução (um canvas WebGL), não carregado como imagem, então a moldura em 1252x864 fica com um arquivo a menos. A renderização é o último elemento a ficar pronto, então a página precisa funcionar no estado anterior a ela carregar.
Durações curtas e nomeadas
As mudanças de estado estão especificadas em 800ms, então o feedback dos controles é um valor projetado, não o padrão do navegador. A mesma duração se repete nos controles, o que mantém as interações com cara de um sistema só.
Como Kova Mobile App ordena a primeira leitura
Nada aqui compete com a primeira decisão. “Turn your ideas into cinematic scenes” já faz esse trabalho desde o primeiro frame. O material de apoio espera abaixo da dobra, e a navegação, o título, a linha de estatísticas e o clipe de fundo sustentam o topo da página sozinhos. O leitor de SaaS recebe a oferta antes das opções.
O argumento que esta fluxo de onboarding faz
A contrapartida é a densidade: esta fluxo de onboarding diz menos na primeira tela do que um layout guiado por recursos diria. O que ela mantém é a ordem de leitura, e a navegação, o título, a linha de estatísticas e o clipe de fundo fazem o trabalho que uma página mais longa espalharia. Kova Mobile App enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
O que se move em Kova Mobile App
Porte o movimento por último. O briefing o fixa como transições de 800ms, um loop de mídia de 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 fluxo de onboarding.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Kova Mobile App?
O briefing capturado tem 3.523 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.
Preciso de um único componente para reconstruir Kova Mobile App?
Kova Mobile App foi construído em um único componente, 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 briefing de Kova Mobile App é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 3.523 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
