Um prompt para um site 3D em 30 segundos (6 testados)

Boa parte das bibliotecas de prompts para sites 3D cobra pelo texto do prompt ou mostra um vídeo de demonstração sem revelar como aquilo foi feito. Aqui estão seis prompts completos: você pode colá-los no Claude sem mudar nada ou adaptar uma linha para Lovable, Bolt e Cursor. Todos passaram por um modelo em produção; cinco viraram páginas Three.js funcionais, e cada captura abaixo é de um render real, não de um mockup.

6 prompts de site 3D para copiar e usar agora

Todos os prompts pedem uma página HTML em arquivo único, com Three.js carregado por CDN. Essa restrição é importante: um único arquivo abre localmente em qualquer navegador, pode ser entregue facilmente a um desenvolvedor ou colado em um bloco de código personalizado. Também obriga o modelo a manter a cena autocontida, em vez de espalhar imports pelo projeto.

1. Hero com galáxia de partículas

Create a single-file HTML page with an interactive 3D particle galaxy hero
section using Three.js (load it from a CDN). Requirements: about 50,000
particles forming a spiral galaxy that slowly rotates; particle colors shift
from warm amber at the core to violet at the outer rim; add OrbitControls so
visitors can drag to rotate and zoom; overlay a centered hero headline that
says "Build Beyond Flat" with a short subline and a CTA button; set
pointer-events: none on the overlay container and pointer-events: auto on
the CTA button so the galaxy stays draggable behind the text; dark
background #0a0616; handle window resize. Output ONLY the complete HTML
file in a single code block.

Gerado em 27 segundos e 3.692 tokens de saída. A galáxia gira, o controle por arraste funciona e o botão continua clicável sobre o overlay. Há uma falha real: a linha de apoio cai sobre o núcleo brilhante da galáxia e fica difícil de ler. A correção aparece nas notas de teste mais abaixo.

2. Vitrine de produto guiada pela rolagem

Create a single-file HTML page: a scroll-driven 3D product showcase using
Three.js loaded from a CDN. Requirements: a floating chrome torus-knot
centered in a fixed full-screen canvas; the page has 4 full-screen scroll
sections, and as the user scrolls the camera orbits the object a full 360
degrees while the object material color smoothly transitions per section
(silver, deep blue, emerald, copper); each section shows a headline and
one-line copy pinned to the left over the canvas; smooth interpolation (lerp)
on scroll so motion feels damped; dark studio look with two colored
spotlights and a soft ground shadow; handle resize. Output ONLY the complete
HTML file in a single code block.

Foi a mais pesada das cinco gerações bem-sucedidas, com 63 segundos e 7.023 tokens de saída, mas também a mais impressionante. A rolagem movimenta a câmera ao redor do objeto, e o material muda de cor em cada seção exatamente como solicitado:

A interpolação amortecida com lerp também foi respeitada. O movimento tem aquele peso sofisticado de site de agência, não a sensação de um slideshow sequestrado pela rolagem.

3. Fundo fluido em gradiente GLSL

Create a single-file HTML page with a full-screen animated WebGL fluid
gradient background using a custom GLSL fragment shader with Three.js loaded
from a CDN. Requirements: slow-moving organic blobs blending deep blue,
purple and coral, driven by a time uniform and simplex-style noise in the
fragment shader; add subtle film grain in the shader; overlay a centered
glass card (backdrop blur) with a white headline "Ship Immersive Sites", one
subline, and two buttons; the animation must stay smooth on a laptop (single
quad, no postprocessing passes); handle resize. Output ONLY the complete
HTML file in a single code block.

31 segundos, 3.830 tokens, aprovado na primeira tentativa. A instrução single quad, no postprocessing passes é a proteção de desempenho: sem ela, os modelos costumam recorrer a EffectComposer e passes de bloom, que derrubam a taxa de quadros em GPUs integradas.

4. Portfólio 3D em sobrevoo, o prompt que deu trabalho

Create a single-file HTML page: a 3D portfolio using Three.js from a CDN.
Six floating project cards (rounded planes with placeholder gradient
textures and project titles rendered onto the card texture) arranged along
a gentle curve in 3D space. As the user scrolls, the camera flies forward
along the curve, bringing each card into focus one at a time; the camera
must keep the focused card fully in frame with comfortable margin and never
pass through a card; the focused card scales up slightly. Neighboring cards
stay partially visible for depth. Add subtle fog, a dark background, damped
scroll interpolation. Clicking a focused card opens a link. Handle resize.
Keep the code compact: reuse one card-building function, no comments.
Output ONLY the complete HTML file in a single code block.

