Neta
ExploreWorksWorldsToolsGuides
ExploreToolsGuides
Criar meu site 3D
Criador de site 3D com scroll

Criador de site 3D com scroll — sem Three.js

Descreva um lugar em uma frase e o scroll move uma câmera real por dentro: cenas geradas, um mergulho em cada uma, saídas que ninguém vê. Sem Three.js, sem GSAP.

Liyue, a viela das lanternas — Genshin Impact. No meio do mergulho: lanternas passam rente à lente e o mercado mantém a profundidade.Fontaine, a escadaria — O voo começa fora da galeria e entra nela — um plano só, sem corte.Katagiri High, a escada — Horimiya. Hori sai; o corredor mantém a profundidade atrás dela.Shibuya, o cruzamento — Feito para esta página: uma frase, três cenas, um voo contínuo.

Feito com a skill Scroll World Video.

✦Site 3D com scroll
Crie um site 3D com scroll sobre uma feira noturna sob um único lampião comprido
O terminal do aquabus — Primeira parada: título, texto e tags sobre a água. Só o scroll move a câmera.
O terminal do aquabus — Primeira parada: título, texto e tags sobre a água. Só o scroll move a câmera.
O telhado da ópera — Terceira parada. As portas, a luz, o mesmo voo, ainda sem corte.
O telhado da ópera — Terceira parada. As portas, a luz, o mesmo voo, ainda sem corte.
As bancas na maré baixa — Xiangling no balcão; maré e pesca são dados, não enfeite.
As bancas na maré baixa — Xiangling no balcão; maré e pesca são dados, não enfeite.
O campo de treino — The Hollow Star. Um trilho de doze capítulos e uma descida aérea até a arena.
O campo de treino — The Hollow Star. Um trilho de doze capítulos e uma descida aérea até a arena.
O último sinal — Hori e Miyamura nos armários, o título segura à esquerda.
O último sinal — Hori e Miyamura nos armários, o título segura à esquerda.
Acima das salas — Última parada: dois personagens na grade, a cidade virando ouro.
Acima das salas — Última parada: dois personagens na grade, a cidade virando ouro.
O cruzamento — Feito para esta página. No nível da rua, a câmera desce sobre a multidão.
O cruzamento — Feito para esta página. No nível da rua, a câmera desce sobre a multidão.
A descida — Segunda cena: a boca do metrô, corrimãos passando, as catracas no fundo.
A descida — Segunda cena: a boca do metrô, corrimãos passando, as catracas no fundo.
Acima da cortina — Última cena: a laje, a figura, o cruzamento inteiro embaixo.
Acima da cortina — Última cena: a laje, a figura, o cruzamento inteiro embaixo.
01 / 03

Fontaine, à noite

Três paradas num plano só: o terminal, a galeria, o telhado da ópera.

Fontaine, à noiteOpen in new tab
Want your own?

Uma frase, e a página rola como uma câmera.

O Neta Studio gera cada cena, mantém uma graduação só em todas e voa a câmera entre elas. A página publicada apenas faz scrub desse material, então a posição do scroll é o relógio da câmera — e os textos continuam editáveis onde a página vive.

  • Profundidade, não parallax falso — a cena é gerada como imagem fixa e um modelo voa a câmera para dentro. Nada é simulado com PNGs empilhados ou transformação CSS.
  • Emendas que não se acham — cada junção é alinhada ao último quadro do clipe anterior, então o voo se lê como uma tomada só.
  • Editável depois de publicar — título, texto, tags e ordem das cenas são campos comuns. Mude, republique, o trabalho de câmera fica.

Perguntas frequentes

Isso é 3D de verdade ou um vídeo na página?

É pré-renderizado. Cada cena é uma imagem gerada, o movimento é um clipe gerado e a posição do scroll faz scrub desse clipe. Há profundidade e movimento reais por poucos megas por cena — mas você não orbita o modelo nem sai do trajeto.

Preciso de Three.js, GSAP ou designer?

Não. Você escreve uma frase. Sem biblioteca, sem timeline, sem grafo de cena e sem orçamento de filmagem.

Quanto pesa o primeiro carregamento?

Três cenas, cerca de 23–25 MB, atrás de uma barra de progresso antes de abrir. Cada cena extra soma uns 9 MB a essa espera.

Posso usar minhas fotos ou minha marca?

Sim. Envie como referências e cada cena deriva delas, então um lugar real mantém aparência e luz. Para um mundo que ainda não existe, uma frase basta.

O que dá para mudar depois?

O título, uma linha de texto e até três tags por cena, mais a ordem. O trabalho de câmera fica como foi renderizado.

Funciona no celular?

A página abre e rola, com codificações mais leves e corte central. O scrub é um gesto de desktop; em rede lenta, o que se sente é o primeiro carregamento.

Qual a diferença para um template com animações de scroll?

Um template anima elementos que você já tem. Aqui a cena, a profundidade e o trajeto da câmera são gerados, então a página pode voar por um lugar que nunca existiu.

Onde fica o site pronto?

É publicado como obra com link público próprio. Envie, incorpore ou duplique e troque as cenas.

Uma frase, um voo.

Três cenas, uma câmera que as atravessa e um link para enviar.

Criar meu site 3D
×