Bouw een 3D-geanimeerde website met Google AI Studio
Er was een moment op woensdagavond waarop ik mijn muis over een webpagina bewoog en een personage in realtime draaide om mijn cursor te volgen — hoofd licht gekanteld, schouders volgend, haar wapperend op een manier die geen CSS-keyframe realistisch zou kunnen nabootsen — en ik dacht: dit ziet eruit als een AAA-game-tussenfilmpje, en ik heb het in een middag gebouwd.
Geen Unity. Geen Blender. Geen Three.js. Geen WebGL-shader van 500 regels GLSL. De hele "3D-animatielaag" is een morphvideo ingebed in een webpagina met drie regels JavaScript die de afspeelpositie aan de muisbeweging koppelen. Het resultaat voelt als een volledig interactieve 3D-website. In werkelijkheid is het een slimme combinatie van een door AI gegenereerde morphing-animatie, een standaard webpagina gebouwd in Google AI Studio, en een klein trucje dat video-scrubbing koppelt aan horizontale muisbeweging.
Ik ga je precies laten zien hoe ik het heb gebouwd — elke stap, elk gereedschap, elk punt waar de demo bijna faalde en wat ik heb gerepareerd. Geen abstracties. Aan het eind heb je alles wat je nodig hebt om vanavond hetzelfde te repliceren.
Waarom deze "3D"-truc werkt (en waarom het niet echt 3D is)
Wat hier gebeurt is geen echte 3D-rendering. Er is geen polygonale mesh, geen dieptebuffer, geen cameraprojectie. Het is een voorgerenderde video van een morphend personage — gerenderd door een AI-videomodel — waarbij JavaScript de afspeelpositie bestuurt op basis van de cursorpositie. Muis naar links = video spoelt naar het begin; muis naar rechts = video spoelt naar het einde. Omdat de video een vloeiende rotatie toont, ontstaat de illusie van 3D-rotatiebesturing.
Dit is belangrijk omdat het je vertelt waar je je inspanning moet investeren. Het merendeel van de kwaliteit komt van de morphvideo zelf — niet van de webbouw. Een betere morphing-animatie overtreft beter JavaScript met een orde van grootte.
Stap 1: Steel als een kunstenaar (de ideefase)
Elk goed project begint met inspiratie opdoen. Blader door Awwwards, Dribbble of gewoon de websites van merken die je bewondert. Zoek specifiek naar: hero-animaties die organisch aanvoelen; personageanimaties; en pagina's die diepte suggereren met minimale echte 3D-technologie.
Mijn concept: een donkere, cinematische landingspagina met een centraal personage dat de cursor van de gebruiker lijkt te volgen, met een minimalistische navbar en een typewriter-effect op de kop.
Stap 2: Maak twee personageposes met een AI-beeldeditor
De morphvideo heeft begin- en eindframes nodig. Houd de poseverandering subtiel — 15-30 graden rotatieverschil is het ideale punt. Match de achtergrond — elke inconsistentie tussen de twee frames wordt een zichtbare flikkering in de morphing-animatie.
Stap 3: Genereer de morphvideo met Google Flow (Veo 3.1)
De tool is Google Flow, Googles videogeneratieplatform gebaseerd op het Veo 3.1-model. Het is niet "Clai" of "Clay" — dat is een transcriptiefout.
De workflow: ga naar Google Flow, upload je begin- en eindbeeld als keyframes, stel de prompt in als: "Smooth cinematic rotation of the character from left to right, maintaining consistent lighting and style." Genereer de video.
Kritiek detail: Genereer meerdere varianten. Behandel AI-videogeneratie als fotografie — maak meerdere opnames en kies de beste.
Stap 4: Bouw de hero en navbar in Google AI Studio
Google AI Studio kan HTML/CSS/JS-webpagina's genereren via prompts. Ik gaf het een gedetailleerde prompt voor een donkere, cinematische landingspagina met volledig schermvideo-achtergrond, transparante navbar en groot, vet gecentreerde typografie.
Stap 5: Embed de morphvideo als hero-achtergrond
<video id="hero-video" src="morph.mp4" muted playsinline preload="auto"
style="width:100%; height:100vh; object-fit:cover;"></video>
muted en playsinline zijn beide vereist voor autoplay op mobiele browsers. preload="auto" zorgt ervoor dat de video laadt voordat de gebruiker begint te interacteren.
Stap 6: Koppel horizontale muisbeweging aan video-scrubbing
const video = document.getElementById('hero-video');
document.addEventListener('mousemove', (e) => {
const progress = e.clientX / window.innerWidth;
video.currentTime = progress * video.duration;
});
Dat is het. Muis helemaal links = frame 0. Muis helemaal rechts = laatste frame.
Stap 7: Repareer de mobiele ervaring (want er is geen cursor)
Voeg touch-events toe om de horizontale touchpositie te mappen naar dezelfde video-scrubbing:
document.addEventListener('touchmove', (e) => {
const touch = e.touches[0];
const progress = touch.clientX / window.innerWidth;
video.currentTime = progress * video.duration;
});
Als fallback laat ik de video langzaam automatisch in een lus afspelen.
Stap 8: Voeg een typewriter-effect toe aan de kop
Ik vroeg Google AI Studio om een typewriter-animatie-effect toe te voegen. Ik voegde een vertraging toe gekoppeld aan het loadeddata-event van de video zodat de animatie niet start voordat de video is geladen.
Stap 9: Deploy gratis met GitHub en Vercel
Maak een repository op GitHub, push je HTML-bestand en de morph-MP4, verbind de repository met Vercel (gratis tier werkt). Je 3D-geanimeerde website is live, gratis gehost, met automatisch SSL en CDN.
Het eerlijke oordeel: waar het schittert en waar het breekt
Waar het schittert: De eerste indruk is spectaculair. Bouwtijd is minimaal — ongeveer drie uur. Nul runtime-complexiteit.
Waar het breekt: De rotatie ligt vast. Videokwaliteit dekt alles. Mobiel is tweederangsburger.
Wat je realistisch kunt verwachten
Plan 2-4 uur voor de hele bouw. Verwacht 3-5 morphvarianten te genereren. Het resultaat zal indrukwekkend zijn op desktop en acceptabel op mobiel. Voor klantgerichte landingspagina's, portfolio's en creatieve showcases is deze aanpak een legitieme wow-factor-vermenigvuldiger.
Veelgestelde vragen
Is Google AI Studio gratis om websites mee te bouwen?
Google AI Studio heeft een gratis tier met HTML/CSS/JS-generatie.
Welke tool maakt de personage-morph-animatie?
Google Flow, gebaseerd op het Veo 3.1-model. "Clai" en "Clay" zijn transcriptiefouten.
Waarom heeft mijn video-scrubbing vertraging?
Video te lang, niet voorgeladen of te hoge bitrate. Houd onder 5 seconden, gebruik preload="auto" en comprimeer met HandBrake.
Hoe laat ik de geanimeerde site werken op mobiel?
Voeg touchmove-eventlisteners toe die de horizontale touchpositie mappen naar video-currentTime. Voeg een fallback toe voor langzame automatische afspeling.
Moet ik Figma gebruiken voor deze bouw?
Voor een bouw van deze omvang is Figma overdreven. Google AI Studio genereert de HTML-structuur direct.
Je hebt geen game-engine nodig — je hebt een middag nodig
De tools zijn veranderd. Wat vroeger een week studiowerk was, is nu een middagexperiment. De combinatie van AI-beeldgeneratie voor de poses, AI-videogeneratie voor de morph en AI-codegeneratie voor de webpagina smelt de hele pipeline van concept tot deployment samen in één sessie.
Als je creatieve builds zoals deze wilt verkennen voor je merk of je klanten, is dat precies het type project dat ik graag doe. Vind me op fiverr.com/s/EgxYmWD.
Laten we samenwerken
- Fiverr (maatwerkprojecten & integraties): fiverr.com/s/EgxYmWD
- Portfolio: mejba.me
- Ramlit Limited (bedrijfsoplossingen): ramlit.com
- ColorPark (design & branding): colorpark.io
- xCyberSecurity (beveiligingsdiensten): xcybersecurity.io