Este exigiu três execuções e, ainda assim, não está pronto para publicar. A captura acima explica por que ele entrou no artigo: o card renderiza, mas a câmera fica atrás dele, deixando o título espelhado. A primeira execução estourou o limite de 16.000 tokens de saída no meio do arquivo. A segunda, já com a linha keep the code compact — motivo pelo qual ela está no prompt — renderizou os cards, mas fez a câmera atravessá-los. A terceira corrigiu o clipping e perdeu a vinculação da câmera à rolagem. Coreografar uma trajetória de câmera e criar texturas individuais por card é realmente mais difícil para modelos do que as cenas anteriores; reserve uma sessão de depuração ou simplifique para uma grade curva estática com estados de hover.

5. Visualizador interativo de produto

Create a single-file HTML page: an interactive 3D product viewer using
Three.js from a CDN. Center a stylized wireframe-free geometric product
stand-in (a beveled cube or capsule) on a pedestal. Right-side panel with
three color swatches and a metal/matte toggle that update the material live;
OrbitControls limited to horizontal rotation; soft three-point studio
lighting and a contact shadow. Keep the panel plain HTML/CSS overlaying the
canvas. Handle resize. Output ONLY the complete HTML file in a single code
block.

Aprovado na primeira tentativa: 66 segundos e 7.719 tokens. As amostras e o seletor metal/fosco atualizam o material em tempo real. O modelo ainda adicionou um detalhe não solicitado: uma nota explicando que a rotação está limitada ao eixo horizontal para manter o produto enquadrado.

6. Site institucional 3D de página única

Create a single-file HTML page: a one-page site for a design studio with
Three.js from a CDN. Sections: hero, services, work, contact. A single
low-poly abstract shape floats top-right of the hero and slowly rotates;
as the user scrolls into each section the shape morphs its scale and color
to match that section accent. Sections otherwise use clean HTML/CSS
(no heavy 3D per section) so the page stays fast. Smooth scroll, mobile
friendly, handle resize. Output ONLY the complete HTML file in a single
code block.

62 segundos e 7.419 tokens. O modelo inventou o nome de um estúdio, criou as quatro seções e posicionou um icosaedro low-poly exatamente onde foi pedido. Nossa primeira tentativa com esse prompt bateu um limite de 8.000 tokens de saída e chegou truncada. Se você chamar um modelo por API, configure o limite para 16.000 tokens ou mais em prompts de páginas completas.

O que aconteceu nos testes

Três execuções de um único modelo para cada prompt são uma anedota, não um benchmark. Leia os resultados como uma verificação pontual do estágio da geração de 3D a partir de prompts em meados de 2026. Notas de método: claude-sonnet-5 via API em 17 de julho de 2026, configurações padrão, sem system prompt, resultados renderizados no Chrome para desktop em 1280×720 em um MacBook com Apple silicon. Nas execuções bem-sucedidas, o modelo escolheu sozinho a build UMD r128 do Three.js em uma CDN pública.

O único defeito visual entre as cinco páginas funcionais está no prompt 1: a linha de apoio fica sobre a área mais brilhante da galáxia e se torna quase ilegível. Uma única instrução de follow-up resolveu: 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 dos testes: a cena 3D costuma sair certa, enquanto o orçamento de iteração vai para tipografia, contraste de overlays e, no caso do portfólio, coreografia de câmera.

O custo é irrelevante nessa escala. A bateria completa de testes — nove gerações contando as tentativas extras do portfólio, cerca de 46.000 tokens de saída — custou bem menos de um dólar. Executamos tudo pelo AIReiter, que revende acesso à API do Claude por um quinto do preço oficial por token, então até uma sessão teimosa de iteração continua custando trocados.

Como criar seu próprio prompt para um site 3D

Os prompts aprovados compartilham cinco componentes. Mantenha os cinco e as chances de acertar de primeira aumentam bastante.

1. Um único elemento central na cena. Uma galáxia, um torus-knot, um campo de gradiente. Nos nossos testes e na maior parte dos exemplos compartilhados pela comunidade, é quando um prompt pede vários recursos 3D sem relação entre si na mesma página que os modelos começam a ignorar requisitos.
2. Um motor de movimento. Pode ser o tempo, como em slowly rotates e driven by a time uniform, ou a rolagem, como em as the user scrolls, the camera orbits. Diga explicitamente qual é o caso; apenas escrever "animated" deixa o modelo escolher algo sem graça. Uma lição da falha do portfólio: controlar um objeto pela rolagem é confiável; controlar uma câmera em uma trajetória entre objetos é onde as coisas quebram.
3. A interação. OrbitControls para rotação por arraste funcionou em todas as execuções bem-sucedidas do teste. Se houver texto sobre o canvas, peça pointer-events: none no contêiner do overlay e pointer-events: auto nos botões. Caso contrário, a camada de texto captura os arrastes e cliques destinados à cena.
4. O conteúdo do overlay. Informe o texto exato da headline entre aspas. Modelos preenchem textos não especificados com slogans genéricos que você terá de substituir de qualquer forma.
5. Limites de desempenho e tamanho. Contagem de partículas, single quad, no postprocessing ou low-poly ajudam a manter a página rápida; keep the code compact mantém a resposta dentro dos limites de tokens da API. Duas das nossas nove execuções morreram por limite de saída antes que qualquer problema de qualidade de código aparecesse.

