Eine 3D-animierte Website mit Google AI Studio erstellen

Eine 3D-animierte Website mit Google AI Studio erstellen

Es gab einen Moment am Mittwochabend, als ich meine Maus über eine Webseite bewegte und eine Figur sich in Echtzeit drehte, um meinem Cursor zu folgen — Kopf leicht geneigt, Schultern nachziehend, Haare in einer Art und Weise aufblähend, die kein CSS-Keyframe realistisch vortäuschen könnte —, und ich dachte: das sieht aus wie eine AAA-Spielfilm-Zwischensequenz, und ich habe sie in einem Nachmittag gebaut.

Kein Unity. Kein Blender. Kein Three.js. Kein WebGL-Shader, der über 500 Zeilen GLSL geschrieben wurde. Die gesamte „3D-Animationsschicht" ist ein morphendes Video, eingebettet in eine Webseite mit drei Zeilen JavaScript, die die Wiedergabeposition an die Mausbewegung binden. Das Ergebnis fühlt sich an wie eine vollständig interaktive 3D-Website. In Wirklichkeit ist es ein cleveres Zusammenspiel einer KI-generierten Morphing-Animation, einer Standardwebseite, die in Google AI Studio erstellt wurde, und einem kleinen Trick, der die Video-Scrubbing an horizontale Mausbewegung koppelt.

Ich werde Ihnen genau zeigen, wie ich es gebaut habe — jeden Schritt, jedes Tool, jede Stelle, an der die Demo fast gescheitert ist und was ich repariert habe. Keine Abstraktionen. Am Ende werden Sie alles haben, was Sie brauchen, um dasselbe heute Abend zu replizieren.

Ein Hinweis zu den Tools: Ich werde auf mehrere verweisen — Google AI Studio, den Google Flow Videogenerator (basierend auf Veo 3.1), einen KI-Bildeditor und ein paar kostenlose Deployment-Dienste. Ich habe alle unten verlinkt. Wenn Sie lieber ein Video-Walkthrough bevorzugen, habe ich ebenfalls eines erstellt — der Link befindet sich am Anfang des Beitrags.

Warum dieser „3D"-Trick funktioniert (und warum es nicht wirklich 3D ist)

Lassen Sie mich ehrlich zu der Mechanik sein, bevor ich Ihnen den Bau zeige.

Was hier passiert, ist keine echte 3D-Darstellung. Es gibt kein polygonales Mesh, keinen Tiefenpuffer, keine Kamera-Projektion. Es ist ein vorgerendetes Video einer morphenden Figur — gerendert von einem KI-Videomodell —, wobei JavaScript die Wiedergabeposition basierend auf der Cursorposition des Benutzers steuert. Maus nach links = Video spult zum Anfang; Maus nach rechts = Video spult zum Ende. Da das Video selbst eine glatte Rotation zeigt, entsteht die Illusion einer 3D-Drehsteuerung.

Der Grund, warum das funktioniert, ist psychologisch: Ihr Gehirn ordnet Cursor-Eingabe und visuelle Reaktion zu und schließt „Ich steuere die Rotation" daraus. Solange die Latenz niedrig ist und die Morphing-Animation flüssig genug ist, ist die Illusion überzeugend. Sie zerbricht, wenn das Video stottert, wenn es merkliche Frameraten-Sprünge gibt, oder wenn die Morphing-Animation offensichtlich unnatürliche Artefakte erzeugt.

Das ist wichtig, weil es Ihnen sagt, wo Sie Ihre Effort investieren sollten. Die meiste Qualität kommt aus dem Morph-Video selbst — nicht aus dem Web-Build. Eine bessere Morphing-Animation übertrumpft besseres JavaScript um eine Größenordnung. Ich habe das auf die harte Tour gelernt, als ich 45 Minuten damit verbrachte, die Easing-Funktion zu optimieren, und dann feststellte, dass der echte Unterschied darin lag, ein zweites, glatteres Morph-Video zu generieren.

Schritt 1: Stehlen Sie wie ein Künstler (die Ideenfindungsphase)

Jedes gute Build beginnt damit, sich inspirieren zu lassen, und ich empfehle nicht, von einer leeren Leinwand zu starten. Durchsuchen Sie Awwwards, Dribbble oder einfach die Websites von Marken, die Sie bewundern. Suchen Sie speziell nach: heldenhafte Animationen, die organisch wirken; Figurenanimationen (nicht UI-Übergänge); und Seiten, die Tiefe mit minimaler tatsächlicher 3D-Technologie suggerieren.

