Créer un site web 3D animé avec Google AI Studio
Il y a eu un moment mercredi soir où j'ai déplacé ma souris sur une page web et un personnage a pivoté en temps réel pour suivre mon curseur — tête légèrement inclinée, épaules suivant, cheveux flottant d'une manière qu'aucun keyframe CSS ne pourrait simuler de façon réaliste — et j'ai pensé : ça ressemble à une cinématique de jeu AAA, et je l'ai construit en un après-midi.
Pas d'Unity. Pas de Blender. Pas de Three.js. Pas de shader WebGL de 500 lignes de GLSL. Toute la « couche d'animation 3D » est une vidéo morph intégrée dans une page web avec trois lignes de JavaScript qui lient la position de lecture au mouvement de la souris. Le résultat donne l'impression d'un site web 3D entièrement interactif. En réalité, c'est une combinaison astucieuse d'une animation morphing générée par IA, d'une page web standard créée dans Google AI Studio et d'une petite astuce qui couple le scrubbing vidéo au mouvement horizontal de la souris.
Je vais vous montrer exactement comment je l'ai construit — chaque étape, chaque outil, chaque point où la démo a failli échouer et ce que j'ai corrigé. Pas d'abstractions. À la fin, vous aurez tout ce qu'il faut pour reproduire la même chose ce soir.
Pourquoi cette astuce « 3D » fonctionne (et pourquoi ce n'est pas vraiment du 3D)
Ce qui se passe ici n'est pas du vrai rendu 3D. Il n'y a pas de maillage polygonal, pas de tampon de profondeur, pas de projection caméra. C'est une vidéo pré-rendue d'un personnage qui se transforme — rendue par un modèle vidéo IA — où JavaScript contrôle la position de lecture en fonction de la position du curseur. Souris à gauche = la vidéo avance au début ; souris à droite = la vidéo avance à la fin. Comme la vidéo montre une rotation fluide, l'illusion d'un contrôle de rotation 3D se crée.
Cela compte parce que cela vous dit où investir votre effort. La majeure partie de la qualité vient de la vidéo morph elle-même — pas de la construction web. Une meilleure animation morphing surpasse un meilleur JavaScript d'un ordre de grandeur.
Étape 1 : Volez comme un artiste (la phase d'idéation)
Tout bon projet commence par s'inspirer. Parcourez Awwwards, Dribbble ou simplement les sites des marques que vous admirez. Cherchez spécifiquement : des animations hero qui semblent organiques ; des animations de personnages ; et des pages qui suggèrent de la profondeur avec un minimum de vraie technologie 3D.
Mon concept : une landing page sombre et cinématique avec un personnage central qui semble suivre le curseur de l'utilisateur, avec une navbar minimaliste et un effet machine à écrire sur le titre.
Étape 2 : Créez deux poses du personnage avec un éditeur d'images IA
La vidéo morph a besoin de frames de début et de fin. Gardez le changement de pose subtil — 15-30 degrés de différence de rotation est le point idéal. Harmonisez l'arrière-plan — toute incohérence entre les deux frames devient un scintillement visible dans l'animation morphing.
Étape 3 : Générez la vidéo morph avec Google Flow (Veo 3.1)
L'outil est Google Flow, la plateforme de génération vidéo de Google basée sur le modèle Veo 3.1. Ce n'est pas « Clai » ou « Clay » — c'est une déformation de transcription.
Le flux : allez sur Google Flow, uploadez vos images comme keyframes, définissez le prompt comme : « Smooth cinematic rotation of the character from left to right, maintaining consistent lighting and style. » Générez la vidéo.
Détail critique : Générez plusieurs variantes. Traitez la génération vidéo IA comme la photographie — prenez plusieurs prises et choisissez la meilleure.
Étape 4 : Construisez le hero et la navbar dans Google AI Studio
Google AI Studio peut générer des pages web HTML/CSS/JS par prompts. J'ai donné un prompt détaillé demandant une landing page sombre et cinématique avec vidéo en fond plein écran, navbar transparente et typographie grande et grasse centrée.
Étape 5 : Intégrez la vidéo morph comme fond du hero
<video id="hero-video" src="morph.mp4" muted playsinline preload="auto"
style="width:100%; height:100vh; object-fit:cover;"></video>
muted et playsinline sont tous deux nécessaires pour la lecture automatique sur les navigateurs mobiles.
Étape 6 : Liez le mouvement horizontal de la souris au scrubbing vidéo
const video = document.getElementById('hero-video');
document.addEventListener('mousemove', (e) => {
const progress = e.clientX / window.innerWidth;
video.currentTime = progress * video.duration;
});
C'est tout. Souris tout à gauche = frame 0. Souris tout à droite = dernier frame.
Étape 7 : Corrigez l'expérience mobile (parce qu'il n'y a pas de curseur)
Ajoutez des événements touch pour mapper la position horizontale du toucher au même scrubbing vidéo :
document.addEventListener('touchmove', (e) => {
const touch = e.touches[0];
const progress = touch.clientX / window.innerWidth;
video.currentTime = progress * video.duration;
});
En fallback, lancez la vidéo en lecture lente automatique.
Étape 8 : Ajoutez un effet machine à écrire au titre
J'ai demandé à Google AI Studio d'ajouter un effet d'animation machine à écrire. J'ai ajouté un délai lié à l'événement loadeddata de la vidéo pour que l'animation ne commence pas avant le chargement de la vidéo.
Étape 9 : Déployez gratuitement avec GitHub et Vercel
Créez un dépôt sur GitHub, poussez votre fichier HTML et le MP4 morph, connectez le dépôt à Vercel (le tier gratuit fonctionne). Votre site 3D animé est en ligne, hébergé gratuitement, avec SSL automatique et CDN.
Le verdict honnête : où ça brille et où ça casse
Où ça brille : La première impression est spectaculaire. Le temps de construction est minimal — environ trois heures. Zéro complexité à l'exécution.
Où ça casse : La rotation est fixe. La qualité vidéo couvre tout. Le mobile est un citoyen de seconde classe.
À quoi s'attendre réellement (résultats réalistes)
Prévoyez 2-4 heures pour le build complet. Attendez-vous à générer 3-5 variantes de morph. Le résultat sera époustouflant sur desktop et acceptable sur mobile. Pour les landing pages clients, les portfolios et les showcases créatifs, cette approche est un multiplicateur légitime de l'effet wow.
Foire aux questions
Google AI Studio est-il gratuit pour construire des sites ?
Google AI Studio a un tier gratuit qui inclut la génération HTML/CSS/JS.
Quel outil fait l'animation morph du personnage ?
Google Flow, basé sur le modèle Veo 3.1. « Clai » et « Clay » sont des erreurs de transcription.
Pourquoi mon scrubbing vidéo à la souris est-il lent ?
Vidéo trop longue, pas préchargée ou bitrate trop élevé. Gardez sous 5 secondes, utilisez preload="auto" et compressez avec HandBrake.
Comment faire fonctionner le site animé sur mobile ?
Ajoutez des listeners touchmove qui mappent la position horizontale du toucher au currentTime de la vidéo. Ajoutez un fallback de lecture automatique lente.
Devrais-je utiliser Figma pour ce build ?
Pour un build de cette taille, Figma est excessif. Google AI Studio génère la structure HTML directement.
Vous n'avez pas besoin d'un moteur de jeu — vous avez besoin d'un après-midi
Les outils ont changé. Ce qui prenait une semaine de travail en studio est maintenant une expérience d'un après-midi. La combinaison de génération d'images IA pour les poses, de génération vidéo IA pour le morph et de génération de code IA pour la page web fusionne tout le pipeline du concept au déploiement en une seule session.
Si vous voulez explorer des builds créatifs comme celui-ci pour votre marque ou vos clients, c'est exactement le type de projet que j'adore. Retrouvez-moi sur fiverr.com/s/EgxYmWD.
Travaillons ensemble
- Fiverr (builds sur mesure et intégrations) : fiverr.com/s/EgxYmWD
- Portfolio : mejba.me
- Ramlit Limited (solutions entreprise) : ramlit.com
- ColorPark (design et branding) : colorpark.io
- xCyberSecurity (services de sécurité) : xcybersecurity.io
