Um Prompt para um Site 3D em 30 Segundos (6 Testados)

A maioria das bibliotecas de prompts para sites 3D ou cobra pelo próprio texto do prompt ou mostra um vídeo de demonstração e guarda as palavras para si. Aqui estão seis prompts completos: cole-os no Claude como estão, ou adapte uma linha para Lovable, Bolt e Cursor. Todos os seis foram testados em um modelo ao vivo; cinco retornaram como páginas Three.js funcionando, e cada captura de tela abaixo é uma dessas renderizações, não um mockup.

Seis prompts de sites 3D que você pode copiar agora mesmo

Cada prompt solicita uma página HTML de arquivo único com Three.js carregado de um CDN. Essa restrição importa: um único arquivo abre localmente em qualquer navegador e é fácil de entregar a um desenvolvedor ou colar em um bloco de código personalizado, além de forçar o modelo a manter a cena autocontida em vez de espalhar imports por um projeto.

1. Herói da galáxia de partículas

Crie uma página HTML em arquivo único com uma seção hero interativa de galáxia 3D de partículas
usando Three.js (carregue-o de uma CDN). Requisitos: cerca de 50.000
partículas formando uma galáxia espiral que gira lentamente; as cores das partículas mudam
de âmbar quente no núcleo para violeta na borda externa; adicione OrbitControls para que
os visitantes possam arrastar para girar e dar zoom; sobreponha um título hero centralizado que
diga "Build Beyond Flat" com uma breve linha secundária e um botão de CTA; defina
pointer-events: none no contêiner da sobreposição e pointer-events: auto no
botão de CTA para que a galáxia continue arrastável atrás do texto; fundo
escuro #0a0616; trate o redimensionamento da janela. Gere SOMENTE o arquivo HTML
completo em um único bloco de código.

Gerado em 27 segundos e 3.692 tokens de saída. A galáxia gira, arrastar para orbitar funciona, e o botão continua clicável através da sobreposição. Um defeito real: a linha secundária cai sobre o núcleo galáctico brilhante e é difícil de ler. A correção está nas notas de teste abaixo.

2. Apresentação de produto orientada pela rolagem

Crie uma página HTML de arquivo único: uma vitrine de produto 3D controlada por rolagem usando
Three.js carregado de um CDN. Requisitos: um torus-knot cromado flutuante
centralizado em um canvas fixo em tela cheia; a página tem 4 seções de tela
cheia com rolagem, e conforme o usuário rola a câmera orbita o objeto em
360 graus completos enquanto a cor do material do objeto faz transições suaves por seção
(prata, azul profundo, esmeralda, cobre); cada seção mostra um título e
um texto de uma linha fixados à esquerda sobre o canvas; interpolação suave (lerp)
na rolagem para que o movimento pareça amortecido; visual de estúdio escuro
com dois holofotes coloridos e uma sombra suave no chão; trate o redimensionamento.
Produza SOMENTE o arquivo HTML completo em um único bloco de código.

Esta foi a mais pesada das cinco gerações em funcionamento (63 segundos, 7.023 tokens de saída) e o resultado mais impressionante. A rolagem move a câmera ao redor do objeto, e o material muda de cor por seção exatamente como solicitado:

A interpolação lerp amortecida também foi respeitada; o movimento tem a sensação pesada e custosa de um site de agência, em vez de uma apresentação de slides com scroll-jacking.

3. Fundo de gradiente fluido GLSL

Crie uma página HTML de arquivo único com um fundo animado em tela cheia de gradiente fluido WebGL usando um shader de fragmento GLSL personalizado com Three.js carregado de uma CDN. Requisitos: manchas orgânicas de movimento lento mesclando azul profundo, roxo e coral, guiadas por uma uniform de tempo e ruído no estilo simplex no shader de fragmento; adicione um sutil grão de filme no shader; sobreponha um card de vidro centralizado (backdrop blur) com um título branco "Ship Immersive Sites", uma linha secundária e dois botões; a animação deve permanecer suave em um laptop (quad único, sem passes de pós-processamento); trate o redimensionamento. Retorne SOMENTE o arquivo HTML completo em um único bloco de código.