Was ich gefunden habe, war ein kreatives Portfolio mit einer Figur, die sich basierend auf der Scrollposition drehte. Das ist es, dachte ich. Drehung als Interaktionsmuster — das kann ein Morph-Video replizieren.

Mein Konzept: eine dunkle, kinematische Landingpage mit einer zentralen Figur, die dem Cursor des Benutzers zu folgen scheint, mit einer minimalistischen Navbar und einem Typewriter-Headline-Effekt. Die Seite würde auf Stimmung optimiert sein, nicht auf Inhaltsdichte — das ist kein Dashboard, es ist eine Erfahrung.

Wenn Sie Hilfe bei der Ideenfindung für kreative Builds wie diesen benötigen, ist das die Art von Erkundung, die ich mit Kunden durchführe. Schauen Sie sich meine Projektarten an auf fiverr.com/s/EgxYmWD.

Schritt 2: Erstellen Sie zwei Figurenposen mit einem KI-Bildeditor

Das Morph-Video benötigt Start- und Endframes. Ich brauchte dieselbe Figur in zwei verschiedenen Posen — sagen wir, leicht nach links gewandt und leicht nach rechts gewandt —, die eine subtile Rotation suggerieren.

Ich habe einen KI-Bildeditor verwendet (es gibt mehrere, die funktionieren — suchen Sie nach einem, das Posen-Bearbeitung oder Figurenneupositionierung unterstützt). Das Ziel: zwei Bilder derselben Figur, eines leicht nach links gewandt, eines leicht nach rechts, mit konsistentem Stil, Beleuchtung und Hintergrund.

Tipps, die tatsächlich wichtig sind: Halten Sie die Pose-Änderung subtil. Massive Rotationen erzeugen hässliche Morph-Artefakte. 15–30 Grad Rotationsdifferenz ist der Sweet Spot. Passen Sie den Hintergrund an — jede Inkonsistenz zwischen den zwei Frames wird in der Morphing-Animation zu einem sichtbaren Flimmern. Und stellen Sie sicher, dass beide Bilder dieselbe Auflösung und dasselbe Seitenverhältnis haben.

Ich generierte eine stilisierte Figur: dunkle Kleidung, dramatische Beleuchtung, neutraler Hintergrund. Pose A: Kopf leicht links. Pose B: Kopf leicht rechts. Ich exportierte beide als PNGs in 1920×1080.

Schritt 3: Generieren Sie das Morph-Video mit Google Flow (Veo 3.1)

Das ist der Schritt, bei dem die Magie passiert — und ich muss einen Namensfehler korrigieren, der in den Transkripten kursiert. Das Tool ist Google Flow, Googles Videogenerierungsplattform basierend auf dem Veo 3.1-Modell. Es ist nicht „Clai" oder „Clay" — das ist eine Transkriptionsverfälschung, die ich mehrfach gesehen habe.

Der Workflow:

1. Gehen Sie zu Google Flow (erreichbar über Google AI Studio oder direkt).
2. Laden Sie Ihr Start- und Endbild als Keyframes hoch.
3. Setzen Sie den Prompt auf etwas wie: „Smooth cinematic rotation of the character from left to right, maintaining consistent lighting and style."
4. Generieren Sie das Video. Google Flow produziert einen kurzen Clip (normalerweise 3-5 Sekunden), der zwischen Ihren zwei Frames morpht.

Kritisches Detail: Generieren Sie mehrere Varianten. Mein erster Morph hatte ein seltsames Artefakt, bei dem das Kinn der Figur für zwei Frames flackerte. Der dritte Versuch war sauber. KI-Videogenerierung hat noch keine perfekte Konsistenz — behandeln Sie es wie Fotografieren, nicht wie Rendern. Machen Sie mehrere Aufnahmen und wählen Sie die beste.

Ich habe das endgültige Morph-Video als MP4 in der höchsten verfügbaren Qualität heruntergeladen — das wird der Held-Hintergrund Ihrer Website.

Schritt 4: Erstellen Sie Hero und Navbar in Google AI Studio

Jetzt zum Webbau. Google AI Studio kann HTML/CSS/JS-Webseiten über Prompts generieren. Ich gab ihm einen detaillierten Prompt, der in etwa so lautete:

