Sobre este template
Creative Studio preserva o rastro das decisões: o briefing que produziu esta landing page tem 5.481 caracteres. “Creative Studios Built Around Elevating Your Vision Into Striking Reality” é a linha que o layout foi construído para sustentar. A paleta se reduz a branco #F3F3F3 por baixo e índigo #5E0ED7 para a tipografia, e a tipografia é Inter. A referência é construída com React e Tailwind CSS, e as decisões de layout estão declaradas independentemente dela. O movimento fica restrito a transições de 0.1s. Trate como o briefing de uma landing page para uma agência ou estúdio que precisa aguentar uma reconstrução, não só uma primeira olhada.
Feito para
- Times de growth que redesenham uma agência ou estúdio landing page e querem a moldura em 640x462 mantida enquanto o texto da oferta muda.
- Feito para quem cuida do conteúdo e reescreve uma landing page cujo título precisa continuar tão longo quanto o da Creative Studio.
- Se a sua tipografia não é Inter, os desenvolvedores front-end devem remedir o título antes de reajustar o tempo da entrada.
O que está incluído
- Navegação sem fundo próprio. Uma barra fina ocupa o topo de landing page, com a marca à esquerda e os links em Inter, para a composição ler conteúdo primeiro e moldura depois. Uma sobreposição mobile assume abaixo do breakpoint de tablet. A fileira é dimensionada pela própria tipografia, não por uma altura de cabeçalho fixa.
- Toda medida está escrita. O briefing declara os tamanhos na captura (passos de espaçamento de 10px e transições de 0.1s), então dá para conferir uma reconstrução em vez de estimá-la. Todo valor pode ser conferido contra o prompt capturado, e é isso que torna uma reconstrução verificável em vez de aproximada.
- Estrutura em uma tela. A composição está completa em 640x462: texto, mídia e controles estão todos nomeados no briefing. A página é uma composição só em 640x462, e é por isso que ela se sustenta quando o texto muda. Mantenha a moldura; troque o assunto.
- Uma barra de navegação que sai do caminho. 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.1s, para a barra nunca competir com a composição atrás dela.
Movimento e interação
Mudanças de estado, cronometradas
Os controles resolvem em 0.1s, 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.1s), então uma reconstrução não pode trocar a sensação sem aviso.
Estático por decisão
Não há biblioteca de scroll aqui: a composição em 640x462 fica parada e só se movem os elementos que respondem a você. A composição fica parada, então a hierarquia precisa sustentar a página, e sustenta. Mantenha o movimento nos controles.
Por que o briefing de agência se sustenta
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 10px e transições de 0.1s para que as seções de baixo mantenham o mesmo ritmo. Dá ao leitor de agência a rota honesta mais curta até a oferta.
O que mudar primeiro em Creative Studio
Mude o texto e a mídia primeiro, a cor depois, o layout por último. A moldura em 640x462 e a escala em Inter são o que mantém a página coesa, então substitua em volta deles, não através deles. O assunto é a parte que deve mudar.
O tempo por trás da landing page
O orçamento de animação está declarado: transições de 0.1s. Nada na landing page se move sem um valor associado. Nada anima por si nesta landing page.
Perguntas frequentes
O que o briefing por trás de Creative Studio contém de fato?
O briefing capturado tem 5.481 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 Creative Studio depende de React e Tailwind CSS?
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.
O que comanda o movimento em Creative Studio?
As transições estão ligadas a estados da interface, não a uma linha do tempo de scroll, e resolvem na faixa de 0.1s. O briefing registra os valores para que quem for portar a página não precise adivinhar.
