Sobre este template
Sparkform preserva o rastro das decisões: o briefing que produziu esta landing page tem 6.724 caracteres. A paleta é laranja vivo #EC612C por baixo, branco #FFFFFF para a tipografia e verde-água #89CFF0 carregando os destaques, com tipografia Inter. A referência é construída com React e Tailwind CSS, e as decisões de layout estão declaradas independentemente dela. Tudo o que se move cabe em transições de 0.05s e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 6.724 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 1460x1080 como teste de aceite da primeira rodada.
- Profissionais de marketing que herdam esta landing page vão usar seções de 120vh e passos de espaçamento de 12px para conferir se uma reescrita manteve a escala.
- Esta landing page serve fundadores que precisam de uma tela de prova de que o texto de agência aguenta 7,6s de vídeo em loop.
O que está incluído
- Links colapsam em uma largura. Os links ficam em uma linha só, em um único tamanho, e a ação #89CFF0 fecha a fileira à direita, então o olho termina onde a navegação termina. Os links são compostos abaixo da marca em tamanho, e a ação #89CFF0 é o único elemento da barra com peso. Mantenha a linha de cima em uma só.
- Nada aqui é herdado. O layout trabalha com valores absolutos, não com proporções: seções de 120vh, passos de espaçamento de 12px e transições de 0.05s. Não existe valor intermediário inventado entre os nomeados; a lista de medidas é o sistema inteiro.
- O loop é o fundo. Um único clipe mudo em loop preenche a moldura em 1460x1080 e 7,6s, com object-fit cover e o texto empilhado acima. O briefing mantém sobreposições fora do vídeo para nada acinzentar a imagem. Exporte em 1460x1080 ou mais largo e o recorte cover continua funcionando.
- A navegação é fina de propósito. Se a sua página tiver mais seções, agrupe em vez de alargar a barra. A referência tem captura em 1460x1080.
Movimento e interação
Movimento ambiente sem biblioteca de scroll
O movimento ambiente vem do loop de 7,6s em 1460x1080, não de efeitos de scroll, o que mantém a página calma e a tipografia legível. Nada mais na página anima continuamente, então a mídia é a única coisa pedindo atenção.
Hover onde faz sentido
Só os controles respondem ao ponteiro (um elemento sticky que segura a posição enquanto o conteúdo passa por baixo), 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.
O que mudar primeiro em Sparkform
Uma linha, uma fonte, um destaque: essas três substituições são as que mais mudam o design. seções de 120vh, passos de espaçamento de 12px e transições de 0.05s são os valores que não devem se mover. A moldura e a escala são o que deixar em paz.
A ordem por trás da landing page
Quando um leitor de agência cai em uma tela única, ele escaneia antes de ler. O layout responde a isso: a navegação, a linha de estatísticas e a lista de recursos são dimensionados para o escaneamento, com seções de 120vh e passos de espaçamento de 12px mantendo cada parada distinta. O leitor de agência recebe a oferta antes das opções.
Por que o briefing de agência se sustenta
Suponha que a sua mídia seja mais alta que o seu texto. É para esse caso que esta composição foi construída. A mídia é um loop de 7,6s em 1460x1080. A moldura fica silenciosa e seções de 120vh e passos de espaçamento de 12px mantêm o leitor no texto. Sparkform enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Sparkform?
O briefing capturado tem 6.724 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 React e Tailwind CSS para reconstruir Sparkform?
Sparkform 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 Sparkform?
O movimento é especificado no mesmo nível de detalhe do layout: as mudanças de estado assentam na faixa de 0.05s. Porte a composição primeiro e os tempos depois, porque é mais fácil igualá-los depois que o layout está de pé.