„Erstelle eine dunkle, kinematische Landingpage. Vollbild-Video-Hintergrund (ich werde die Quelle manuell einsetzen). Transparente Navbar mit Logo links, Navigationslinks in der Mitte, CTA-Button rechts. Zentrierte Headline über dem Video mit großer, fetter Typografie. Verwende ein dunkles Farbschema mit weißem Text. Mache es responsive."

Google AI Studio generierte eine saubere, einzelne HTML-Datei. Perfekt? Nein. Es gab Spacing-Probleme und die Navbar-Links waren Platzhalter. Aber die Struktur war solide — gültiges HTML, richtige CSS-Grid-Nutzung, ein Video-Element mit den richtigen Attributen.

Ich iterierte zweimal: einmal, um die Navbar-Abstände zu korrigieren, und einmal, um die Headline-Typografie zu verfeinern. Jede Iteration war ein Follow-up-Prompt im selben Chat.

Schritt 5: Betten Sie das Morph-Video als Hero-Hintergrund ein

Hier habe ich das von Google AI Studio generierte Video-Element genommen und es auf meine Morph-MP4 gerichtet. Die wichtigsten Attribute:

<video id="hero-video" src="morph.mp4" muted playsinline preload="auto"
       style="width:100%; height:100vh; object-fit:cover;"></video>

Kritisch: muted und playsinline sind beide erforderlich, damit die automatische Wiedergabe auf mobilen Browsern funktioniert. preload="auto" stellt sicher, dass das Video geladen wird, bevor der Benutzer zu interagieren beginnt — ohne dies gibt es eine merkbare Verzögerung bei der ersten Mausbewegung.

Ich habe auch autoplay und loop aus dem ursprünglichen generierten Code entfernt, weil wir nicht wollen, dass das Video automatisch abspielt — wir werden die Wiedergabe manuell mit JavaScript steuern.

Schritt 6: Verbinden Sie horizontale Mausbewegung mit Video-Scrubbing

Das ist das Herzstück des gesamten Tricks. Drei Zeilen JavaScript, die die horizontale Mausposition auf die Videozeitleiste abbilden:

const video = document.getElementById('hero-video');
document.addEventListener('mousemove', (e) => {
    const progress = e.clientX / window.innerWidth;
    video.currentTime = progress * video.duration;
});

Das war's. Maus ganz links = Frame 0. Maus ganz rechts = letzter Frame. Alles dazwischen interpoliert linear.

Warum das glatter funktioniert als erwartet: Browser sind sehr gut darin, Videos zu suchen — currentTime aktualisiert das angezeigte Frame ohne Decodierungsverzögerung, solange das Video bereits im Speicher geladen ist. Deshalb preload="auto" wichtig ist. Ohne es stottert das Video schrecklich beim ersten Durchlauf.

Was die Demo bricht: Wenn Ihr Video zu lang ist (über 10 Sekunden), kann die Suche laggen, weil mehr Frames zu decodieren sind. Halten Sie das Morph-Video kurz — 3–5 Sekunden ist ideal. Jede Millisekunde Morph-Dauer wird über die Breite Ihres Viewports gestreckt, also muss ein kurzes Video nicht langweilig bedeuten — es bedeutet höhere effektive Auflösung pro Pixel Mausbewegung.

Schritt 7: Reparieren Sie die mobile Erfahrung (weil es keinen Cursor gibt)

Hier scheitern die meisten Tutorialversionen dieses Tricks. Es gibt keine Maus auf dem Handy. Kein mousemove-Event. Ihre 3D-Illusion wird einfach zum statischen Bild.

Mein Fix: Touch-Events verwenden, um die horizontale Touch-Position auf dasselbe Video-Scrubbing abzubilden.

document.addEventListener('touchmove', (e) => {
    const touch = e.touches[0];
    const progress = touch.clientX / window.innerWidth;
    video.currentTime = progress * video.duration;
});

Und als Fallback, wenn der Benutzer überhaupt nicht interagiert, lasse ich das Video langsam automatisch in einer Schleife abspielen, damit die Seite nicht statisch aussieht:

// Fallback: langsame automatische Wiedergabe, wenn kein Touch oder Maus
let interacted = false;
['mousemove', 'touchmove'].forEach(evt =>
    document.addEventListener(evt, () => interacted = true, {once: true}));
