Sobre este template
Antes de reconstruir uma landing page para uma agência ou estúdio, leia Prisma Creative Studio: a composição e a especificação por trás dela estão as duas aqui. O título diz “I have skills in color grading, visual effects, and narrative design”, e o resto da landing page se organiza em volta disso. O esquema de cores é preto #101010 por baixo e branco #E1E0CC para a tipografia, e a página é composta em Instrument Serif. A entrega é React e Tailwind CSS: uma página só, sem plugin e sem ferramenta de build entre você e o design. O movimento se resume a transições de 0.08s, mantido discreto o bastante para o texto continuar conduzindo. Use como referência quando estiver construindo landing page para uma agência ou estúdio e quiser uma composição pronta em vez de um ponto de partida.
Feito para
- Times terceirizados que assumem esta landing page e precisam de uma moldura em 455x800 fixado no repositório antes do primeiro commit.
- Quem briefa um modelo para uma landing page vai usar o prompt de 8.432 caracteres como ponto de partida.
- Feito para quem cuida do conteúdo e reescreve uma landing page cujo título precisa continuar tão longo quanto o da Prisma Creative Studio.
O que está incluído
- A navegação é fina de propósito. Uma fileira curta de links e uma única ação ficam sobre a landing page, presas a passos de espaçamento de 10px e transições de 0.08s, para a barra nunca competir com a composição atrás dela. O espaçamento entre links vem de padding, não de divisores, então a fileira lê como um objeto só.
- A tipografia faz o estilo. A tipografia é Instrument Serif, e o briefing dá uma função à família em vez de misturar por variedade. Peso, tracking e passos de tamanho estão todos especificados, então a hierarquia sobrevive a uma substituição. Substituir a família é possível, mas as proporções precisam sobreviver à troca.
- Uma grade de cards segura o meio. Onde caberia um texto corrido, esta página coloca um conjunto de painéis, e é isso que mantém a landing page fácil de varrer. A ordem dos painéis é a ordem de leitura, então nada depende de pistas de posição. A referência tem captura em 455x800.
- Links antes da ação. A navegação é uma fileira só, sem um segundo nível embaixo dela.
Movimento e interação
Todo o orçamento de animação
Toda mudança de estado na especificação vem com uma duração: as transições assentam em torno de 0.08s. Nada fica no padrão do navegador, e é por isso que a página parece autoral em vez de animada. A curva de aceleração é especificada junto com a duração (0.08s), então uma reconstrução não pode trocar a sensação sem aviso.
A página se monta conforme você rola
Parallax é o único comportamento de scroll no briefing, o que impede a página de parecer uma sequência de efeitos separados. O efeito fica restrito aos elementos nomeados no briefing, não à página inteira. Um comportamento é o efeito inteiro.
Como a landing page se reorganiza
Uma escala fluida e uma escalonada parecem iguais em tela larga. Estreite a viewport e a diferença aparece: um clamp entre 100px e 10px contra saltos fixos. A largura muda as medidas, não a rota de leitura.
O argumento que esta landing page faz
Uma camada de tingimento sobre a mídia teria sido a solução fácil. O briefing a deixa de fora. A mídia é um frame estático em 455x800. O texto continua legível porque passos de espaçamento de 10px e transições de 0.08s mantêm a moldura calma. Prisma Creative Studio enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
A landing page com a sua cara
Você não precisa reconstruir a landing page para deixá-la com a sua cara. Substitua o título e a mídia, mantenha a escala (passos de espaçamento de 10px e transições de 0.08s), e o layout continua lendo como foi desenhado. Reescreva a linha de display antes de tocar na cor.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Prisma Creative Studio?
O briefing capturado tem 8.432 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.
Por que a entrada cita React e Tailwind CSS?
Prisma Creative Studio 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.
Quanto de Prisma Creative Studio é animado?
As entradas e as mudanças de estado ficam na faixa de 0.08s. Elas são disparadas por mudanças de estado, não por uma biblioteca de scroll, e nunca seguram o texto.
