Sobre este template
Esta é a landing page da Task Engine, publicada com o briefing que a produziu em vez de apenas uma captura de tela. A cor se limita a branco #F0F0F0 por baixo e preto #0D0D0D para a tipografia, composta em Plus Jakarta Sans. A entrega é um único arquivo HTML autocontido, capturada em 2104x1080 para a moldura estar fixada antes de qualquer linha de código. O movimento fica restrito a transições de 2400ms, cubic-bezier(.16,1.3,1) e um loop de vídeo ao fundo. Use como referência quando estiver construindo landing page para uma marca de e-commerce e quiser uma composição pronta em vez de um ponto de partida.
Feito para
- Quem usa um builder de IA e quer um briefing que já traga curva de aceleração cubic-bezier(.16,1.3,1) em vez de deixar isso para o modelo.
- Times de estúdio que estão briefando uma construção e procuram um único arquivo HTML autocontido para reagir.
- Feito para agências que apresentam trabalho de e-commerce e precisam de um breakpoint de 700px na primeira resposta ao cliente.
O que está incluído
- Números, não impressões. Toda medida do briefing é um número que dá para medir de volta: seções de 100vh, passos de espaçamento de 30px, transições de 2400ms e curva de aceleração cubic-bezier(.16,1.3,1). A tipografia e o layout compartilham os mesmos passos, então nada sai do lugar quando um dos dois é substituído.
- Um clipe em sangria total atrás da tipografia. Um único clipe mudo em loop preenche a moldura em 2104x1080 e 10,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. Um frame de poster em 2104x1080 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- Nada estiliza além da escala. A tipografia é o sistema de estilo aqui: Plus Jakarta Sans no tamanho de display, a mesma família em toda a interface e nenhuma segunda cor de destaque fazendo o trabalho. Os pesos são especificados por papel, então a hierarquia não depende de chute na hora de construir.
- Medido contra a viewport. O espaçamento é declarado do mesmo jeito (seções de 100vh, passos de espaçamento de 30px, transições de 2400ms e curva de aceleração cubic-bezier(.16,1.3,1)), não como uma escala que cresce sozinha.
Movimento e interação
Tempos em milissegundos
O movimento aqui é medido em milissegundos: 2400ms usando cubic-bezier(.16,1.3,1). Esse é todo o orçamento de animação, gasto em mudanças de estado, não em uma linha do tempo de scroll. Se a curva de aceleração mudar, a duração precisa ser revista junto.
Um loop, não uma linha do tempo
O movimento ambiente é um clipe de 10,6s em 2104x1080, rodando em loop discreto atrás do texto em vez de reagir ao ponteiro. O clipe é curto o bastante para fazer loop sem emenda visível, o que importa mais que a resolução.
O que se sustenta para E-commerce
O design defende o argumento em uma única tela. A mídia é um loop de 10,6s em 2104x1080. A mídia carrega a atmosfera, o texto carrega a oferta, e seções de 100vh e passos de espaçamento de 30px mantêm os dois separados. Dá ao leitor de e-commerce a rota honesta mais curta até a oferta.
Como a landing page se reorganiza
Comparado a um layout mobile que esconde seções, este as mantém e muda a forma delas: o layout muda em 700px, a seção fica presa a 100vh e o movimento tem um ramo de movimento reduzido. A versão mobile é uma decisão, não um recurso de reserva.
O que mudar primeiro em Task Engine
Se a sua marca tem uma paleta mais pesada, teste contra a moldura antes de assumir. branco #F0F0F0 sustenta a página, então um destaque mais escuro precisa de mais contraste do que a referência usa. Mantenha a moldura e a escala; o assunto é a parte que deve mudar.
Perguntas frequentes
Posso reconstruir landing page do Task Engine em outra stack?
Task Engine 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 Task Engine está organizada?
Tudo o que é citado nesta página vem do briefing capturado de 14.503 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O prompt de Task Engine é uma especificação pronta ou um ponto de partida?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 2104x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
