HSL EBOOK // EDIÇÃO LIMITADA

SITE
CINEMATGRÁFICO

Crie um site que parece saído de um jogo AAA — brush reveal, partículas de faísca, HUD de game, tudo com código puro e ferramentas 100% grátis.

De R$97

R$27

ou 7x de R$4,00 no cartão

QUERO MEU EBOOK AGORA

Acesso imediato por email • Garantia de 7 dias

Seu site parece genérico demais?

Você já viu sites que parecem saídos de um filme de ficção científica — com imagens que mudam ao passar o mouse, partículas flutuando, textos com glitch, HUD de game — e pensou: "isso é caro, né?"

Não é. É código puro. HTML + CSS + JavaScript. Sem framework, sem plugin, sem mensalidade.

Seu site tem a mesma cara de template do WordPress
Você paga R$50+/mês em plataformas que te limitam
Não sabe criar efeitos visuais que chamam atenção
Seu concorrente tem um site 10x mais profissional
Você perde horas tentando customizar themes prontos

Esse ebook muda isso. Em 7 passos, você cria um site cinematográfico do zero.

O que você vai criar

Um site que impressiona

Brush Reveal

Efeito de pintura no cursor que revela uma segunda imagem. O visitante passa o mouse e a imagem "acorda". Tudo com CSS mask + JavaScript.

Partículas de Faisca

80 faíscas caindo com trails, glow laranja, gravidade real. Canvas puro, sem bibliotecas externas.

HUD de Game

Cantos SVG, barra de progresso, textos "SYSTEM ONLINE" — o site parece um menu de jogo cyberpunk.

Tipografia Cyberpunk

Fontes tech com gradiente, glitch effects, scanlines. Tudo gratuito via Google Fonts.

Loader Animado

Barra de progresso que some suavemente antes de revelar o site. Profissional do primeiro clique.

Zero Custo

VS Code + Google Fonts + GSAP + Canvas API + Vercel. Tudo grátis. Custo total: R$0.

Passo a passo

7 passos pra seu site

Gere as Imagens

Use Nano Banana 2 ou GPT Image 2 pra criar duas versões da mesma cena: normal e ativada.

Crie o HTML Base

Estrutura semântica com hero section, imagem base, imagem reveal, overlay e canvas.

Implemente o Brush Reveal

CSS mask + JavaScript atualizando a posição do gradiente radial conforme o cursor.

Adicione as Partículas

Canvas 2D com classe Spark: posição, velocidade, alpha, trails. Loop com requestAnimationFrame.

Monte o HUD

Cantos SVG, textos monospace, barra de progresso com GSAP. pointer-events: none.

Animações de Entrada

GSAP timeline com stagger: tag → título → subtítulo → CTA. Suave e profissional.

Suba no Vercel

Arraste a pasta. URL pública com SSL, CDN global, deploy automático. Grátis.

Resultado real

O que o site "Depois do Fim" tem

"O site é um único arquivo index.html. CSS inline, JavaScript no final. Sem build tools, sem framework, sem backend. Tudo roda no navegador."

— Stack completa documentada no ebook

"Brush reveal com CSS mask, 80 partículas de faísca com trails, HUD de game com SVG, tipografia Orbitron + JetBrains Mono, loader com GSAP, scanlines, noise, grid overlay, vinheta, glitch text — tudo sem pagar nada."

— 12 técnicas documentadas passo a passo

Stack completa

Tudo que usamos

Elemento	Tecnologia	Custo
Brush Reveal	CSS mask + JS radial-gradient	Grátis
Partículas	Canvas 2D, 80 sparks	Grátis
Loader	Barra + GSAP	Grátis
Entrada	GSAP timeline	Grátis
HUD	SVG + CSS absolute	Grátis
Tipografia	Orbitron + JetBrains Mono	Grátis
Scanlines	CSS repeating-linear-gradient	Grátis
Noise	SVG feTurbulence	Grátis
Grid	CSS background lines	Grátis
Vinheta	Duas radial-gradients	Grátis
Glitch	CSS animation text-shadow	Grátis
Hospedagem	Vercel	Grátis

Custo total: R$0. Tudo roda no navegador.

Pronto pra criar?

Comece Seu Site Cinematográfico Agora

Código pronto, técnicas comprovadas, custo zero. R$27.