31 segundos, 3.830 tokens, aprovação na primeira tentativa. A linha “single quad, no postprocessing passes” é a salvaguarda de desempenho: sem ela, os modelos tendem a recorrer ao EffectComposer e a passes de bloom que derrubam as taxas de quadros em GPUs integradas.

4. Passeio em voo por portfólio 3D (o que resistiu)

Crie uma página HTML em um único arquivo: um portfólio 3D usando Three.js de um CDN.
Seis cards de projeto flutuantes (planos arredondados com texturas de gradiente
de placeholder e títulos dos projetos renderizados na textura do card) dispostos ao longo
de uma curva suave no espaço 3D. À medida que o usuário rola a página, a câmera avança
ao longo da curva, trazendo cada card para o foco um de cada vez; a câmera
deve manter o card em foco totalmente enquadrado com uma margem confortável e nunca
passar por dentro de um card; o card em foco aumenta levemente de tamanho.
Os cards vizinhos permanecem parcialmente visíveis para dar profundidade. Adicione neblina sutil, um fundo escuro, interpolação de rolagem com amortecimento.
Clicar em um card em foco abre um link. Trate o redimensionamento.
Mantenha o código compacto: reutilize uma única função de construção de card, sem comentários.
Saída SOMENTE o arquivo HTML completo em um único bloco de código.

Este levou três execuções e ainda assim não está pronto para publicação, e a captura de tela acima mostra por que mesmo assim estamos publicando: o cartão é renderizado, mas a câmera fica atrás dele, então o título aparece espelhado. A primeira execução estourou nosso limite de saída de 16.000 tokens no meio do arquivo. A segunda (com a linha "keep the code compact", por isso essa linha está no prompt) renderizou os cartões, mas fez a câmera atravessá-los em linha reta. A terceira corrigiu o recorte e perdeu o acoplamento de rolagem da câmera. Coreografia do caminho da câmera mais texturas por cartão é de fato mais difícil para modelos do que as cenas acima; reserve uma sessão de depuração ou simplifique para uma grade curva estática com estados de hover.

5. Visualizador interativo de produtos

Crie uma página HTML em arquivo único: um visualizador interativo de produto em 3D usando
Three.js de uma CDN. Centralize uma representação geométrica estilizada do produto, sem wireframe
(um cubo chanfrado ou uma cápsula) sobre um pedestal. Painel no lado direito com
três amostras de cor e um alternador metalizado/fosco que atualizam o material em tempo real;
OrbitControls limitado à rotação horizontal; iluminação suave de estúdio em três pontos
e uma sombra de contato. Mantenha o painel como sobreposição HTML/CSS simples sobre o
canvas. Trate o redimensionamento. Saída SOMENTE o arquivo HTML completo em um único bloco de código.

Passagem na primeira tentativa, 66 segundos, 7.719 tokens. As amostras e o alternador metal/fosco atualizam o material em tempo real, e o modelo adicionou uma gentileza sem solicitação: uma nota de rodapé explicando que a rotação é travada no eixo horizontal para manter o produto enquadrado.

6. Site empresarial 3D de uma página

Crie uma página HTML de arquivo único: um site de uma página para um estúdio de design com
Three.js a partir de um CDN. Seções: hero, serviços, trabalho, contato. Uma única
forma abstrata low-poly flutua no canto superior direito do hero e gira lentamente;
à medida que o usuário rola até cada seção, a forma muda sua escala e cor
para combinar com a cor de destaque daquela seção. As seções, de resto, usam HTML/CSS limpos
(sem 3D pesado por seção) para que a página permaneça rápida. Rolagem suave, compatível com dispositivos móveis, tratar redimensionamento. Saída SOMENTE do arquivo HTML completo em um único
bloco de código.

62 segundos, 7.419 tokens. O modelo inventou um nome de estúdio, construiu as quatro seções e posicionou um icosaedro low-poly exatamente onde foi solicitado. Nossa primeira tentativa com este prompt atingiu um limite de saída de 8.000 tokens e chegou truncada — se você chamar um modelo por meio de uma API, defina o limite de saída para 16.000 tokens ou mais para prompts de página inteira.

O que aconteceu quando os executamos