Vocabulário que direciona o modelo para 3D de verdade, 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 fazem diferença porque correspondem a nomes reais de APIs. Assim, o modelo escreve para bibliotecas vistas no treinamento em vez de improvisar.

O atalho de colar código

Para efeitos que vão além do que você consegue descrever, existe uma segunda técnica. Encontre um efeito Three.js pronto no CodePen, cole o código bruto na sua ferramenta de IA e use apenas o prompt Add this 3D animation to the hero. O modelo adapta o snippet à sua stack — componentes React, configuração de build e estrutura de seções —, que normalmente é a parte tediosa. A Builder.io documentou esse truque com uma animação de planeta com 50.000 partículas, incluindo a mesma correção de camadas com pointer-events: none, em seu guia.

Esse é o caminho de maior impacto quando você busca o refinamento de um site premiado: a matemática do shader vem de uma pessoa que a ajustou, e a IA fica responsável apenas pela integração.

Quais ferramentas aceitam estes prompts

Os seis prompts acima não dependem de ferramenta: qualquer plataforma que escreva e pré-visualize HTML/JS consegue executá-los. A diferença está no formato da saída e na propriedade do código, conforme verificado em 17 de julho de 2026:

Duas delas merecem observação. A proposta da VULK é gerar código React Three Fiber de verdade — cenas WebGL interativas, não um cabeçalho em vídeo em loop —, e seus sites de demonstração sustentam essa promessa. Código real em vez de vídeo no cabeçalho é exatamente a diferença que vale verificar antes de pagar por qualquer "criador de site 3D com IA". E, se você prefere explorar prompts a escrevê-los, o MotionSites mantém uma biblioteca categorizada voltada para Lovable, Bolt, Cursor e Claude. Parte do acervo pode ser copiada gratuitamente; o restante fica atrás de uma assinatura:

Até onde os prompts conseguem chegar

Uma pergunta recorrente em discussões de r/lovable e r/web_design é se o prompt certo consegue reproduzir sites como mont-fort.com ou as páginas de laboratório da Noomo Agency. A resposta honesta é: não com um prompt sozinho. Esses sites usam modelos GLTF personalizados, iluminação dirigida artisticamente e shaders feitos sob medida — ativos que um prompt de texto não consegue criar do nada. O que o prompt entrega são as mecânicas desses sites, como câmeras guiadas pela rolagem, fundos com shader e movimento amortecido, usando geometria provisória. Trocar por um arquivo de modelo real reduz parte dessa distância, mas iluminação, materiais e fallbacks mobile continuam sendo trabalho de design de verdade. A falha do portfólio em sobrevoo ilustra a mesma lição em escala menor: quanto mais um prompt se aproxima de cenas coreografadas com vários objetos, mais iteração humana ele exige.

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

• Tela preta e nenhum erro aparente. Normalmente é uma incompatibilidade entre import ES module e 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 escolhida espontaneamente pelas execuções do teste, e ela ainda funciona; versões mais novas do Three.js abandonaram o caminho UMD, então fixar a versão evita a incompatibilidade.)
• Fluido no desktop, travando no celular. A contagem de partículas era aceitável no notebook, mas não no telefone. 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 pode ser clicado. O canvas ou um overlay 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 mais uma das nossas próprias execuções: o texto em um card 3D aparece espelhado. A câmera está olhando para a face traseira 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 deste post estão completos e podem ser copiados de graça, e DocsBot e o plano gratuito do MotionSites oferecem mais opções. Bibliotecas pagas compram principalmente volume e variedade pré-testada, não um tipo diferente de prompt.

Esses prompts funcionam no Lovable ou Bolt?

Sim, com um ajuste: retire a exigência de "HTML em arquivo único", já que essas plataformas criam projetos React. Mantenha todo o resto — elemento central da cena, motor de movimento, interação e limite de desempenho —, pois isso é transferido diretamente.

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

Não para gerar; um pouco para iterar. Os prompts acima já incluem o vocabulário necessário de Three.js. Saber o que são OrbitControls ou um fragment shader ajuda a pedir alterações precisas em vez de regenerar às cegas.

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

Para um efeito isolado ou uma seção hero, Claude diretamente: você mantém o código-fonte e paga por token. Para um site hospedado com backend, use Lovable ou Bolt nos planos gratuitos, ou VULK se você quer especificamente código React Three Fiber exportável.

Um hero 3D prejudica o desempenho ou o SEO?

Só se você deixar. Limite o 3D a uma única cena, aplique as proteções para mobile acima e mantenha headline e textos em HTML real sobre o canvas, como fazem os seis prompts. Rastreadores leem a camada de texto, e os Core Web Vitals dependem principalmente do restante carregado pela página.