3D-Scroll-Website-Builder

3D-Scroll-Website-Builder — ohne Three.js

Ein Ort in einem Satz, und der Scroll schiebt eine echte Kamera hindurch: generierte Szenen, ein Flug in jede hinein, Übergänge, die niemand sieht. Ohne Three.js, ohne GSAP.

Liyue, die Laternengasse — Genshin Impact. Mitten im Flug: Laternen ziehen am Objektiv vorbei, der Markt behält seine Tiefe.Fontaine, die große Treppe — Der Flug beginnt draußen und fährt in die Arkade hinein — eine Einstellung, kein Schnitt.Katagiri High, das Treppenhaus — Horimiya. Hori geht hinaus, der Flur behält seine Tiefe hinter ihr.Shibuya, die Kreuzung — Für diese Seite gebaut: ein Satz, drei Bilder, ein durchgehender Flug.

Angetrieben vom Scroll World Video-Skill.

✦3D-Scroll-Website
Baue eine 3D-Scroll-Website über einen Nachtmarkt unter einer einzigen langen Laterne
Der Aquabus-Terminal — Erster Halt: Überschrift, Text und Tags über dem Wasser. Nur der Scroll bewegt die Kamera.
Der Aquabus-Terminal — Erster Halt: Überschrift, Text und Tags über dem Wasser. Nur der Scroll bewegt die Kamera.
Das Operndach — Dritter Halt. Die Türen, das Licht, derselbe Flug, weiterhin ohne Schnitt.
Das Operndach — Dritter Halt. Die Türen, das Licht, derselbe Flug, weiterhin ohne Schnitt.
Die Fischstände bei Ebbe — Xiangling am Tresen; Tide und Fang stehen als Daten, nicht als Dekoration.
Die Fischstände bei Ebbe — Xiangling am Tresen; Tide und Fang stehen als Daten, nicht als Dekoration.
Der Übungsplatz — The Hollow Star. Eine Schiene mit zwölf Kapiteln und ein Flug hinab in die Arena.
Der Übungsplatz — The Hollow Star. Eine Schiene mit zwölf Kapiteln und ein Flug hinab in die Arena.
Die letzte Stunde — Hori und Miyamura bei den Schuhfächern, die Überschrift bleibt links.
Die letzte Stunde — Hori und Miyamura bei den Schuhfächern, die Überschrift bleibt links.
Über den Klassenzimmern — Letzter Halt: zwei Figuren am Geländer, die Stadt wird golden.
Über den Klassenzimmern — Letzter Halt: zwei Figuren am Geländer, die Stadt wird golden.
Die Kreuzung — Für diese Seite gebaut. Auf Straßenhöhe senkt sich die Kamera über die Menge.
Die Kreuzung — Für diese Seite gebaut. Auf Straßenhöhe senkt sich die Kamera über die Menge.
Die Treppe hinab — Zweites Bild: der Metro-Eingang, Handläufe ziehen vorbei, unten die Sperren.
Die Treppe hinab — Zweites Bild: der Metro-Eingang, Handläufe ziehen vorbei, unten die Sperren.
Über dem Vorhang — Letztes Bild: das Dach, die Figur, die ganze Kreuzung darunter.
Über dem Vorhang — Letztes Bild: das Dach, die Figur, die ganze Kreuzung darunter.
01 / 03

Fontaine, bei Nacht

Drei Halte in einer Einstellung: der Terminal, die Arkade, das Operndach.

Fontaine, bei NachtOpen in new tab
Want your own?

Ein Satz, dann scrollt die Seite wie eine Kamera.

Neta Studio generiert jede Szene, hält eine Farbstimmung über allen und fliegt die Kamera dazwischen hinein und hinaus. Die veröffentlichte Seite scrubbt nur dieses Material — die Scrollposition ist die Uhr der Kamera, und die Texte bleiben dort editierbar, wo die Seite lebt.

  • Tiefe, keine falsche Parallaxe — eine Szene wird als Still generiert, dann fliegt ein Modell die Kamera hinein. Nichts wird mit gestapelten PNGs oder CSS-Transforms vorgetäuscht.
  • Nähte, die man nicht findet — jeder Übergang ist auf das letzte Bild des vorigen Clips gesetzt, deshalb liest sich der Flug als eine Einstellung.
  • Nach dem Veröffentlichen editierbar — Überschrift, Text, Tags und Szenenreihenfolge sind einfache Felder. Ändern, neu veröffentlichen, die Kamera bleibt.

Häufige Fragen

Ist das echtes 3D oder ein Video auf einer Seite?

Es ist vorgerendert. Jede Szene ist ein generiertes Still, die Kamerafahrt ein generierter Clip, und die Scrollposition scrubbt diesen Clip. Tiefe und Bewegung sind echt, für wenige Megabyte pro Szene — aber man kann das Modell nicht umkreisen oder den Weg verlassen.

Brauche ich Three.js, GSAP oder einen Designer?

Nein. Du schreibst einen Satz. Keine Bibliothek, keine Timeline, kein Scene Graph — und kein Drehbudget.

Wie schwer ist der erste Ladevorgang?

Drei Szenen, etwa 23–25 MB, hinter einem Fortschrittsbalken, bevor die Seite aufgeht. Jede weitere Szene kostet rund 9 MB mehr Wartezeit.

Kann ich eigene Fotos oder meine Marke nutzen?

Ja. Als Referenz übergeben, und jede Szene leitet sich davon ab, sodass ein echter Ort Aussehen und Licht behält. Für eine Welt, die es noch nicht gibt, reicht ein Satz.

Was lässt sich danach ändern?

Überschrift, eine Zeile Text und bis zu drei Tags pro Szene, dazu die Reihenfolge. Die Kamerafahrt bleibt wie gerendert.

Läuft es auf dem Handy?

Die Seite öffnet und scrollt, mit leichteren Encodes und mittigem Zuschnitt. Scrubben ist eine Desktop-Geste; bei langsamem Netz spürt man vor allem den ersten Ladevorgang.

Was ist anders als bei einem Template mit Scroll-Animationen?

Ein Template animiert Elemente, die du schon hast. Hier werden Szene, Tiefe und Kamerapfad generiert — die Seite kann durch einen Ort fliegen, den es nie gab.

Wo liegt die fertige Seite?

Sie wird als Werk mit eigenem öffentlichen Link veröffentlicht. Verschicken, einbetten oder forken und die Szenen tauschen.

Ein Satz, ein Flug.

Drei Szenen, eine Kamera, die sie durchquert, ein Link zum Verschicken.

×