Sobre este template
No-Code Waitlist preserva o rastro das decisões: o briefing que produziu esta bloco de CTA tem 6.532 caracteres. O título diz “A new way to think and create with computers”, e o resto da bloco de CTA se organiza em volta disso. A paleta se reduz a índigo profundo #020004 por baixo, tom claro #FFFFFF para a tipografia e azul suave #7C78C7 carregando os destaques, e a tipografia é Inter. A entrega é React e Tailwind CSS, capturada em 988x720 para a moldura estar fixada antes de qualquer linha de código. O briefing gasta o orçamento de movimento em transições de 60ms e um loop de vídeo ao fundo. É mais útil quando a bloco de CTA de IA e SaaS precisa sobreviver a uma troca de texto sem um novo design.
Feito para
- Comece por tipografia de 13px a 64px e seções de 100vh e deixe a paleta vir depois, porque é o espaçamento que faz esta bloco de CTA ler.
- Esta bloco de CTA serve fundadores que precisam de uma tela de prova de que o texto de SaaS aguenta 9,4s de vídeo em loop.
- Feito para quem cuida do conteúdo e reescreve uma bloco de CTA cujo título precisa continuar tão longo quanto o da No-Code Waitlist.
O que está incluído
- Uma linha, sem gaveta. A barra é a parte mais discreta da composição: marca, uma fileira curta de links e uma ação #7C78C7, tudo no menor passo tipográfico do briefing. Os links são compostos abaixo da marca em tamanho, e a ação #7C78C7 é o único elemento da barra com peso.
- Toda medida está escrita. O briefing nomeia os números: tipografia de 13px a 64px, seções de 100vh, passos de espaçamento de 14px e transições de 60ms. É por isso que a composição se sustenta, porque não existe um passo de espaçamento inventado entre a tipografia e a moldura. Os valores são citados do prompt capturado em vez de inferidos, então sobrevivem a uma nova renderização. Mude o assunto, não os passos.
- O vídeo é o fundo, não um painel. Um único clipe mudo em loop preenche a moldura em 988x720 e 9,4s, com object-fit cover e o texto empilhado acima. O briefing mantém sobreposições fora do vídeo para nada acinzentar a imagem. Exporte em 988x720 ou mais largo e o recorte cover continua funcionando.
- A barra segue a grade. Marca, links e a ação #7C78C7 compartilham uma linha de base, e é isso que impede uma fileira fina de parecer acidental.
Movimento e interação
O loop faz o trabalho ambiente
O clipe de fundo roda 9,4s em 988x720 num loop sem fim, mudo e inline, então a página continua em movimento enquanto a atenção do leitor está no texto. Não é preciso biblioteca de scroll, porque o único movimento ambiente é a própria mídia. Um frame de poster entra no lugar quando a reprodução automática é bloqueada, então o movimento soma em vez de ser obrigatório.
Todo o orçamento de animação
O orçamento de animação é pequeno e explícito: 60ms, aplicado a mudanças de estado, não a entradas. Se a curva de aceleração mudar, a duração precisa ser revista junto. Uma duração por comportamento.
Como No-Code Waitlist ordena a primeira leitura
Uma ordem rígida custa flexibilidade depois. Acrescente uma seção acima da dobra e tipografia de 13px a 64px e seções de 100vh precisam ser recortadas de novo, porque a sequência é estrutural, não decorativa. O leitor de SaaS recebe a oferta antes das opções.
Por que esta composição funciona para SaaS
6.532 caracteres de briefing produzem uma tela sem enchimento. Os valores nele são explícitos (tipografia de 13px a 64px e seções de 100vh), e é por isso que a composição continua legível quando as palavras mudam. No-Code Waitlist enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
A bloco de CTA com a sua cara
Se a sua marca tem uma paleta mais pesada, teste contra a moldura antes de assumir. índigo profundo #020004 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.
Perguntas frequentes
O que eu recebo ao copiar o briefing de No-Code Waitlist?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 988x720, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Posso reconstruir bloco de CTA do No-Code Waitlist em outra stack?
No-Code Waitlist 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 No-Code Waitlist 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 988x720.