Três execuções em um modelo por prompt são um relato, não um benchmark; leia isso como uma verificação pontual de onde a geração de prompt para 3D está em meados de 2026. Observações sobre o método: claude-sonnet-5 via sua API em 17 de julho de 2026, configurações padrão, sem prompt de sistema, resultados renderizados no Chrome para desktop em 1280×720 em um MacBook com Apple Silicon; nas execuções bem-sucedidas, o modelo escolheu por conta própria a versão UMD do Three.js r128 de um CDN público.

O único defeito visual entre as cinco páginas funcionando: a linha secundária do prompt 1 fica sobre a parte mais brilhante da galáxia e se torna quase ilegível. Uma linha de ajuste resolveu isso — Give the subline a subtle dark text-shadow and raise its font weight so it stays readable over the bright galaxy core. Esse é o padrão ao longo dessas execuções: a própria cena 3D tende a sair correta, e o orçamento de iterações vai para tipografia, contraste da sobreposição e, no caso do portfólio, coreografia da câmera.

O custo não é um problema nessa escala. A execução completa do teste — nove gerações, incluindo as tentativas de portfólio, cerca de 46.000 tokens de saída — custou bem menos de um dólar; nós a executamos pelo AIReiter, que revende o acesso à API do Claude por um quinto do preço oficial por token, então até mesmo uma sessão de iteração teimosa continua na faixa de troco de pão.

Como escrever seu próprio prompt de site 3D

Os prompts que passaram compartilham cinco partes. Mantenha as cinco e suas chances de aprovação na primeira tentativa aumentam acentuadamente.

1. Um único assunto da cena. Uma galáxia, um nó-toro, um campo de gradiente. Em nossas execuções e na maioria dos exemplos compartilhados pela comunidade, prompts que pedem várias características 3D não relacionadas em uma única página são onde os modelos começam a deixar de cumprir requisitos. 2. Um motor de movimento. Ou tempo (slowly rotates, driven by a time uniform) ou scroll (as the user scrolls, the camera orbits). Diga qual explicitamente; "animated" sozinho permite que o modelo escolha algo sem graça. Observação da falha do portfólio: controlar por scroll um objeto é confiável; controlar por scroll uma câmera ao longo de um caminho entre objetos é onde as coisas quebram. 3. A interação. OrbitControls para arrastar e girar funcionou em todas as execuções bem-sucedidas do nosso teste. Se você sobrepuser texto ao canvas, peça pointer-events: none no contêiner de sobreposição e pointer-events: auto nos botões — caso contrário, a camada de texto absorve os arrastos e cliques destinados à cena. 4. O conteúdo da sobreposição. Forneça o texto exato do título entre aspas. Os modelos preenchem o texto não especificado com slogans genéricos que você terá de substituir de qualquer maneira. 5. Diretrizes de desempenho e tamanho. Contagem de partículas, single quad, no postprocessing, ou low-poly mantém a página rápida; keep the code compact mantém a saída dentro dos limites de tokens da API — duas de nossas nove execuções falharam por um limite de saída antes que qualquer problema de qualidade do código aparecesse.

Vocabulário que direciona o modelo para 3D real, em vez de uma imitação plana em CSS: Three.js, particle system, GLSL fragment shader, OrbitControls, scroll-driven camera, torus-knot, lerp, fog, point lights. As palavras importam porque correspondem a nomes reais de API, então o modelo escreve com base em bibliotecas que viu no treinamento, em vez de improvisar.

O atalho para colar código

Para efeitos além do que você consegue descrever, há uma segunda técnica. Encontre um efeito Three.js finalizado no CodePen, cole o código bruto na sua ferramenta de IA e solicite apenas Add this 3D animation to the hero. O modelo traduz o trecho para a sua stack — componentes React, sua configuração de build, a estrutura da sua seção — que geralmente é a parte tediosa. A Builder.io documentou a técnica com uma animação de planeta de 50.000 partículas, incluindo a mesma correção de camadas pointer-events: none, em seu passo a passo.

Este é o caminho de maior impacto quando você quer um acabamento digno de site premiado: a matemática do shader vem de um humano que a ajustou, e a IA só faz a integração.

Quais ferramentas aceitam esses prompts

Os seis prompts acima são independentes de ferramentas; qualquer coisa que escreva e visualize HTML/JS os executará. Onde as ferramentas diferem é no formato de saída e na propriedade do código (verificado em 17 de julho de 2026):

