Sobre este template
Leia Brightly como especificação de hero: os valores foram escritos antes de a página ser construída. O título diz “Manage projects effortlessly with smart tools, stay on track, meet deadlines, and keep your team productive”, e o resto da hero se organiza em volta disso. A paleta é preto #050505 por baixo e laranja vivo #F97316 carregando os destaques. A entrega é React e Tailwind CSS, capturada em 2046x1400 para a moldura estar fixada antes de qualquer linha de código. O orçamento de movimento é transições de 3.5s e um loop de vídeo ao fundo. É mais útil quando a hero de Agências e estúdios precisa sobreviver a uma troca de texto sem um novo design.
Feito para
- Esta hero serve fundadores que precisam de uma tela de prova de que o texto de agência aguenta 13,7s de vídeo em loop.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Brightly.
- Quem briefa um modelo para uma hero vai usar o prompt de 2.298 caracteres como ponto de partida.
O que está incluído
- Linha de cima: marca, links, uma ação. Marca, links e a ação #F97316 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 #F97316 é o único elemento da barra com peso.
- Nada aqui é herdado. O layout é resolvido sobre valores fixos (passos de espaçamento de 24px e transições de 3.5s), e é isso que mantém a primeira tela composta em qualquer largura. A lista é curta o bastante para um revisor conferir elemento por elemento.
- O vídeo é o fundo, não um painel. Um único arquivo de 13,7s 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 2046x1400 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- Uma linha, sem gaveta. Cada link traz estados de foco e de hover próprios, não os do navegador. Não dê à marca mais espaço do que a tipografia dela precisa.
Movimento e interação
Movimento ambiente sem biblioteca de scroll
Um único clipe de 13,7s é toda a camada ambiente: toca atrás do texto, faz loop sem corte visível e nunca reage ao ponteiro. O loop é recortado para cover, o que significa que a composição não depende de um tamanho de frame específico.
Tempos em milissegundos
Toda mudança de estado na especificação vem com uma duração: as transições assentam em torno de 3.5s. Nada fica no padrão do navegador, e é por isso que a página parece autoral em vez de animada. A curva de aceleração é especificada junto com a duração (3.5s), então uma reconstrução não pode trocar a sensação sem aviso.
Como a hero se reorganiza
O layout estreito é desenhado, não herdado. a navegação vira um menu compacto no celular em cada largura, para a hierarquia sobreviver à reorganização. Um espremer teria sido mais barato e não se sustentaria.
O que se move em Brightly
O orçamento de animação está declarado: transições de 3.5s, um loop de mídia de 13,7s e um título palavra por palavra. Nada na hero se move sem um valor associado. Nada anima por si nesta hero.
Por que o briefing de agência se sustenta
Dá para reconstruir isso como uma pilha de cards separados e perder só o argumento. A hero lê como uma decisão única: a navegação, a linha de estatísticas e o clipe de fundo em uma sequência só. Dá ao leitor de agência a rota honesta mais curta até a oferta.
Perguntas frequentes
O que o briefing por trás de Brightly contém de fato?
O briefing capturado tem 2.298 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.
Quanto de Brightly depende de React e Tailwind CSS?
Brightly 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.
Posso usar Brightly 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 2046x1400.
