Sobre este template
Leia Stillmind como especificação de hero: os valores foram escritos antes de a página ser construída. A cor se limita a vermelho profundo #48292F por baixo e azul profundo #182C41 carregando os destaques, composta em Instrument Serif. A entrega é React e Tailwind CSS, capturada em 1472x1080 para a moldura estar fixada antes de qualquer linha de código. A página mantém o movimento em transições de 1000ms, cubic-bezier(0.4,0,0.2,1) e um loop de vídeo ao fundo. Se você está briefando uma hero de saúde, parta desta composição e substitua o assunto.
Feito para
- Profissionais de marketing de produto que precisam que hero continue legível com 6,2s de vídeo em loop atrás do texto.
- Quem briefa um modelo para uma hero vai usar o prompt de 6.025 caracteres como ponto de partida.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Stillmind.
O que está incluído
- Navegação sem fundo próprio. A linha de cima reúne a marca, quatro ou cinco links e uma única ação tingida de #182C41, dimensionada para ficar discreta diante do resto da página. Uma sobreposição mobile assume abaixo do breakpoint de tablet. Os links são compostos abaixo da marca em tamanho, e a ação #182C41 é o único elemento da barra com peso.
- Nada aqui é herdado. A tipografia e o espaçamento saem de uma lista só aqui: transições de 1000ms e curva de aceleração cubic-bezier(0.4,0,0.2,1). Não existe valor intermediário inventado entre os nomeados; a lista de medidas é o sistema inteiro.
- O frame de poster importa. Um único arquivo de 6,2s carrega a primeira tela inteira, e a página não tem uma segunda mídia para manter em sincronia. Um frame de poster em 1472x1080 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa. Exporte em 1472x1080 ou mais largo para o recorte continuar honesto.
- Nada estiliza além da escala. No topo da escala está Instrument Serif, com o texto de apoio bem abaixo, para a hierarquia não precisar de cor para ser lida. Os numerais usam a família da interface, então estatísticas e rótulos pertencem ao mesmo sistema.
Movimento e interação
Ponteiro só onde ajuda
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. Alguns estados confiáveis valem mais que uma lista longa de efeitos.
Rápido o bastante para parecer intencional
As mudanças de estado estão especificadas em 1000ms, então o feedback dos controles é um valor projetado, não o padrão do navegador. Os valores são curtos o bastante para ler como feedback, não como animação.
Os números por trás da hero
A hero é medida, não avaliada no olho. transições de 1000ms e curva de aceleração cubic-bezier(0.4,0,0.2,1) vêm do briefing, e o layout é organizado nesses degraus em vez de ajustado no improviso. Nada nesta hero depende de um padrão.
Como Stillmind ordena a primeira leitura
Uma página assim costuma enterrar a ação sob uma grade de recursos. Esta coloca a navegação, o selo de anúncio, a linha de estatísticas, a lista de recursos e o clipe de fundo em sequência fixa, com a ação dentro da primeira tela em vez de depois de três rolagens. O leitor de saúde recebe a oferta antes das opções.
O que se move em Stillmind
O movimento se limita a transições de 1000ms, um loop de mídia de 6,2s e estados de hover e de clique. Nada na hero anima por mais tempo do que o briefing permite. Nada anima por si nesta hero.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Stillmind?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1472x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Preciso de React e Tailwind CSS para reconstruir Stillmind?
Stillmind 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.
Como devo tratar a mídia de Stillmind em um projeto de cliente?
O briefing é uma descrição, não uma licença para redistribuir os ativos de outra pessoa. Mantenha a estrutura e os números, substitua a mídia e as marcas, e credite a origem se um cliente perguntar de onde veio o layout. A referência tem captura em 1472x1080.
