Sobre este template
Esta é a página 404 da Fun 404 Page, publicada com o briefing que a produziu em vez de apenas uma captura de tela. Ela abre com “Oops, something went wrong!” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. O esquema de cores é laranja vivo #FF8233 por baixo, e a página é composta em Inter. A entrega é React e Tailwind CSS, capturada em 1664x1248 para a moldura estar fixada antes de qualquer linha de código. O movimento fica restrito a transições de 500ms, cubic-bezier(0.16,1,0.3,1) e um loop de vídeo ao fundo. Use quando a página 404 precisar de uma ordem decidida antes de qualquer seção nova ser acrescentada.
Feito para
- Times que constroem página 404 para uma marca de educação ou comunidade e querem o detalhe medido (seções de 22vh e passos de espaçamento de 200px) em vez de uma captura de tela para copiar.
- Feito para product managers que precisam da página 404 limitada a uma sprint e sem novos assets.
- Times de produto que escrevem o texto da Página 404 e precisam que cada linha respeite o comprimento para o qual o display foi dimensionado.
O que está incluído
- Links antes da ação. Uma fileira curta de links e uma única ação ficam sobre a página 404, presas a seções de 22vh e passos de espaçamento de 200px, para a barra nunca competir com a composição atrás dela. A ação é o único elemento da fileira com preenchimento, o que mantém os links lendo como texto.
- Vídeo no quadro inteiro. A mídia é um clipe de 10s recortado para cover na moldura em 1664x1248, então nunca aparecem faixas pretas em nenhuma largura. O loop é curto o bastante (10s) para o olho ler como textura e não como linha do tempo.
- Uma grade de cards segura o meio. A grade define a ordem de leitura por você: painéis com o mesmo peso, uma ideia cada, compostos em Inter em tamanho pequeno para a estrutura continuar visível. A altura dos painéis é ditada pelo texto, então uma linha mais longa não quebra o alinhamento da fileira.
- A barra segue a grade. A barra é uma linha de texto e uma ação, medida em seções de 22vh e passos de espaçamento de 200px, para ler como faixa e não como bloco.
Movimento e interação
Uma duração para os controles
O movimento nos controles é curto e repetível: 500ms a cada mudança de estado. Toda mudança de estado nomeia um valor, então o padrão do navegador nunca é usado.
Estados de ponteiro, nada mais
Os estados são tratados por componente (estados de hover nos botões e links, não em todos os cards), não por uma camada global de animação. Como os estados são simples, eles portam para qualquer sistema de componentes.
Como a página 404 se reorganiza
Quando o texto é longo, o layout estreito é o primeiro a quebrar. Aqui um clamp entre 40px e 200px absorve a mudança, e a escala é fluida, não em degraus, a seção fica presa a 22vh e a navegação vira um menu compacto no celular. Um espremer teria sido mais barato e não se sustentaria.
A ordem por trás da página 404
A atenção é conduzida, não espalhada. A página diz isso em voz alta: “Oops, something went wrong!”. 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 educação recebe a oferta antes das opções.
O que mudar primeiro em Fun 404 Page
Mude o conteúdo primeiro e confira a moldura depois. seções de 22vh, passos de espaçamento de 200px, transições de 500ms e curva de aceleração cubic-bezier(0.16,1,0.3,1) são os valores a proteger enquanto você troca o texto. Se um elemento novo não explica a oferta nem o próximo passo, o lugar dele é abaixo da dobra.
Perguntas frequentes
O prompt de Fun 404 Page é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 6.085 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 Fun 404 Page é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 6.085 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Quanto de Fun 404 Page depende de React e Tailwind CSS?
Fun 404 Page 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.
