00
COMO FUNCIONA ESSE EBOOK
Você não precisa saber programar. Esse ebook te dá um prompt pronto que você cola no ChatGPT (ou qualquer IA) e ela cria o site inteiro pra você.
Você só precisa:
- Duas imagens — a IA te ensina a gerar (grátis)
- Colar o prompt — no ChatGPT, MiMo, Kimi, qualquer IA
- Arrastar a pasta no Vercel (hospedagem grátis)
Em menos de 10 minutos, você tem um site que parece saído de um jogo profissional. Custo: R$0.
01
O QUE O SITE TEM
Quando terminar, seu site vai ter:
- Imagem que muda no mouse — passa o cursor e uma segunda imagem aparece como um pincel de luz
- Faíscas caindo — 80 partículas laranjas descendo com rastro de luz
- Cantos de game — cantos SVG nos 4 cantos da tela, parecendo HUD de videogame
- Texto técnico — "SYSTEM ONLINE", "// SEU TEXTO" nos cantos
- Barra de carregamento — antes do site aparecer, uma barra carrega
- Texto aparecendo suavemente — título, subtítulo e botão aparecem um após o outro
- Linhas de tela — efeito sutil de TV antiga (scanlines)
- Textura no fundo — noise + grid que dá um visual de game
- Botão que brilha — quando passa o mouse, o botão muda de cor com efeito
02
PASSO 1 — GERE AS IMAGENS
Antes de tudo, você precisa de duas imagens. Uma "calma" e uma "ativada" (mais brilhante). Essas imagens são o coração do site.
Como gerar (grátis)
Use qualquer um destes sites:
- Nano Banana 2 — nano banana 2 (pesquisa no Google)
- GPT Image 2 — no ChatGPT Plus
- FLUX — no replicate.com (grátis)
Prompt exemplo — Imagem 1 (calma)
Cole este prompt e troque o que quiser (cor do cabelo, roupa, cenário):
A young woman with short blue bob hair and cybernetic prosthetic arm, wearing a red cropped jacket over black top, sitting at a cyberpunk bar counter. Two katanas resting on the bar. Graffiti-covered walls, neon signs in cyan and orange, glass bottles in foreground. Moody cinematic atmosphere, shallow depth of field, dark teal and warm orange color palette. Photorealistic, 4K, film grain.
Prompt exemplo — Imagem 2 (ativada)
Essa versão tem olhos brilhando, neon mais forte — é a que aparece no hover:
A young woman with short blue bob hair and cybernetic prosthetic arm, wearing a red cropped jacket over black top, sitting at a cyberpunk bar counter. Her eyes glow with intense cyan bioluminescent light, pupils dilated and luminous. The cybernetic arm pulses with red LED circuits activating. Neon signs in the background flare brighter with lens flares. Graffiti walls illuminated by the glow from her eyes. Two katanas on the bar reflect the cyan light. Glass bottles in foreground catch prismatic light refractions. Atmospheric fog increases. Moody cinematic atmosphere, dramatic rim lighting, volumetric neon glow, shallow depth of field, dark teal and warm orange color palette intensified. Photorealistic, 4K, film grain, cyberpunk aesthetic.
Dica importante
As duas imagens precisam ter o mesmo enquadramento. Só muda a iluminação e detalhes (olhos brilhando, neon mais forte, etc). Se quiser trocar o tema, mude o prompt — por exemplo, "um homem em floresta escura" ao invés de "mulher cyberpunk".
Salve as imagens como hero1.png e hero2.png.
03
PASSO 2 — O MEGA PROMPT
Este é o prompt principal. Copie TODO ele e cole no ChatGPT (ou MiMo, Kimi, qualquer IA). A IA vai criar o site inteiro pra você.
Crie um site HTML cinematográfico completo num único arquivo index.html com o seguinte:
## IMAGENS
Use estas imagens (o usuário vai salvar na pasta public/media/):
- hero1.png → imagem base (sempre visível, escura)
- hero2.png → imagem reveal (aparece no hover do mouse)
## EFEITO PRINCIPAL: BRUSH REVEAL
- A imagem hero2.png só aparece onde o mouse está
- Efeito de "pincel circular" de luz que revela a segunda imagem
- Raio do pincel: 200px
- Suavização: o pincel acompanha o mouse com atraso suave (lerp 0.1)
- Quando o mouse sai da imagem, a hero2.png some e volta a hero1.png
## IMAGEM BASE (hero1.png)
- Sempre visível
- Filtros: brightness(0.3) saturate(0.7) — fica escura
## IMAGEM REVEAL (hero2.png)
- Opacity 0 por padrão, fica 1 quando mouse entra
- Filtros: brightness(1.3) saturate(1.5) — fica brilhante e colorida
- Posicionada por cima da base com z-index maior
## OVERLAY ESCURO
- Gradiente que escurece a esquerda da tela (onde fica o texto)
- No hover do mouse, o overlay fica quase transparente (opacity 0.15)
## PARTÍCULAS DE FAÍSCA
- Canvas que cobre a tela toda
- 80 partículas caindo de cima pra baixo
- Cor: laranja (hsl 25, 95%, 60%)
- Cada partícula tem um trail (rastro) de 3 a 5 posições anteriores
- Gravidade: acelera conforme cai
- Quando some no fundo, reaparece no topo
## HUD DE GAME (4 cantos)
- SVG nos 4 cantos da tela (cantos em L)
- Cor: rgba(232,114,26,0.25) — laranja sutil
- Texto no canto superior esquerdo: "// SEU_TEXTO_AQUI"
- Texto no canto inferior direito: "SYS_ONLINE"
## LOADER (barra de carregamento)
- Tela preta com texto "Carregando" e barra de progresso
- Barra preenche de 0 a 100% com velocidade aleatória
- Quando chega em 100%, a tela some e o site aparece
## ANIMAÇÕES DE ENTRADA (GSAP)
Usar GSAP (CDN). Depois que o loader some, animar na ordem:
1. Tag técnica aparece (opacity + slide up)
2. Título aparece
3. Subtítulo aparece
4. Botão CTA aparece
Cada um com delay de 0.5s, ease power3.out
## CONTEÚDO DO SITE
- Tag técnica: "SUA_TAG_AQUI" (fonte JetBrains Mono, 10px, laranja, letter-spacing 6px)
- Título principal: "SEU TÍTULO" (fonte Inter, 900, clamp 48px a 120px)
- Subtítulo: "Sua descrição aqui" (Inter, 300, cor rgba(245,240,232,0.55))
- Botão CTA: "SEU BOTÃO" (JetBrains Mono, 13px, laranja, borda, no hover preenche de laranja)
## SCANLINES
- Linhas horizontais finas sobre toda a tela
- Opacity 0.02 — quase invisível mas dá textura de TV
## NOISE
- Textura granulada sobre toda a tela
- SVG feTurbulence
- Opacity 0.03
## VINHETA
- Duas radial-gradient: uma laranja sutil no canto, uma escura nas bordas
- No hover, vinheta fica mais leve (opacity 0.2)
## RESPONSIVO
- Em mobile: cursor customizado escondido, HUD escondido
- Título responsivo com clamp
## CSS VARIABLES
:root {
--fire: #E8721A;
--fire-bright: #FF6A1A;
--smoke: #0A0A0A;
--text: #F5F0E8;
}
## ESTRUTURA DA PASTA
meu-site/
├── index.html
└── public/
└── media/
├── hero1.png
└── hero2.png
## IMPORTANTE
- Tudo num ÚNICO arquivo index.html
- CSS no head, JS no final do body
- Sem frameworks, sem build tools
- Funciona abrindo o index.html direto no navegador
- Código limpo e organizado com comentários
Como usar: Copie TODO o prompt acima, cole no ChatGPT (ou MiMo, Kimi), e a IA vai gerar o código completo. Depois é só salvar as imagens e abrir no navegador.
04
PASSO 3 — SALVE OS ARQUIVOS
Depois que a IA gerar o código, faça assim:
01
Crie a pasta
Crie uma pasta chamada meu-site no seu computador.
02
Salve o index.html
Cole o código que a IA gerou num arquivo chamado index.html dentro da pasta.
03
Crie a pasta de imagens
Dentro de meu-site, crie: public/media/
04
Salve as imagens
Coloque hero1.png e hero2.png dentro de public/media/
05
Teste
Abra o index.html duplo-clique. O site vai abrir no navegador!
Estrutura final
meu-site/ → index.html + public/media/hero1.png + public/media/hero2.png
05
PASSO 4 — COLOQUE NO AR
Para seu site ficar acessível por qualquer pessoa, pelo celular, pelo mundo inteiro:
01
Entre no Vercel
Acesse vercel.com e faça login com Google ou GitHub (grátis).
02
Adicione o projeto
Clique em "Add New Project" e arraste a pasta meu-site pra lá.
03
Aguarde 10 segundos
O Vercel faz deploy automático. Pronto — seu site tá no ar com endereço próprio!
Cada vez que você editar o index.html e subir de novo, o site atualiza automaticamente.
06
PASSO 5 — PERSONALIZE
Quer mudar cores, textos, imagens? É só pedir pro ChatGPT:
Mudar a cor principal
"Troque a cor laranja (#E8721A) por verde neon (#00FF41) em todo o site"
Mudar o texto
"Troque o título pra 'MEU NEGÓCIO' e o subtítulo pra 'Soluções digitais'"
Mudar o raio do pincel
"Aumente o raio do brush reveal de 200px pra 300px"
Adicionar mais partículas
"Mude de 80 pra 120 partículas e troque a cor pra azul (#00FFFF)"
Remover efeito
"Remova os scanlines e o noise do site"
Adicionar seção
"Adicione uma seção de Depoimentos abaixo do hero, com 3 cards"
Dica
Você pode ir pedindo mudanças uma por uma. A IA entende o contexto e vai alterando o código sem perder o que já foi feito.
07
TROCA RÁPIDA DE CORES
Estas são as cores que usamos. Troque no prompt ou peça pro ChatGPT trocar:
Tema Laranja (original)
Principal: #E8721A | Fundo: #0A0A0A | Texto: #F5F0E8
Tema Verde Neon
Principal: #00FF41 | Fundo: #0A0A0A | Texto: #F5F0E8
Tema Ciano Cyberpunk
Principal: #00FFFF | Fundo: #0A0A0A | Texto: #F5F0E8
Tema Rosa
Principal: #FF2A6D | Fundo: #0A0A0A | Texto: #F5F0E8
Tema Lime HSL
Principal: #CAFF00 | Fundo: #151519 | Texto: #E0DDCC
08
O QUE ACONTECE POR BAIXO
Se você quer entender o que o site faz (sem ser técnico), aqui vai:
- Imagem base fica escura no fundo. É a primeira coisa que você vê.
. Overlay escuro esconde a direita da tela. Assim o texto da esquerda fica legível.
. Quando o mouse entra, uma segunda imagem começa a aparecer onde o mouse está — como se uma luz circular estivesse revelando algo por baixo.
. O pincel de luz acompanha o mouse com atraso, dando uma sensação fluida e profissional.
- Faíscas caem de cima pra baixo o tempo todo, dando vida ao site.
- Cantos HUD e textos técnicos dão a sensação de "game" ou "sistema".
- Loader segura o visitante por 2-3 segundos antes de revelar tudo — cria expectativa.
- GSAP faz os textos e botões aparecerem suavemente um após o outro.
- Scanlines + noise dão textura de tela de TV/cinema.
09
DICAS FINAIS
- Não precisa saber programar — o ChatGPT faz tudo. Você só cola o prompt.
- Imagens importam — quanto melhor a imagem, melhor o site. Invista tempo gerando boas imagens.
- Teste no celular — abra o site pelo celular pra ver se ficou bom.
- Peça mudanças — se algo não ficou bom, pede pro ChatGPT ajustar.
- Salve seu prompt — guarde o mega prompt personalizado. Da próxima vez é mais rápido.
- Vercel é grátis — não paga nada pra manter o site no ar.
- Compartilhe — manda o link do site pros amigos, posta no Instagram, etc.
Pronto! Se seguiu todos os passos, seu site cinematográfico está no ar. Qualquer pessoa pode acessar pelo link. Parabéns!