Créer une animation de survol de site web en 3D

Un survol de site web transforme une longue page en présentation animée : la caméra parcourt ses sections, attire l’attention sur quelques messages, puis recule pour révéler le design. Dans cet exemple, trois cartes de texte se soulèvent à l’approche de la caméra.

Pour un lancement de produit ou une présentation de portfolio, choisissez trois messages à mettre en avant. Le parcours de la caméra les relie dans une courte présentation ; les cartes relevées donnent à chacun son moment d’attention.

1. Décrivez la page et le mouvement de caméra

Avant de commencer, choisissez le titre d’ouverture, trois courts messages sur les fonctionnalités et une couleur de marque. Ajoutez-les au prompt pour donner à l’animation un contenu précis à montrer.

Ouvrez iArt en mode Animation et choisissez un format 16:9. Utilisez ce brief comme point de départ en remplaçant les textes entre crochets par les vôtres :

Crée un survol de site web de 15 secondes pour [nom du produit]. Conçois une longue page de destination avec le titre « [titre principal] » et trois sections : « [fonctionnalité un] », « [fonctionnalité deux] » et « [fonctionnalité trois] ». Utilise un fond blanc, du texte sombre et [couleur de marque] comme accent.

Fais avancer la caméra à faible hauteur le long de la page dans un seul plan continu. À l’approche de chaque fonctionnalité, relève sa carte de texte à partir du bord inférieur. Garde ce bord attaché à la page, ajoute une ombre sous la carte et conserve un titre lisible. Laisse la carte se reposer après le passage de la caméra.

Après la troisième fonctionnalité, élève la caméra pour révéler toute la page. Reviens ensuite au titre d’ouverture et maintiens le cadrage jusqu’à la fin. Le mouvement doit rester fluide, sans coupes entre les sections. Sans narration ni musique.

Le parcours de la caméra et le mouvement des cartes sont les éléments essentiels du brief. Vérifiez ces deux points dans l’aperçu avant d’affiner les couleurs ou les éléments décoratifs.

2. Faites parcourir un espace continu à la caméra

L’inclinaison de la page établit la perspective. Le déplacement vers l’avant crée le survol : la caméra passe devant de nouvelles sections de la même longue page. L’implémentation utilise une caméra en perspective Three.js, dont la projection fait paraître les objets proches plus grands que les objets éloignés. Consultez l’implémentation officielle et la documentation des paramètres de la caméra Three.js.

Temps	Mouvement de caméra	Point à vérifier
0–7,8 secondes	Survol à faible hauteur le long de la page	Les trois cartes de texte deviennent tour à tour le sujet principal.
7,8–9,2 secondes	Montée au-dessus de la page	Les cartes se reposent tandis que la mise en page se dévoile.
9,2–9,5 secondes	Brève vue de dessus	La longue page entière tient dans le cadre.
9,5–10,4 secondes	Retour vers la section d’ouverture	La caméra rejoint une composition finale choisie avec soin.
10,4–15 secondes	Pause finale	Le titre reste lisible.

Gardez la vue de dessus brève et accordez davantage de temps de lecture au titre final. Pour un autre design, décidez de ce que le spectateur doit remarquer à chaque étape avant d’ajuster le rythme.

3. Relevez chaque carte depuis son bord inférieur

La charnière détermine la manière dont la carte semble attachée. Placez l’axe de rotation sur le bord inférieur et laissez ce bord fixé à la page. Une rotation autour du centre du panneau déplace aussi son bord inférieur : la carte semble alors flotter plutôt que se relever.

Dans cet exemple, chaque carte se relève jusqu’à 68 degrés. Une fine tranche visible et une ombre portée sur la page rendent la séparation perceptible. La face avant reste suffisamment lumineuse pour que le titre demeure lisible.

Synchronisez chaque mouvement avec l’approche de la caméra : la carte se relève lorsqu’elle devient le sujet principal, marque une courte pause, puis se repose après le passage de la caméra. Limitez chaque carte à un message court, lisible pendant le passage.

4. Adaptez le contenu avant de modifier la caméra

Pour la première variante, conservez la structure de la page et changez uniquement le titre principal, les trois messages et la couleur d’accent. Vous pourrez ainsi évaluer une modification ciblée. Changer simultanément la longueur de la page, les dimensions des cartes et le parcours de la caméra complique l’identification de la cause d’un problème de cadrage.

Les trois cartes affichent « Describe. Or upload. », « Change it by saying so. » et « Export. Then share. ». Chacune porte un message, tandis que la page environnante fournit le contexte. Une page de lancement peut présenter trois avantages ; un portfolio, trois projets. Rédigez les nouveaux textes avant de demander une modification et gardez les titres assez courts pour être lus pendant le passage de la caméra.

