Animation site web : le scroll façon Apple, sans coder

Une animation site web à la Apple, où le produit pivote et se déplie au fil du défilement de la page, se réalise désormais en une demi-heure avec des outils d’IA presque gratuits. Pour votre client, c’est une page d’accueil qui évoque un lancement d’iPhone, avec son propre produit en vedette, livrée sans motion designer. Voici la chaîne complète, filmée sur le site d’un centre de formation, et ce qui a changé dans les outils depuis le tournage.

32:51

Le principe : une vidéo découpée en images, rejouée au scroll

Les pages produit d’Apple ne lisent pas une vidéo. Elles affichent une suite d’images, une par position de défilement : vous descendez de 10 %, la page affiche l’image 10 % plus loin dans la séquence. C’est ce qui donne cette sensation de piloter l’objet avec la molette.

La chaîne tient donc en cinq étapes :

1. une image de début et une image de fin, générées par l’IA ;
2. une vidéo de 8 secondes qui passe de l’une à l’autre ;
3. la vidéo découpée en images fixes (191 dans la démonstration) ;
4. ces images agrandies, parce qu’elles sortent en 1280 × 720 ;
5. le site, qui les affiche au rythme du scroll, puis sa mise en ligne avec le domaine du client.

Les animations CSS (un bouton qui pulse, une flèche qui rebondit) ont leur place. Mais quand un client dit « je veux un site comme Apple », c’est cette séquence d’images qu’il a en tête.

Ce qui a changé depuis la vidéo

La vidéo date de décembre 2025. Quatre points ont bougé, vérifiés le 27 octobre 2026 :

• Whisk n’existe plus : Google l’a fermé le 30 avril 2026 et l’a fondu dans Flow (l’annonce de Google ↗ (nouvel onglet)). Les images de début et de fin se génèrent maintenant dans Flow, qui fait aussi la vidéo.
• Firebase Studio n’accepte plus de nouveaux comptes depuis le 22 juin 2026, et ferme le 22 mars 2027 (la page de Firebase ↗ (nouvel onglet)). Google renvoie vers Google AI Studio et Antigravity. Pour générer le site, prenez l’un des deux, ou Claude Code.
• L’agrandissement coûte un peu plus que ce qui est dit à l’oral. Recraft Crisp Upscale est toujours à 0,5 crédit l’image chez Kie.ai (la page de tarifs ↗ (nouvel onglet)) : 191 images font donc environ 96 crédits, pas 80, soit à peu près 0,48 dollar.
• Le plan gratuit de Vercel est réservé à l’usage personnel et non commercial (la documentation ↗ (nouvel onglet)). Il suffit pour une démonstration, pas pour le site d’un client.

Étape 1 : l’image de début et l’image de fin

L’animation part d’un gros plan et arrive sur une vue d’ensemble. Dans la vidéo, pour un centre de formation au numérique, l’objet choisi est un stylet : il apparaît seul, puis la caméra recule et une tablette entre dans le cadre.

Pour trouver l’objet et la matière, donnez à ChatGPT ou à Claude un prompt modèle avec la niche du client, et demandez trois variantes (objet, matériaux, lumière). Choisissez, puis générez l’image de début dans Flow. Si le site vend un produit précis, ajoutez sa photo en référence : l’IA le place dans la scène.

Comptez plusieurs essais. Dans la démonstration, le stylet ne sort droit qu’au troisième tirage. L’image de fin se génère de la même façon, avec un second prompt qui décrit la scène élargie ; écartez celles qui changent de sujet (le stylet posé à côté de la tablette, une version trop graphique).

Étape 2 : la vidéo entre les deux images

Dans Flow, choisissez le mode image vers vidéo (« Frames to Video »), posez l’image de début et l’image de fin, puis le prompt qui décrit le mouvement. Le modèle est Veo 3.1.

Les limites, à connaître avant de promettre un délai :

• sans abonnement, Flow donne 50 crédits par jour, qui ne se cumulent pas ; une vidéo Veo 3.1 Fast en coûte 20, une Quality 100 (l’aide de Flow ↗ (nouvel onglet)). Deux essais par jour, donc ;
• au tournage, la vidéo sortait avec la mention « Veo » incrustée dans l’image, gênante sur le site d’un client ;
• le son généré ne sert à rien ici.

Le contournement de la vidéo : Kie.ai, une API qui donne accès à Veo 3.1 et à d’autres modèles, avec la même logique image de début, image de fin, prompt. La vidéo en ressort sans la mention. En Veo 3.1 Fast, une vidéo en 720p coûte 60 crédits, environ 0,30 dollar (la page Veo 3.1 de Kie.ai ↗ (nouvel onglet)).

Étape 3 : découper la vidéo en images

Une vidéo MP4 ne se rejoue pas au scroll. Il faut la transformer en une suite d’images légères au format WebP.

La méthode de la vidéo, sans rien installer, passe par EZGIF :

1. Dans « Video to WebP » : la vidéo entière (de 0 à 8 secondes), 25 images par seconde, méthode FFmpeg, qualité 85, largeur jusqu’à 1280 pixels. La conversion prend une trentaine de secondes.
2. Dans « Split », sur le WebP obtenu, en PNG : 191 images, téléchargées en un zip.

Si vous travaillez déjà dans un terminal, FFmpeg fait les deux étapes en une ligne, et Claude Code peut la lancer pour vous :

