Sobre este template
Antes de reconstruir uma landing page para uma marca de lifestyle, leia Orbit Flora: a composição e a especificação por trás dela estão as duas aqui. A paleta se reduz a #161616 por baixo, #FFFFFF para a tipografia e magenta #FD86DB carregando os destaques, e a tipografia é Inter. A entrega é um único componente, capturada em 1454x1080 para a moldura estar fixada antes de qualquer linha de código. Tudo o que se move cabe em transições de 620ms, cubic-bezier(.16, 1.3, 1) e um loop de vídeo ao fundo. É mais útil quando a landing page de Lifestyle precisa sobreviver a uma troca de texto sem um novo design.
Feito para
- Cite curva de aceleração cubic-bezier(.16, 1.3, 1) na nota de entrega, para a próxima construção não ter de deduzi-lo da página.
- Quem usa um builder de IA e quer um briefing que já traga um único componente em vez de deixar isso para o modelo.
- Se você é fundador e vai briefar um modelo em vez de um designer, parta da landing page e deixe o prompt segurar um breakpoint de 900px.
O que está incluído
- Navegação em uma só linha. A barra carrega a marca, os links de seção e um botão #FD86DB, tudo medido em seções de 55vh e passos de espaçamento de 34px para nunca virar um segundo cabeçalho. Abaixo de 900px os links colapsam em vez de quebrar para uma segunda linha. Mantenha a linha de cima em uma só.
- Vídeo no quadro inteiro. O fundo é um único loop de 8,2s em 1454x1080, recortado para cover e sem tingimento. Todo o resto flutua acima, em uma camada superior. Um frame de poster em 1454x1080 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- Cada família com uma função. As famílias recebem papéis em vez de serem misturadas: Inter carrega o display e a interface juntos. Os numerais usam a família da interface, então estatísticas e rótulos pertencem ao mesmo sistema. Não acrescente um tamanho sem função.
- Links antes da ação. Os rótulos são curtos o bastante para caber em uma linha a 900px, e o item ativo é marcado por peso, não por uma pílula.
Movimento e interação
Um canvas, não uma imagem
Um canvas WebGL dá profundidade à página, e o layout em volta fica plano para a renderização ser a única coisa pedindo atenção. Dê um orçamento de frames à renderização: em um aparelho modesto, é o elemento que mais custa. Mantenha a interface plana em volta.
Durações vindas do briefing
O briefing fixa o valor da transição em 620ms, então uma reconstrução não pode cair em um padrão mais lento. O tempo citado cobre mudanças de estado, então o feedback é a parte do movimento que está especificada.
A ordem por trás da landing page
Nada aqui compete com a primeira decisão. O material de apoio espera abaixo da dobra, e a navegação, o selo de anúncio e a linha de estatísticas sustentam o topo da página sozinhos. O leitor de lifestyle recebe a oferta antes das opções.
O que mudar primeiro em Orbit Flora
A maioria começa pela cor de destaque. Comece pela promessa: reescreva a linha de display e teste de novo magenta #FD86DB contra a sua própria mídia. A composição é a parte reaproveitável, e ela sobrevive a uma marca diferente.
O que uma marca de lifestyle ganha aqui
A maioria das páginas de lifestyle acrescenta mais uma seção quando a primeira tela é fraca. Esta remove opções: a navegação, o selo de anúncio e a linha de estatísticas, nessa ordem, e nada que repita a oferta. Orbit Flora enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Perguntas frequentes
Preciso de um único componente para reconstruir Orbit Flora?
Orbit Flora 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.
Por que o prompt do Orbit Flora não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 9.402 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O que eu recebo ao copiar o briefing de Orbit Flora?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1454x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
