Sobre este template
CozyPaws mostra uma forma de construir hero para uma marca de e-commerce e publica as instruções que produziram o resultado. A paleta se reduz a branco #EFFDF0 por baixo, verde profundo #1A3D1A para a tipografia e laranja vivo #E86A10 carregando os destaques, e a tipografia é Inter. A entrega é React e Tailwind CSS: uma página só, sem plugin e sem ferramenta de build entre você e o design. Tudo o que se move cabe em transições de 0.8s, cubic-bezier(0.16, 1, 0.3, 1) e um loop de vídeo ao fundo. Use como referência quando estiver construindo hero para uma marca de e-commerce e quiser uma composição pronta em vez de um ponto de partida.
Feito para
- Esta hero serve times que precisam justificar uma moldura em 1460x1080 para alguém que não estava no kickoff.
- Agências que apresentam uma marca de e-commerce hero e querem seções de 70vh e passos de espaçamento de 60px citado no deck, para o orçamento ainda valer depois do kickoff.
- Profissionais de marketing de produto que precisam que hero continue legível com 4,8s de vídeo em loop atrás do texto.
O que está incluído
- A barra segue a grade. Os links ficam em uma linha só, em um único tamanho, e a ação #E86A10 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 #E86A10 é o único elemento da barra com peso.
- Uma escala para tipo e moldura. Os tamanhos são declarados, não herdados: seções de 70vh, passos de espaçamento de 60px, transições de 0.8s e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1). Troque a família tipográfica ou o texto e essas relações continuam valendo. O menor e o maior valor dessa lista definem a faixa em que a composição trabalha.
- Um elemento de mídia carrega o clima. A moldura em 1460x1080 é preenchida por um único loop que roda atrás do texto e não pede controles. Exporte em 1460x1080 ou mais largo e o recorte cover continua funcionando.
- Cada família com uma função. A tipografia é o sistema de estilo aqui: Inter no tamanho de display, a mesma família em toda a interface e nenhuma segunda cor de destaque fazendo o trabalho. Os numerais usam a família da interface, então estatísticas e rótulos pertencem ao mesmo sistema.
Movimento e interação
Durações curtas e nomeadas
Os controles resolvem em 0.8s, rápido o bastante para a página responder ao toque, e não depois dele. A curva de aceleração é especificada junto com a duração (0.8s), então uma reconstrução não pode trocar a sensação sem aviso.
Estados de ponteiro, nada mais
A camada interativa é deliberadamente pequena: estados de hover nos botões e links, não em todos os cards. Como os estados são simples, eles portam para qualquer sistema de componentes.
Ler CozyPaws como especificação
Quase toda decisão aqui é um valor que dá para conferir: seções de 70vh, passos de espaçamento de 60px, transições de 0.8s e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1). A mídia é um loop de 4,8s em 1460x1080. A tipografia segue em Inter, então qualquer substituição precisa manter as mesmas proporções. Nada nesta hero depende de um padrão.
Como CozyPaws ordena a primeira leitura
A atenção é conduzida, não espalhada. O olho cai primeiro na linha de display, depois no texto de apoio, depois na ação. A prova, onde aparece, fica como faixa ou linha, e não como parede de depoimentos. Essa sequência é o design. O leitor de e-commerce recebe a oferta antes das opções. A referência tem captura em 1460x1080.
O que esta hero acerta
Uma camada de tingimento sobre a mídia teria sido a solução fácil. O briefing a deixa de fora. O texto continua legível porque seções de 70vh e passos de espaçamento de 60px mantêm a moldura calma. Dá ao leitor de e-commerce a rota honesta mais curta até a oferta.
Perguntas frequentes
O prompt de CozyPaws é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 6.443 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.
O briefing de CozyPaws é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 6.443 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Por que a entrada cita React e Tailwind CSS?
CozyPaws 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.
