Página Inicial do OpenDesign

Um template de vitrine de primeira parte que espelha a página inicial do open-design.ai ao vivo, capturado como um pacote totalmente autônomo que renderiza na pré-visualização isolada.

Ele está aqui para demonstrar o teto visual que o OpenDesign almeja para superfícies de marketing interativas, de nível WebGL, na web — não é um gerador "preencha as lacunas". Trate-o como uma construção de referência para estudar e adaptar.

O que é

• Herói 3D interativo — uma palavra-marca OpenDesign em script renderizada em tempo real com React Three Fiber / Three.js, mais uma camada de paralaxe reativa ao cursor e uma colagem de adesivos flutuantes.
• Narrativa impulsionada pelo scroll — a grade de trabalhos, o texto das capacidades e os adesivos decorativos animam conforme a página rola.
• Detalhes de acabamento — fontes variáveis personalizadas (TikTok Sans, Geist Mono, Departure Mono), um alternador de tema claro/escuro, uma trilha sonora ambiente opcional e um HUD de relógio/coordenadas do cursor ao vivo.

Como é construído (para referência)

• Stack: Next.js (App Router, build Turbopack) + React Three Fiber + Three.js, exportado como um pacote estático e autônomo.
• Geometria 3D é Draco-comprimida (KHR_draco_mesh_compression) — a palavra-marca do herói cai de ~4,4 MB para ~300 KB sem alteração visível, decodificada em tempo de execução pelo DRACOLoader empacotado.
• Imagens (miniaturas de trabalhos, adesivos) são fornecidas como WebP sem perdas — pixel a pixel idênticas aos PNGs de origem com uma fração do tamanho, para que cada arquivo permaneça abaixo do limite de blob do repositório de 1 MB e o template não precise de um host de ativos externo.
• Autônomo e portátil por caminho: todos os ativos carregam em relação ao arquivo de entrada, para que o pacote renderize corretamente, seja servido da raiz do site ou de um subcaminho de pré-visualização aninhado.

Usando

Abra example.html na pré-visualização para explorar o resultado interativo ao vivo. Todo o conteúdo é empacotado localmente — fontes, imagens e geometria 3D são enviados em assets/, portanto, não há scripts de CDN ou fontes externas. A única solicitação de rede em tempo de execução é o decodificador Draco, buscado do CDN gstatic do Google sob demanda (o mesmo padrão que os outros exemplos WebGL usam para suas bibliotecas). Para adaptar a estética (tipografia, tratamento 3D, colagem de adesivos, movimento de scroll) para sua própria construção, estude a estrutura aqui e recrie-a com sua configuração preferida de React Three Fiber / Next.js.