Sobre este template
Audio Showcase é uma hero de lifestyle construída a partir de um único briefing escrito, e esta página documenta esse briefing. O título da própria página é “Press 04. Vernal woods”, e a composição é construída em volta exatamente dessas palavras. A paleta é azul #216CD1 por baixo e cinza #C7D5D5 para a tipografia, com tipografia Helvetica, Arial. A entrega é React e Tailwind CSS: uma página só, sem plugin e sem ferramenta de build entre você e o design. A página mantém o movimento em transições de 0.7s e cubic-bezier(0.22, 1, 0.36, 1). Use como referência quando estiver construindo hero para uma marca de lifestyle e quiser uma composição pronta em vez de um ponto de partida.
Feito para
- Se você é fundador e vai briefar um modelo em vez de um designer, parta da hero e deixe o prompt segurar uma moldura em 640x474.
- Quem briefa um modelo para uma hero vai usar o prompt de 6.927 caracteres como ponto de partida.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Audio Showcase.
O que está incluído
- Uma linha, sem gaveta. A barra fica sobre a hero em vez de empurrá-la para baixo, então a composição mantém a altura inteira da primeira tela. A seção ativa é marcada por peso, não por uma pílula nem por um sublinhado. A referência tem captura em 640x474.
- O briefing nomeia os passos. Nada aqui é feito no olho. A especificação fixa passos de espaçamento de 20px, transições de 0.7s e curva de aceleração cubic-bezier(0.22, 1, 0.36, 1), e o resto do layout deriva desses valores. Cada valor corresponde a uma função: um passo de tipo, um espaço, um raio ou uma transição.
- Rótulos embaixo dos números. Os números são compostos em Helvetica, Arial em um tamanho mais próximo do título do que do corpo de texto. A fileira se alinha à mesma margem do título acima dela.
- A navegação é fina de propósito. A marca segura a borda esquerda e os links correm à direita dela, tudo composto em Helvetica, Arial, para a barra pertencer à página abaixo e não a um sistema separado.
Movimento e interação
Rápido o bastante para parecer intencional
As transições estão especificadas em 0.7s usando cubic-bezier(0.22, 1, 0.36, 1), e é esse o tempo ao qual os controles obedecem. A curva de aceleração é especificada junto com a duração (0.7s), então uma reconstrução não pode trocar a sensação sem aviso.
O canvas segura a primeira tela
Um canvas WebGL faz o trabalho visual na moldura em 640x474, com a tipografia composta por cima ou ao lado. Dê um orçamento de frames à renderização: em um aparelho modesto, é o elemento que mais custa.
Por que esta composição funciona para lifestyle
Uma tela significa uma decisão para o leitor, e esse é o custo deste layout: todo o resto vai para baixo da dobra. O briefing declara passos de espaçamento de 20px, transições de 0.7s e curva de aceleração cubic-bezier(0.22, 1, 0.36, 1) para que as seções de baixo mantenham o mesmo ritmo. Audio Showcase enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Como Audio Showcase ordena a primeira leitura
Uma página assim costuma enterrar a ação sob uma grade de recursos. Esta coloca a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards em sequência fixa, com a ação dentro da primeira tela em vez de depois de três rolagens. O leitor de lifestyle recebe a oferta antes das opções.
Como a hero se reorganiza
Uma escala fluida custa menos controle sobre os tamanhos exatos. O que você ganha é uma linha de display que se mantém proporcional, e é por isso que um clamp entre 10px e 20px está no briefing. A escala muda com a viewport; a sequência, não.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Audio Showcase?
O briefing capturado tem 6.927 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.
Quanto de Audio Showcase depende de React e Tailwind CSS?
Audio Showcase 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.
Como se comportam as transições de 0.7s em Audio Showcase?
O movimento é especificado no mesmo nível de detalhe do layout: as mudanças de estado assentam na faixa de 0.7s usando cubic-bezier(0.22, 1, 0.36, 1). Porte a composição primeiro e os tempos depois, porque é mais fácil igualá-los depois que o layout está de pé.
