Sobre este template
Cyber Ronin entrega a uma marca de 3D, games ou entretenimento uma primeira tela pronta e os números que a produziram. O título diz “Cyber Ronin // Neural Edges”, e o resto da landing page se organiza em volta disso. A cor se limita a laranja #C45A18 por baixo e creme #FBDBAF para a tipografia, composta em Inter. A entrada nomeia a stack que produziu a página (um único arquivo HTML autocontido) em vez de escondê-la. O orçamento de movimento é transições de 0.25s, cubic-bezier(0.25,0.46,0.45,0.94) e um loop de vídeo ao fundo. Se você está briefando uma landing page de 3D, parta desta composição e substitua o assunto.
Feito para
- Entregue um único arquivo HTML autocontido ao engenheiro com o recorte em 1920x1420 anexado e deixe que ele reconstrua.
- Quem usa um builder de IA e quer um briefing que já traga um breakpoint de 360px em vez de deixar isso para o modelo.
- Times que reconstroem a landing page de 3D de um concorrente e querem um único arquivo HTML autocontido nomeada antes de escolher um framework.
O que está incluído
- Nada aqui é herdado. O briefing fixa seções de 100vh, passos de espaçamento de 28px, transições de 0.25s e curva de aceleração cubic-bezier(0.25,0.46,0.45,0.94) e deixa o resto para o arranjo, o oposto de uma escala que cresce sozinha. Todo valor pode ser conferido contra o prompt capturado, e é isso que torna uma reconstrução verificável em vez de aproximada.
- Mídia sem sobreposição. O vídeo fica na camada de baixo da composição em 1920x1420, com a tipografia organizada acima e nada entre os dois. O loop é curto o bastante (6s) para o olho ler como textura e não como linha do tempo.
- A escala cai com força. No topo da escala está Inter, com o texto de apoio bem abaixo, para a hierarquia não precisar de cor para ser lida. O texto de interface fica em uma família só, então a página nunca mistura duas vozes no mesmo tamanho.
- Passos de espaçamento citados. O espaçamento é declarado do mesmo jeito (seções de 100vh, passos de espaçamento de 28px, transições de 0.25s e curva de aceleração cubic-bezier(0.25,0.46,0.45,0.94)), não como uma escala que cresce sozinha.
Movimento e interação
Um loop, não uma linha do tempo
O movimento ambiente vem do loop de 6s em 1920x1420, não de efeitos de scroll, o que mantém a página calma e a tipografia legível. O loop é recortado para cover, o que significa que a composição não depende de um tamanho de frame específico. Grave ou exporte em 1920x1420 ou mais largo.
A ordem de chegada decide
O movimento de entrada é gasto na mensagem da própria página, não na moldura em volta dela: o título chega palavra por palavra. O estado final é a mesma composição que um frame estático mostraria, então nada depende de a animação terminar. Copie a intenção, não a curva exata; o que importa é a ordem de chegada. A referência tem captura em 1920x1420.
Os números por trás da landing page
Assumir seções de 100vh, passos de espaçamento de 28px, transições de 0.25s e curva de aceleração cubic-bezier(0.25,0.46,0.45,0.94) troca flexibilidade por repetibilidade. É esse o ponto da referência: a mesma página em outra marca, sem um novo conjunto de suposições. Nada nesta landing page depende de um padrão.
Como a landing page se reorganiza
Uma escala fixa de desktop teria sido mais fácil. O briefing acrescenta um clamp entre 18px e 28px, que é o que mantém a linha de display proporcional entre larguras. O layout estreito é uma decisão de projeto, não um espremer, e a hierarquia sobrevive a ele.
A ordem por trás da landing page
Coloque o seu próprio texto nesta landing page e a sequência continua de pé, porque os elementos não são intercambiáveis: cada um de a linha de estatísticas, a grade de cards e a lista de recursos carrega uma função. O leitor de 3D recebe a oferta antes das opções.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Cyber Ronin?
O briefing capturado tem 10.993 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.
Posso reconstruir landing page do Cyber Ronin em outra stack?
Cyber Ronin foi construído em um único arquivo HTML autocontido, 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 briefing de Cyber Ronin é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 10.993 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