setTimeout(() => {
    if (!interacted) { video.play(); video.playbackRate = 0.3; }
}, 2000);

Dieser Fallback gibt mobilen Nutzern etwas zu sehen, auch wenn sie nicht wischen.

Schritt 8: Fügen Sie einen Typewriter-Effekt zur Headline hinzu

Kosmetisch, aber wirkungsvoll. Google AI Studio generierte die Headline als statischen Text. Ich bat es, einen Typewriter-Animationseffekt hinzuzufügen — Zeichen für Zeichen, mit blinkender Cursor-Animation.

Der KI-generierte Code war funktional, aber hatte ein Timing-Problem: Die Animation startete sofort beim Seitenladen, bevor das Video geladen hatte, sodass der Benutzer eine halb getippte Headline über einem schwarzen Hintergrund sah. Ich habe eine Verzögerung hinzugefügt, die an das loadeddata-Event des Videos gebunden ist:

video.addEventListener('loadeddata', () => {
    startTypewriter();
});

Kleines Detail, großer Unterschied bei der wahrgenommenen Qualität. Der beste Code ist oft der Code, der wann-Dinge-passieren steuert, nicht was-passiert.

Schritt 9: Kostenlos deployen mit GitHub und Vercel

Deployment war der einfachste Teil:

1. Repository auf GitHub erstellen, Ihre HTML-Datei und die Morph-MP4 pushen.
2. Repository mit Vercel verbinden (kostenloser Tier funktioniert).
3. Vercel erkennt automatisch das statische Asset, baut und deployed es.

Ihre 3D-animierte Website ist live, kostenlos gehostet, mit automatischem SSL und CDN.

Die eine Sache, die schiefging: Meine MP4-Datei war 28 MB, und das kostenlose Vercel-Tier hat ein 25-MB-Limit pro Datei. Ich habe HandBrake verwendet, um das Video auf 18 MB zu komprimieren, ohne sichtbaren Qualitätsverlust. Wenn Sie auf dieses Problem stoßen, komprimieren Sie das Video bevor Sie sich die Haare raufen über Vercel-Konfigurationen — das ist fast immer das Problem.

Das ehrliche Urteil: wo es glänzt und wo es bricht

Wo es glänzt:

• Erster Eindruck ist spektakulär. Leute, die die Seite zum ersten Mal sehen, halten sie für echtes 3D. Die Illusion ist bemerkenswert überzeugend für den Aufwand.
• Bauzeit ist minimal. Ich hatte eine funktionierende Version in etwa drei Stunden, einschließlich Iteration. Vergleichen Sie das mit einer echten Three.js-3D-Website, die Tage bis Wochen dauern kann.
• Null Laufzeit-Komplexität. Es gibt keine 3D-Engine. Es ist ein Video und drei Zeilen JS. Es gibt nichts zu debuggen, keine Shader zu optimieren, keine Mesh-Lade-Ausfälle.

Wo es bricht:

• Die Rotation ist festgelegt. Sie können nur die vom Morph-Video definierte Rotation zeigen. Echtes 3D lässt den Benutzer überall hinschauen. Dieses gefälschte 3D ist ein einzelner Freiheitsgrad.
• Videoqualität deckt alles ab. Wenn das Morph schlecht ist — flackernde Artefakte, inkonsistente Beleuchtung, verzerrte Gesichtszüge —, gibt es keinen Code-Fix. Die Qualität des KI-generierten Videos ist die Obergrenze der Erfahrung.
• Mobile ist ein Bürger zweiter Klasse. Das Touch-Scrubbing funktioniert, aber es fühlt sich nie so natürlich an wie das Maus-Tracking. Das Fehlen von Hover-Feedback auf Mobilgeräten lässt die Interaktion weniger ansprechend erscheinen.

Was Sie realistisch erwarten können

Wenn Sie das nachbauen, hier sind ehrliche Erwartungen:

• Planen Sie 2-4 Stunden für das gesamte Build ein, einschließlich der Morph-Video-Generierung und -Iteration.
• Erwarten Sie, 3-5 Morph-Varianten zu generieren, bevor Sie einen ohne störende Artefakte erhalten.
• Das Ergebnis wird bei Desktop-Zuschauern umwerfend aussehen und auf Mobilgeräten akzeptabel — nicht umwerfend — sein.
• Wenn Sie eine Version mit höherer Qualität wollen, investieren Sie in die Morph-Video-Qualität, nicht in ausgefallenes JavaScript.

