Créer une animation de vol au scroll avec Claude Code

Sur la page d'accueil que nous avons imaginée pour The Fusion Bar, bar-restaurant népalais à Toulouse, le visiteur fait défiler la page et la caméra s'envole. Elle part des sommets de l'Himalaya, survole Toulouse la nuit, descend dans la rue jusqu'à la vraie devanture du bar, passe la porte et finit sur la piste de danse, devant la DJ. Tout le voyage tient dans un seul geste : le scroll. Voici exactement comment nous l'avons construit, avec Claude Code comme chef d'orchestre.

Ce qu'il vous faut

• Claude Code, l'assistant de développement d'Anthropic. Il écrit les prompts, lance les générations, vérifie les images, assemble les vidéos et code la page. Nous lui parlons en français, comme à un collègue.
• Higgsfield, utilisé en ligne de commande, pour générer les images et les vidéos.
• ffmpeg, l'outil gratuit de traitement vidéo, que Claude Code utilise pour découper et encoder.
• Quelques photos réelles du lieu : ici, deux photos de la façade et deux de la salle, prises sur le compte Instagram du bar.
• Un budget de crédits : environ 340 crédits Higgsfield pour l'ensemble (images, retouches et vidéos).

Étape 1 · Écrire l'histoire du vol

Avant toute image, nous avons écrit le trajet de la caméra en quatre scènes, comme un storyboard.

Un seul mouvement de caméra, toujours vers l'avant, du Népal jusqu'à Saint-Cyprien. C'est l'histoire du lieu racontée en quelques secondes de scroll.

Étape 2 · Fixer une direction artistique commune

Le secret d'un vol cohérent : les quatre images partagent exactement le même préambule de style, copié mot pour mot en tête de chaque prompt. Seule la description de la scène change. Voici un extrait de notre préambule :

Hand-painted cinematic illustration, rich gouache and digital painting texture with visible soft brush strokes, Tihar festival night atmosphere: deep indigo-blue night sky, warm glowing marigold-orange and amber lights [...] Cohesive palette: indigo night #141A33, Toulouse pink-red brick #B5523B, marigold orange #F29F05, warm amber #FFC56B [...] No text, no letters, no logos anywhere.

Trois réflexes dans ce préambule :

• La palette en codes couleur : les quatre images restent dans la même gamme.
• Les interdits écrits noir sur blanc : aucun texte, aucun logo, aucun symbole religieux, aucun alcool au premier plan (loi Évin).
• Des personnages stylisés, aux traits simples, pour rester dans l'illustration.

Étape 3 · Générer les quatre images clés

Claude Code lance les quatre images avec le modèle GPT Image 2 sur Higgsfield, au format 16:9 en 2K, pour environ 6,5 crédits par image.

Pour la scène de la rue, nous voulions la vraie devanture. Claude Code a donc joint les deux photos de la façade en référence et autorisé une seule exception à la règle du zéro texte : l'enseigne, reproduite exactement.

Eye-level view from across the narrow street at night, facing the storefront of the reference photo, reproduced faithfully: a red-brick Toulouse building with two arched upper windows [...] a long black illuminated sign panel with large white lettering THE FUSION followed by red lettering BAR [...]

Étape 4 · Contrôler chaque image à la loupe

C'est l'étape que l'on saute trop souvent. Claude Code a zoomé sur chaque image et repéré ce qui clochait :

• un personnage religieux peint sur un mur dans la scène de Toulouse ;
• de faux caractères sur les drapeaux de prières ;
• des tableaux de divinités dans la salle ;
• des visages vides ;
• un DJ homme, alors que la DJ du lieu est une femme.

Il a corrigé chaque détail par retouche ciblée avec le modèle Nano Banana, en gardant le reste de l'image intact. La formule qui marche :

Edit this image. Keep everything else exactly identical: same composition, camera angle, painterly gouache style, colours, lighting [...] Only these changes: (1) the DJ at the turntables becomes a young woman with long black braids [...]

Étape 5 · Animer le vol en tronçons qui s'enchaînent

Le vol est composé de quatre vidéos de 8 secondes, générées avec le modèle Seedance 2.0 en 1080p. L'astuce qui rend les raccords invisibles :

1. Chaque vidéo reçoit une image de départ et une image d'arrivée : les images clés de l'étape 3.
2. Une fois la vidéo générée, Claude Code extrait sa toute dernière image avec ffmpeg.
3. Cette dernière image devient l'image de départ de la vidéo suivante.

Résultat : la fin d'un tronçon et le début du suivant sont la même image, au pixel près. Aucun saut entre les scènes. Chaque prompt de mouvement suit la même grammaire :

Single continuous cinematic camera move, no cuts. Continue the same slow, steady forward glide. [description du trajet] In the final second, settle back into a slow, steady forward glide [...]

Cette dernière phrase compte : chaque vidéo finit sur un mouvement lent et régulier, ce qui facilite l'enchaînement avec la suivante.

Claude Code a tout automatisé dans un petit script : il génère le tronçon, le télécharge, extrait la dernière image, puis passe au suivant, avec trois essais par tronçon en cas d'échec. Les vidéos représentent environ 305 des 340 crédits.

Étape 6 · Préparer les vidéos pour le scroll

Une vidéo pensée pour le scroll s'encode à sa façon. Pour que le visiteur puisse avancer et reculer sans saccade, Claude Code a réencodé chaque tronçon avec ffmpeg :

• une image clé toutes les 8 images : le navigateur retrouve n'importe quel instant très vite, dans les deux sens ;
• le son retiré ;
• un léger renforcement de netteté ;
• le démarrage rapide activé, pour que la lecture commence avant la fin du téléchargement.

Il a aussi exporté une image fixe de chaque scène, affichée pendant le chargement de la vidéo.

Étape 7 · Brancher la vidéo sur le scroll

Dernière étape, le code de la page. Le principe tient en une phrase : la position du scroll pilote le temps de la vidéo. Le visiteur descend de 10 % dans la section, la vidéo avance de 10 %.

Claude Code s'est appuyé sur un moteur de défilement prêt à l'emploi, un skill que nous avons ajouté à Claude Code (scroll-world). Concrètement :

• la section du hero est très haute, sur plusieurs écrans, et la vidéo reste fixée à l'écran pendant que l'on défile ;
• chaque scène a son titre, qui apparaît au bon moment : « Du Népal à Saint-Cyp », « Le monde entier à Saint-Cyp », « Yak'à pousser la porte », « Momos & sons du monde » ;
• un fondu discret relie les tronçons ;
• les visiteurs qui ont réduit les animations dans leur système voient les images fixes.

Le tout en JavaScript simple, sans librairie lourde. Le site est ensuite mis en ligne sur Vercel, toujours depuis Claude Code.

Ce que nous retenons

• Écrivez le trajet avant de générer. Une histoire claire donne des prompts clairs.
• Un préambule de style unique pour toutes les images : c'est lui qui fait la cohérence.
• Vérifiez chaque image en zoomant (symboles, textes parasites, visages) et corrigez par retouche ciblée.
• La dernière image d'un tronçon devient la première du suivant. C'est tout le secret des raccords invisibles.
• Encodez pour le scroll, avec des images clés rapprochées.
• Un seul modèle vidéo pour toute la chaîne, pour un rendu homogène d'une scène à l'autre.
• Claude Code fait le lien entre toutes ces étapes : prompts, générations, contrôles, montage, code et mise en ligne, dans une seule conversation.

Audrey & Emma.