Dois deles merecem uma observação. A proposta da VULK é que ela gera código real em React Three Fiber — cenas WebGL interativas em vez de um cabeçalho de vídeo em loop — e seus sites de demonstração comprovam isso. Resultado em código real versus um cabeçalho em vídeo é exatamente a distinção que vale verificar antes de pagar por qualquer "AI 3D website builder." E, se você preferir navegar por prompts em vez de escrevê-los, MotionSites mantém uma biblioteca categorizada voltada para Lovable, Bolt, Cursor e Claude. Uma parte é gratuita para copiar; o restante fica atrás de uma assinatura:

Onde os prompts atingem seu limite

Uma pergunta recorrente nas threads de r/lovable e r/web_design é se o prompt certo pode reproduzir sites como mont-fort.com ou as páginas labs da Noomo Agency. Resposta honesta: não apenas com um prompt. Esses sites são construídos com modelos GLTF personalizados, iluminação dirigida por direção de arte e trabalho sob medida de shaders — ativos que um prompt de texto não consegue criar do nada. O que um prompt oferece é a *mecânica* desses sites (câmeras guiadas pela rolagem, fundos com shaders, movimento amortecido) com geometria provisória. Substituir por um arquivo de modelo real preenche parte dessa lacuna, mas a iluminação, os materiais e os fallbacks para mobile continuam sendo trabalho real de design. A falha no nosso fly-through de portfólio acima é a mesma lição em miniatura: quanto mais um prompt se aproxima de cenas coreografadas com vários objetos, mais iteração humana ele exige.

Três modos de falha cobrem a maioria das gerações quebradas, cada um com uma correção em uma linha:

• Tela preta, sem erros visíveis. Geralmente uma incompatibilidade de importação de módulo ES/CDN. Prompt de correção: Use a single non-module script tag with the Three.js r128 UMD build from a CDN, no import maps. (r128 é a versão que nossas execuções de teste escolheram sem ser solicitadas, e ainda funciona; versões mais novas do Three.js removeram o caminho UMD, então fixar a versão evita a incompatibilidade.)
• Suave no desktop, com travamentos em celulares. Contagens de partículas que eram adequadas em um laptop. Prompt de correção: Halve the particle count on screens narrower than 768px and cap devicePixelRatio at 2.
• A cena 3D funciona, mas nada na página é clicável. O canvas ou uma sobreposição está capturando os eventos. Prompt de correção: Set pointer-events: none on the full-screen overlay and re-enable pointer-events: auto on buttons and links.

E um dos nossos próprios testes: o texto em um cartão 3D é renderizado espelhado. A câmera está olhando para o verso do plano. Prompt de correção: Make card materials double-sided with the texture mirrored correctly, or rotate cards to always face the camera.

Perguntas Frequentes

Existem prompts gratuitos para sites 3D?

Sim. Os seis desta postagem são completos e gratuitos para copiar, e o DocsBot e a versão gratuita do MotionSites oferecem mais. As bibliotecas pagas basicamente compram volume e variedade testada previamente, não um tipo diferente de prompt.

Esses prompts funcionam no Lovable ou no Bolt?

Sim, com um ajuste: remova o requisito de "HTML de arquivo único", já que essas plataformas criam a estrutura de projetos React. Mantenha todo o resto — o assunto da cena, o fator de movimento, a interação e a salvaguarda de desempenho são transferidos diretamente.

Preciso saber Three.js para usar um prompt de site 3D?

Não para gerar, um pouco para iterar. Os prompts acima incorporam o vocabulário necessário do Three.js. Saber o que é OrbitControls ou um shader de fragmento ajuda você a pedir mudanças precisas em vez de regenerar às cegas.

Qual é a melhor ferramenta de IA para um site 3D?

Para um efeito de arquivo único ou uma seção hero, use o Claude diretamente: você mantém o código-fonte e paga por token. Para um site hospedado com backend, Lovable ou Bolt em seus planos gratuitos, ou VULK se você quiser especificamente código exportado em React Three Fiber.

Um herói 3D prejudicará o desempenho ou o SEO?

Somente se você permitir. Mantenha o 3D em uma única cena, adicione as proteções para mobile acima e mantenha seu título e o texto principal em HTML real sobre o canvas, como fazem os seis prompts. Os crawlers leem a camada de texto, e o Core Web Vitals depende principalmente do que mais a página carrega.