Sobre este template
3D Collectible Hero resolve o problema de hero para uma marca de 3D, games ou entretenimento com um único briefing capturado. A paleta se reduz a verde suave #85CC92 por baixo e vermelho #F4845F carregando os destaques, e a tipografia é Anton. A stack é React e Tailwind CSS; cada medida está registrada, e é isso que a torna reaproveitável. O orçamento de movimento é transições de 650ms e cubic-bezier(0.4,0,0.2,1). Esta referência é para uma marca de 3D, games ou entretenimento que quer a primeira tela resolvida antes de a construção começar.
Feito para
- Esta hero serve times que precisam justificar uma moldura em 640x470 para alguém que não estava no kickoff.
- Se o seu time tiver de cortar o movimento, a hero continua legível, com um tamanho de display fixo de 22px e seções de 100vh fazendo o trabalho de hierarquia.
- Feito para um fundador solo lançando uma hero para uma marca de 3D, games ou entretenimento, sem nenhum design system atrás.
O que está incluído
- Topo com uma única ação. Marca, links e a ação #F4845F compartilham uma linha de base, e é isso que impede uma fileira fina de parecer acidental. Os links são compostos abaixo da marca em tamanho, e a ação #F4845F é o único elemento da barra com peso.
- Tamanhos fixados no briefing. A lista é curta (um tamanho de display fixo de 22px, seções de 100vh, passos de espaçamento de 200px e transições de 650ms), e é por isso que o sistema inteiro pode ser conferido à mão. O briefing declara valores, não proporções, então a composição mantém as relações quando o texto muda de tamanho.
- Navegação sem fundo próprio. Desenhe o estado colapsado antes de acrescentar um sexto link. A referência tem captura em 640x470.
- Valores que dá para conferir. O espaçamento é declarado do mesmo jeito (um tamanho de display fixo de 22px, seções de 100vh, passos de espaçamento de 200px e transições de 650ms), não como uma escala que cresce sozinha.
Movimento e interação
Mudanças de estado, cronometradas
Os tempos são curtos e consistentes (650ms com cubic-bezier(0.4,0,0.2,1)), então os estados de hover e de clique leem como um sistema só, não como um conjunto de efeitos separados. Nada espera por uma posição de scroll, então a página responde no instante em que você a toca.
A superfície tem grain
Uma camada de grain fica sobre verde suave #85CC92, o que impede grandes áreas chapadas de parecerem cor pura sem precisar de um gradiente. Ela substitui o gradiente que uma página assim normalmente usaria para dar profundidade.
O que se move em 3D Collectible Hero
O orçamento de animação está declarado: transições de 650ms, estados de hover e de clique e uma camada de grain. Nada na hero se move sem um valor associado. Nada anima por si nesta hero.
Por que esta composição funciona para 3D
O design defende o argumento em uma única tela. A mídia é um frame estático em 640x470. A mídia carrega a atmosfera, o texto carrega a oferta, e um tamanho de display fixo de 22px e seções de 100vh mantêm os dois separados. Dá ao leitor de 3D a rota honesta mais curta até a oferta.
Como a hero se reorganiza
A hero é composta em 640x470 e recomposta para larguras estreitas. a escala é fluida, não em degraus e a seção fica presa a 100vh, então a versão de celular é uma decisão, não um espremer. A reprodução automática e o movimento são tratados com honestidade, então a página continua comunicando quando eles não estão disponíveis.
Perguntas frequentes
O que eu recebo ao copiar o briefing de 3D Collectible Hero?
O briefing capturado tem 5.347 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 3D Collectible Hero é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 5.347 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Preciso de React e Tailwind CSS para reconstruir 3D Collectible Hero?
3D Collectible Hero 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.
