Sobre este template
Esta é a hero da Organic Odyssey, publicada com o briefing que a produziu em vez de apenas uma captura de tela. O título da própria página é “An odyssey through delicate living forms”, e a composição é construída em volta exatamente dessas palavras. O esquema de cores é preto #000000 por baixo, e a página é composta em Geist. A stack é React e Tailwind CSS; cada medida está registrada, e é isso que a torna reaproveitável. O briefing gasta o orçamento de movimento em transições de 300ms. Deixe aberto enquanto escreve: o briefing de 4.802 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Product managers que precisam estimar a construção vão ler uma moldura em 640x470 como o escopo do trabalho.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Organic Odyssey.
- Fundadores que estão lançando uma primeira versão e preferem adaptar uma composição em Geist a montar um template.
O que está incluído
- Uma linha, sem gaveta. Uma fileira curta de links e uma única ação ficam sobre a hero, presas a passos de espaçamento de 20px e transições de 300ms, para a barra nunca competir com a composição atrás dela. O menu mobile faz parte do briefing, então o estado colapsado foi desenhado, não improvisado.
- Duas famílias, funções claras. Os passos de tamanho e o tracking do briefing são o que dá o tom: Geist em um tamanho de display apertado, depois uma queda clara para o texto de apoio. O passo de legenda é pequeno o bastante para ficar sob um número sem mudar o ritmo da página.
- Texto primeiro, decoração depois. A composição está completa em 640x470: texto, mídia e controles estão todos nomeados no briefing. A página é uma composição só em 640x470, e é por isso que ela se sustenta quando o texto muda.
- A barra segue a grade. Se a sua página tiver mais seções, agrupe em vez de alargar a barra. A referência tem captura em 640x470.
Movimento e interação
Tempos curtos e combinados
O movimento nos controles é curto e repetível: 300ms a cada mudança de estado. Se a curva de aceleração mudar, a duração precisa ser revista junto. Leve as durações para o seu build.
Quase nenhum movimento
Esta é entregue como composição estática em 640x470, então a hierarquia precisa funcionar sem movimento, e funciona. Só se movem os elementos que respondem ao ponteiro.
Como a hero se reorganiza
Enquanto um template colapsa para uma coluna e torce, este briefing declara o que acontece (a navegação vira um menu compacto no celular) e mantém a ordem intacta. Nada importante é descartado em larguras estreitas.
Como Organic Odyssey ordena a primeira leitura
O briefing tem 4.802 caracteres e nomeia a ordem de leitura explicitamente: a navegação, o título, a linha de estatísticas e o clipe de fundo, com passos de espaçamento de 20px e transições de 300ms entre eles. O leitor de SaaS recebe a oferta antes das opções.
Ler Organic Odyssey como especificação
Quando uma reconstrução desanda, o espaçamento é o primeiro a ir. Organic Odyssey evita isso publicando passos de espaçamento de 20px e transições de 300ms junto com a composição. Nada nesta hero depende de um padrão.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Organic Odyssey?
O briefing capturado tem 4.802 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 Organic Odyssey em outra stack?
Organic Odyssey 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.
Posso manter as transições de Organic Odyssey e mudar os tempos?
As transições estão ligadas a estados da interface, não a uma linha do tempo de scroll, e resolvem na faixa de 300ms. O briefing registra os valores para que quem for portar a página não precise adivinhar.