Partie de l’exemple	Élément à adapter	Vérification à effectuer ensuite
Titre d’ouverture et de fin	Le nom du produit et sa promesse principale.	Le texte tient dans le cadre et reste lisible pendant la pause finale.
Trois cartes relevées	Trois fonctionnalités, projets ou messages.	Aucun titre ne présente de retour à la ligne gênant ni ne disparaît derrière un autre élément.
Couleur d’accent	Une couleur de votre palette de marque.	Le texte et les schémas gardent un bon contraste avec leur fond.
Visuels de la page	Votre design ou les ressources préparées de votre site.	La position des cartes et le cadrage correspondent toujours à la mise en page.

Remplacer les visuels de la page demande davantage de travail que changer le texte. Un design basé sur une capture d’écran nécessite des calques séparés pour les cartes à relever, alignés sur leur position dans la page.

5. Vérifiez le mouvement, le cadrage et la lisibilité

Faites une pause lors du relèvement de chaque carte, de la vue de dessus et du titre final. Vérifiez que le bord inférieur reste attaché, que le titre est orienté vers la caméra et que l’ombre se projette sur la page.

Lisez ensuite la séquence entière. Une image fixe convaincante ne montre pas si la caméra marque une pause maladroite, passe trop vite sur un message ou change brusquement de direction. Vérifiez que le titre dispose d’assez d’espace pendant la pause finale et que la page entière tient dans la vue de dessus.

Problème visible	Modification à apporter
Le résultat ressemble à un diaporama.	Gardez une seule page dans une scène unique et déplacez la caméra en continu sur toute sa longueur.
La carte flotte loin de sa section.	Fixez son bord inférieur à une position de la page et faites-la pivoter autour de cette charnière.
La carte se relève avant d’être visible.	Synchronisez son relèvement avec le passage de la caméra à cet endroit.
Le titre devient illisible.	Raccourcissez le texte, ajustez l’angle de la carte ou prolongez ce moment.
La page est coupée dans la vue de dessus.	Élevez la caméra ou ajustez son cadrage avant de modifier le design de la page.

L’exemple calcule l’animation à partir de l’image vidéo courante, ce qui facilite l’examen de moments précis. La documentation useCurrentFrame de Remotion explique ce minutage par images. Après avoir examiné des images isolées, relisez toute la séquence pour évaluer leur enchaînement. Lorsque l’aperçu est prêt, vérifiez aussi la vidéo exportée.

Pour un lancement centré sur une page web, cette approche fournit une structure de mouvement concrète à adapter. Si le récit porte sur un objet d’interface qui change d’état, le tutoriel d’animation UI morph propose une autre approche. Pour d’autres formats de lancement, consultez les exemples de vidéos de lancement de produits. Pour une présentation plus large du produit, découvrez le créateur de vidéos promotionnelles iArt.

FAQ

Combien coûte un survol de site web dans iArt ?

La dernière requête Haiku 5.5 de cet exemple a consommé environ 0,02 $ US de crédits, avec le code de la scène déjà préparé. Ce montant couvre une seule requête, hors essais précédents et exportation ; partir de zéro ou effectuer d’autres modifications coûte davantage. Les nouveaux comptes reçoivent 2 $ US de crédits gratuits à l’inscription, sans carte bancaire, pour essayer la génération et la modification d’animations. Le téléchargement MP4 nécessite un abonnement payant. Consultez les tarifs iArt pour connaître les offres actuelles.

Qu’est-ce qu’un survol de site web ?

C’est une vidéo dans laquelle une caméra virtuelle parcourt une page web en perspective. Elle peut mettre en valeur certaines sections par des gros plans ou des éléments relevés, puis reculer pour montrer comment elles s’assemblent.

Que faut-il inclure dans un prompt de survol de site web ?

Indiquez le titre de la page, trois courts messages sur les fonctionnalités, les couleurs de marque et le parcours de la caméra. Précisez où chaque carte est attachée, quand elle se relève et où la caméra termine son trajet. Ces détails fournissent des mouvements concrets à vérifier dans l’aperçu.

Puis-je utiliser une capture de mon propre site ?

Une capture peut servir de surface à la page, mais elle ne fournit pas à elle seule des cartes mobiles. Chaque carte nécessite un calque séparé, aligné sur sa position dans la page. Le cadrage et la position des cartes doivent correspondre à votre mise en page.

Un survol de site web est-il identique à un enregistrement d’écran ?

Un enregistrement d’écran capture les interactions avec un site fonctionnel. Un survol présente le design au moyen d’une caméra animée et peut relever des éléments dans l’espace. Utilisez un enregistrement pour montrer des clics précis et le fonctionnement du produit ; choisissez un survol pour présenter la page et ses messages principaux.

Puis-je en faire un Reel ou un Short vertical ?

L’exemple utilise un format 16:9. Une version verticale nécessite de revoir le cadrage : gardez la carte principale et son titre visibles, ajustez la distance de la caméra et vérifiez la vue d’ensemble. Un recadrage centré peut couper les cartes.