autodj-site

Landing page do AutoDJ — autodj-site.andrebassi.com.br.

Sem framework e sem build step para a página: HTML e CSS escritos à mão, Three.js por importmap. O único passo de build é o vídeo, que é uma composição React renderizada por Remotion.

Estrutura

public/          o site publicado (é esta pasta que vai para o Cloudflare Pages)
  index.html     página inteira
  css/style.css
  js/scene.js    cena Three.js do herói (bloom, partículas, câmera com deriva)
  llms.txt       mapa do projeto para agentes — cópia do que está no repo do AutoDJ
  media/         vídeo, poster e capturas do app
remotion/        composição do vídeo (React → MP4)

Comandos

pnpm install
pnpm dev        # serve public/ em http://localhost:8090
pnpm studio     # preview ao vivo da composição do vídeo (Remotion)
pnpm video      # renderiza public/media/hero.mp4

Depois de renderizar, vale recomprimir — o render sai em ~4 MB e a página não deve carregar isso:

ffmpeg -i public/media/hero.mp4 -vf scale=1440:-2 -c:v libx264 -crf 27 \
       -preset slow -movflags +faststart -an public/media/hero-opt.mp4
mv public/media/hero-opt.mp4 public/media/hero.mp4

Publicar

export CLOUDFLARE_API_TOKEN=…       # do gerenciador de senhas
npx wrangler pages deploy public --project-name=autodj-site --branch=main

O domínio autodj-site.andrebassi.com.br é um CNAME proxied para autodj-site.pages.dev na zona andrebassi.com.br.

Notas de implementação

• A cena 3D pausa quando sai da tela ou a aba perde foco, e respeita prefers-reduced-motion (desenha um quadro e para). Sem WebGL ela não monta e o gradiente do CSS assume — nunca tela preta.
• O véu atrás do texto do herói não é enfeite: com o anel aceso, o subtítulo sobre as barras brancas fica ilegível.
• Cuidado com <a> dentro de <a>: o card de projeto é um link inteiro; um link aninhado faz o parser fechar a âncora externa e partir o card em dois.

Licença MIT — veja LICENSE.