Für Kunden-gerichtete Landingpages, Portfolio-Seiten und kreative Showcases ist dieser Ansatz ein legitimer Wow-Faktor-Multiplikator mit minimalem Aufwand. Für Anwendungen, die echte 3D-Interaktion benötigen — Produktkonfiguratoren, architektonische Rundgänge, Spiele —, ist es offensichtlich kein Ersatz.

Häufig gestellte Fragen

Ist Google AI Studio kostenlos zum Erstellen von Websites?

Google AI Studio hat ein kostenloses Tier, das HTML/CSS/JS-Generierung umfasst. Sie können vollständige Webseiten über Prompts generieren, ohne etwas zu bezahlen. Die Haupteinschränkung ist die Qualität — erwarten Sie mehrmalige Iteration, um produktionsreifen Output zu erhalten.

Welches Tool macht die Figuren-Morph-Animation? Es ist nicht „Clai."

Die Morph-Animation stammt von Google Flow, basierend auf dem Veo 3.1-Modell. „Clai", „Clay" und ähnliche Varianten sind Transkriptionsfehler. Google Flow nimmt Start- und End-Keyframe-Bilder und generiert ein flüssiges Übergangsvideo.

Warum laggt mein Scroll- oder Maus-Video-Scrubbing?

Drei häufige Ursachen: Das Video ist zu lang (halten Sie es unter 5 Sekunden), das Video ist nicht vorgeladen (preload="auto" hinzufügen), oder das Video hat eine zu hohe Bitrate für flüssiges In-Memory-Seeking (mit HandBrake komprimieren). Kurz, vorgeladen und komprimiert löst fast jeden Lag-Fall.

Wie mache ich die animierte Seite auf Mobilgeräten funktionsfähig?

Fügen Sie touchmove-Event-Listener hinzu, die die horizontale Touch-Position auf Video-currentTime abbilden, genau wie das Maus-Scrubbing. Fügen Sie einen Fallback für langsame automatische Wiedergabe hinzu für Benutzer, die nicht interagieren.

Sollte ich Figma für diesen Build verwenden?

Für ein Build dieser Größe ist Figma überdimensioniert. Sie bauen eine einzelne Seite mit einer Headline, einer Navbar und einem Video-Hintergrund — Google AI Studio kann die HTML-Struktur direkt generieren. Verwenden Sie Figma, wenn Sie detailliertes Layout-Mockup und Design-Systemarbeit über mehrere Seiten benötigen.

Sie brauchen keine Game-Engine — Sie brauchen einen Nachmittag

Gehen Sie zurück zu dem Moment, der diesen Build ausgelöst hat: eine Figur, die sich dreht, um Ihrem Cursor zu folgen. Es sieht aus wie etwas, das einen 3D-Künstler, eine Rendering-Pipeline und Tausende von Dollar erfordern würde. In Wirklichkeit sind es zwei KI-generierte Bilder, ein Morph-Video und drei Zeilen JavaScript.

Die Werkzeuge haben sich verändert. Was früher eine Woche Studio-Arbeit war, ist jetzt ein Nachmittagsexperiment. Und der Teil, der das möglich macht, ist nicht ein einzelnes Tool — es ist die Kombination: KI-Bildgenerierung für die Posen, KI-Videogenerierung für den Morph, und KI-Code-Generierung für die Webseite. Alle drei zusammen verschmelzen die gesamte Pipeline von Konzept bis Deployment in einer einzigen Sitzung.

Wenn Sie kreative Builds wie diesen für Ihre Marke oder Ihre Kunden erkunden möchten, ist das genau die Art von Projekt, das ich liebe. Finden Sie mich auf fiverr.com/s/EgxYmWD.

Lassen Sie uns zusammenarbeiten

Sie möchten KI-Systeme bauen, Workflows automatisieren oder Ihre Tech-Infrastruktur skalieren? Ich helfe gerne.

• Fiverr (maßgeschneiderte Builds & Integrationen): fiverr.com/s/EgxYmWD
• Portfolio: mejba.me
• Ramlit Limited (Unternehmenslösungen): ramlit.com
• ColorPark (Design & Branding): colorpark.io
• xCyberSecurity (Sicherheitsdienstleistungen): xcybersecurity.io