Faça um site de cinema com um prompt.

Do zero ao site no ar.

Você vai precisar do Claude Code instalado (no app do Claude ou no terminal) e de uma pasta vazia no computador.

1. Crie a conta grátis no GetLayers

   Entre em getlayers.ai e toque em Sign in. Sem conta dá pra copiar 1 prompt grátis por dia. Com a conta grátis, esse limite some.

2. Escolha um modelo grátis

   Em Library, na faixa Try for free, estão os 5 grátis: Soda, Kimi, Lumora, Laocoon e Baseline. Também tem cenas 3D, fundos e gradientes grátis. Abra o modelo e toque em Copy prompt.

   getlayers.ai · try for free

   
   

   O Laocoon, um dos grátis. Os rostos dos outros cards foram desfocados no print.

3. Cole no Claude Code

   Abra o Claude Code na pasta vazia e mande o pedido abaixo com o prompt colado no lugar indicado.

   Pedido 1 · montar o siteCopiar

   Monta este site num arquivo index.html só, com todo o 3D e as animações funcionando. Segue o prompt abaixo do jeito que está, sem simplificar nada. Quando terminar, me diz como abrir no navegador.
   
   [cole aqui o prompt que você copiou no GetLayers]

4. Abra e veja rodando

   Quando ele terminar, peça pra abrir. Mexa o mouse e role a página: o efeito tem que reagir.

   Pedido 2 · abrirCopiar

   Abre o index.html no meu navegador. Se precisar, sobe um servidor local e me passa o endereço.

5. Troque o assunto pelo teu

   O movimento fica, o conteúdo vira o teu. Use os prompts da seção de baixo: trocar o assunto, traduzir e deixar leve no celular.

6. Coloque no ar

   A Vercel tem plano grátis e o Claude faz a publicação com você.

   Pedido 3 · publicarCopiar

   Coloca esse site no ar na Vercel. Se eu não tiver a Vercel instalada, me guia passo a passo: instala, faz o login comigo e publica. No fim me passa o link.

Troque o assunto. Fica o movimento.

Uma cena feita pra relógio vira um ótimo site de café. Troque o que está entre colchetes e mande um de cada vez.

Mantém todo o 3D, o movimento e o layout. Troca só o assunto do site pro meu negócio:
Nome: [nome]
O que eu vendo: [produto ou serviço]
Pra quem: [público]
Cores da marca: [cores, ou mantém as do modelo]
Botão principal: abre o meu WhatsApp [número com DDD]
Não inventa números, depoimentos nem nomes de clientes. Onde faltar informação, deixa um texto marcado pra eu trocar.

Traduz todos os textos do site pro português do Brasil, com frases curtas e naturais, do jeito que um brasileiro fala. Inclui botões, menu, títulos, rodapé e o texto que aparece na aba do navegador. Não mexe no visual nem nas animações.

Deixa o site perfeito no celular: confere em 390 px de largura, sem rolagem pro lado, botões fáceis de tocar e texto legível. Se o 3D pesar no celular, reduz partículas e qualidade só no celular, sem tirar o efeito. Respeita quem pediu menos movimento no sistema (prefers-reduced-motion).

Coloquei as minhas fotos e o meu logo na pasta [nome da pasta]. Usa elas no lugar das imagens do modelo, otimiza o tamanho pra web e escreve um texto alternativo em português em cada uma.

Meu prompt preto e lime.

Se você quer um site no estilo do Relay sem plano pago, esse prompt é meu e monta um do zero. Não é o prompt do GetLayers: o resultado sai parecido no clima, não igual.

Crie uma landing page num arquivo index.html só, com Three.js por CDN, sem build, abrindo direto no navegador.

VISUAL
Fundo quase preto (#070806), texto off-white (#EFEFED), destaque lime (#C7F651) e cinza de apoio (#8A8D84).
Título grande em sans apertada (Inter Tight 600) com uma palavra em serifa itálica (Instrument Serif), pela Google Fonts. Rótulos pequenos em fonte mono (JetBrains Mono).
Cards com borda fina e cantos arredondados, muito respiro entre as seções.

EFEITO PRINCIPAL
Uma faixa de luz feita de centenas de fios finos, com brilho aditivo, lime no meio e puxando pro azul nas pontas, que atravessa a página em curva do topo até o rodapé.
Conforme a pessoa rola, a câmera desce acompanhando a luz. Conforme mexe o mouse, os fios se curvam um pouco na direção do cursor.
Partículas pequenas flutuando em volta, bem sutis.

SEÇÕES
1. Topo: logo, menu e um botão lime.
2. Abertura: título, subtítulo, dois botões e, do lado, um painel de vidro (fundo translúcido com desfoque) que inclina em 3D seguindo o mouse, mostrando um fluxo com 3 caixinhas ligadas por linhas.
3. Três benefícios em cards.
4. Três números com contador que sobe quando aparece na tela.
5. Preço com um controle deslizante que muda o valor.
6. Uma placa lime grande com uma frase de efeito.
7. Rodapé simples.

MOVIMENTO
Cada seção entra desfocada e vai ficando nítida (desfoque, opacidade e uma leve subida) quando aparece na tela.
Tudo liso a 60 quadros por segundo. No celular, metade dos fios e das partículas.
Respeita prefers-reduced-motion: sem animação forte pra quem pediu.

CONTEÚDO
O site é de [teu negócio, em uma frase]. Escreve os textos em português do Brasil, frases curtas. Não inventa números nem depoimentos: deixa marcado onde eu preciso preencher.

Confira o preço antes de pagar.

Preços conferidos no site do GetLayers em 23/10/2026, em dólar. Pra testar, o grátis basta.

Pagamento único nos três. Unlimited e Unlimited Plus também têm plano anual. Todo modelo, inclusive os grátis, tem licença comercial: dá pra usar em site de cliente sem dar crédito.

Antes de começar.