mkdir -p frames && ffmpeg -i animation.mp4 -vf "fps=24" -c:v libwebp -quality 85 -start_number 0 frames/%03d.webp

La qualité baisse un peu à cette étape, avec des pixels visibles en plein écran. L’étape suivante le rattrape.

Étape 4 : agrandir les 191 images avec n8n

Les images sortent en 1280 × 720. Sur un grand écran, ça se voit. Kie.ai propose plusieurs modèles d’agrandissement : deux de Topaz, et Recraft Crisp Upscale, le moins cher, à 0,5 crédit l’image, qui rend directement du WebP.

Charger 191 images une par une n’a pas de sens. La vidéo les fait passer par un workflow n8n branché sur Google Drive :

1. un dossier upscale reçoit les images à traiter, un dossier upscaled les images agrandies, un dossier done les originaux déjà passés ;
2. n8n lit le dossier upscale et boucle sur chaque image ;
3. il envoie l’image à Kie.ai, puis demande l’agrandissement par Recraft Crisp Upscale ;
4. il attend 5 secondes et lit le statut de la tâche : waiting, queuing ou generating, il attend encore ; success, il continue ; en cas d’échec, il passe à l’image suivante ;
5. il télécharge l’image agrandie, la renomme dans l’ordre (000, 001, 002…) et la range dans upscaled ;
6. il déplace l’original dans done, pour ne jamais le traiter deux fois.

En 5 à 10 minutes, la séquence est prête. Si quelques images ont échoué, relancez le workflow : il ne reprend que celles restées dans upscale. Si n8n est nouveau pour vous, créer un premier workflow n8n pose les bases (déclencheur, boucle, requêtes HTTP).

L’agrandissement n’est pas obligatoire. Je le fais quand même : sans lui, le rendu passe en démonstration, moins bien en page d’accueil sur un grand écran.

Étape 5 : générer le site et brancher l’animation

Dans la vidéo, le site est généré dans Firebase Studio à partir d’un prompt adapté au centre de formation : trois formations mises en avant (full stack, produit, data), des témoignages, une FAQ. La première version sort en 5 à 6 minutes, sans l’animation, normal : l’IA n’a pas encore les images.

Firebase Studio étant fermé aux nouveaux comptes, faites la même chose dans Google AI Studio, ou dans Claude Code si vous l’utilisez déjà (le guide Claude Code). La méthode ne change pas :

1. créez un dossier public/frames et déposez-y les images, nommées dans l’ordre à partir de 000.webp ;
2. dites à l’IA où elles sont, comment elles sont nommées, et que l’animation doit se jouer au scroll, dans un canvas, en préchargeant les images ;
3. testez, puis corrigez en langage courant, comme dans la méthode du vibe coding.

Les retouches de la démonstration sont typiques. L’animation défilait trop lentement : il fallait descendre très bas pour la voir finir. Une grande zone noire et vide s’était ajoutée sous elle. Deux allers-retours ont suffi : « fais-la défiler beaucoup plus vite dès que je commence à scroller », « retire la partie noire ». L’IA se trompe, il faut l’aiguiller ; ce n’est pas une science exacte.

Pour que le reste du site n’ait pas l’air généré par l’IA (dégradés violets, cartes toutes identiques), Claude Code design montre comment lui donner un vrai parti pris graphique.

Étape 6 : GitHub, Vercel et le domaine du client

Le bouton de publication intégré envoie le site sur un serveur Google payant. La vidéo passe plutôt par GitHub, puis Vercel :

1. Sur GitHub : dans l’onglet de gestion du code source, « Publish Branch », connexion au compte GitHub, puis un nom de dépôt. Dépôt privé pour garder le code du client, public si vous voulez le partager. Le pas à pas est dans le tuto GitHub.
2. Sur Vercel : connexion avec le même compte GitHub, import du dépôt, configuration par défaut, « Deploy ». Vercel donne une adresse temporaire en .vercel.app pour tester.
3. Pour le domaine : dans Settings, puis Domains, ajoutez le domaine du client. Vercel affiche deux lignes à créer chez le registraire (OVH ou un autre) : un enregistrement de type A vers l’adresse IP qu’il indique, et un CNAME pour le www. La propagation peut prendre jusqu’à 24 à 48 heures.

Le point que la vidéo ne traite pas : le plan Hobby de Vercel interdit l’usage commercial. Pour un client, créez le projet sur son propre compte Vercel en plan Pro, ou sur un hébergeur dont l’offre gratuite accepte les sites commerciaux. L’article sur Vercel détaille les plans et le déploiement.

La variante : Claude Code reproduit le style d’une animation

Le Reel IG-038 pousse l’idée plus loin, pour les animations qui ne sont pas un objet en 3D (titres animés, transitions, habillage d’une vidéo) :

1. trouvez une vidéo de référence dont le style vous plaît ;
2. donnez-la à Claude Code avec le texte de la nouvelle animation ;
3. Claude Code la découpe en images et en tire le style : couleurs, polices, rythme ;
4. il code la nouvelle animation et l’exporte en vidéo ;
5. demandez-lui d’en faire un skill, pour garder ce style sur toutes les animations du même client.

Avec le skill, la troisième animation pour le même client se fait sans redécrire sa charte. Si vous n’en avez jamais créé, le guide des skills Claude montre comment.