Sobre este template
Celestial Renewal entrega a um produto de saúde ou bem-estar uma primeira tela pronta e os números que a produziram. O título da própria página é “Expert beauty and holistic wellness, delivered with warmth and intention”, e a composição é construída em volta exatamente dessas palavras. A paleta é azul profundo #010A17 por baixo e azul #0A4267 carregando os destaques, com tipografia Instrument Serif. A entrega é React e Tailwind CSS: uma página só, sem plugin e sem ferramenta de build entre você e o design. A página mantém o movimento em transições de 75ms, cubic-bezier(0.22,1,0.36,1) e um loop de vídeo ao fundo. É mais útil quando a landing page de Saúde precisa sobreviver a uma troca de texto sem um novo design.
Feito para
- Fundadores que briefam uma agência vão usar a moldura em 1464x1080 como teste de aceite da primeira rodada.
- Feito para agências que cobram por rodada e querem tipografia de 36px a 110px e passos de espaçamento de 40px acordado antes da primeira.
- Quem briefa um modelo para uma landing page vai usar o prompt de 7.343 caracteres como ponto de partida.
O que está incluído
- Linha de cima: marca, links, uma ação. Marca, links e a ação #0A4267 compartilham uma linha de base, e é isso que impede uma fileira fina de parecer acidental. Os links são compostos abaixo da marca em tamanho, e a ação #0A4267 é o único elemento da barra com peso. Teste a barra sobre a sua própria mídia antes de dar um fundo a ela.
- Medido contra a viewport. O briefing declara os tamanhos na captura (tipografia de 36px a 110px, passos de espaçamento de 40px, transições de 75ms e curva de aceleração cubic-bezier(0.22,1,0.36,1)), então dá para conferir uma reconstrução em vez de estimá-la. O espaçamento é citado nas mesmas unidades da tipografia, então os dois podem ser comparados direto.
- Vídeo na camada de baixo. A composição é construída sobre o clipe em 1464x1080, não ao lado dele, então a mídia nunca ganha painel nem borda. Exporte em 1464x1080 ou mais largo e o recorte cover continua funcionando.
- A barra segue a grade. A barra tem meia dúzia de elementos, então se reconstrói sem biblioteca de componentes. A referência tem captura em 1464x1080.
Movimento e interação
O tempo definido no briefing
O movimento nos controles é curto e repetível: 75ms a cada mudança de estado. A mesma duração se repete nos controles, o que mantém as interações com cara de um sistema só.
O canvas é o visual
A renderização em tempo de execução é a decisão de design aqui (um canvas WebGL), e o layout é construído para dar espaço a ela. Não há troca de imagem no briefing, então a cena faz parte da primeira pintura. Mantenha a interface plana em volta.
O argumento que esta landing page faz
Se a sua primeira tela hoje explica três coisas, esta é a versão que explica uma. a navegação, o selo de anúncio, a linha de estatísticas, a lista de recursos e o clipe de fundo entram em ordem de leitura, com tipografia de 36px a 110px e passos de espaçamento de 40px marcando o ritmo. Dá ao leitor de saúde a rota honesta mais curta até a oferta.
A ordem por trás da landing page
A landing page 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 saúde recebe a oferta antes das opções.
Como a landing page se reorganiza
Não existe um design mobile separado para manter. a tipografia é clampada entre 36px e 110px e a navegação vira um menu compacto no celular, e a mesma hierarquia atravessa as duas. Nada importante é descartado em larguras estreitas.
Perguntas frequentes
O prompt de Celestial Renewal é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 7.343 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 Celestial Renewal em outra stack?
Celestial Renewal 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 se comportam as transições de 75ms em Celestial Renewal?
As entradas e as mudanças de estado ficam na faixa de 75ms com cubic-bezier(0.22,1,0.36,1). Elas são disparadas por mudanças de estado, não por uma biblioteca de scroll, e nunca seguram o texto.
