Sobre este template
Immersive Ocean preserva o rastro das decisões: o briefing que produziu esta hero tem 4.030 caracteres. O título diz “Shaping visual narratives, one pixel at a time”, e o resto da hero se organiza em volta disso. A paleta é azul profundo #000410 por baixo, cinza #C2CFCA para a tipografia e verde-água #0E4154 carregando os destaques, com tipografia Geist. A entrega é React e Tailwind CSS, capturada em 640x478 para a moldura estar fixada antes de qualquer linha de código. Tudo o que se move cabe em cubic-bezier(0.16,1,0.3,1). Use como referência quando estiver construindo hero para uma agência ou estúdio e quiser uma composição pronta em vez de um ponto de partida.
Feito para
- Times internos que estendem esta hero e precisam de seções de 100vh e passos de espaçamento de 80px levado para os novos blocos sem alteração.
- Feito para um fundador solo lançando uma hero para uma agência ou estúdio, sem nenhum design system atrás.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Immersive Ocean.
O que está incluído
- Navegação em uma só linha. A linha de cima reúne a marca, quatro ou cinco links e uma única ação tingida de #0E4154, 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 #0E4154 é o único elemento da barra com peso. Uma ação por barra.
- Números, não impressões. Nada no layout fica por sensação: o briefing cita seções de 100vh, passos de espaçamento de 80px e curva de aceleração cubic-bezier(0.16,1,0.3,1) e a construção precisa atingir esses valores. A tipografia e o layout compartilham os mesmos passos, então nada sai do lugar quando um dos dois é substituído. Mantenha os valores que parecem arbitrários.
- O tracking aperta ao crescer. A tipografia é Geist, 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. Os passos de tamanho são valores fixos, e é isso que permite trocar a família mantendo a mesma hierarquia.
- Uma barra sem excesso. Cada link traz estados de foco e de hover próprios, não os do navegador. Desenhe o estado colapsado antes de acrescentar um sexto link.
Movimento e interação
Durações curtas e nomeadas
Os controles resolvem em 0, rápido o bastante para a página responder ao toque, e não depois dele. A mesma duração se repete nos controles, o que mantém as interações com cara de um sistema só. Não entregue o padrão do navegador.
Feedback nos controles
A interação é local a cada controle aqui (estados de hover nos botões e links, não em todos os cards), então nada na página se move por efeito colateral. Os estados saem da paleta da própria página, não do padrão de um componente. Alguns estados confiáveis valem mais que uma lista longa de efeitos.
Como a hero se reorganiza
Uma escala fluida e uma escalonada parecem iguais em tela larga. Estreite a viewport e a diferença aparece: um clamp entre 24px e 80px contra saltos fixos. Os controles continuam grandes o bastante para o toque e o texto mantém a ordem de leitura em qualquer largura.
O que mudar primeiro em Immersive Ocean
Se a sua marca tem uma paleta mais pesada, teste contra a moldura antes de assumir. azul profundo #000410 sustenta a página, então um destaque mais escuro precisa de mais contraste do que a referência usa. Substituir é mais barato que compor, e é esse o ponto.
A ordem por trás da hero
A hero tem uma rota de leitura declarada. A navegação apresenta o produto e dá a quem volta um caminho familiar. A partir daí o olho percorre 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, e é isso que impede uma tela única de ler como lista. O leitor de agência recebe a oferta antes das opções.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Immersive Ocean?
O briefing capturado tem 4.030 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 hero do Immersive Ocean em outra stack?
Immersive Ocean 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.
De onde veio o design de Immersive Ocean?
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 640x478.
