Comment enregistrer des vidéos de défilement fluides pour des templates Framer

1. 1

   Publiez sur une adresse publique

   Publiez le template, ou sa démo, sur son adresse .framer.website ou sur un domaine personnalisé. Il doit s’ouvrir dans une fenêtre de navigation privée sans mot de passe.

2. 2

   Collez l’URL et choisissez la Capture en direct

   Collez l’adresse sur la page d’accueil. Pour le moteur, choisissez Capture en direct. Elle fait une capture de la page à chaque position de défilement au lieu de faire défiler une image fixe : les effets d’apparition, les transformations au défilement et les sections fixes se jouent exactement comme dans le navigateur.

3. 3

   Réglez le rythme

   Douze à vingt secondes conviennent à la plupart des pages d’accueil de templates. Fluide est le mouvement le plus sûr ; Pulsé avance section par section et se pose sur chacune, ce qui met en valeur la structure d’un template.

4. 4

   Arrêtez-vous sur ce qui fait vendre

   Cliquez sur la page là où le défilement doit s’arrêter : l’en-tête, la grille bento ou de fonctionnalités, les témoignages, les tarifs. Jusqu’à 6 pauses, de 0,5 à 5 secondes chacune. Activez Aller-retour si la vidéo remonte la page.

5. 5

   Montrez les états de survol

   Activez le curseur, ajoutez un survol et cliquez sur la carte ou le bouton où il doit se poser. Le curseur s’y rend, l’effet de survol se joue, puis le curseur s’y attarde de 0,5 à 5 secondes avant de repartir. Huit styles de curseur, du curseur macOS au simple point.

6. 6

   Exportez les versions dont vous avez besoin

   Un MP4 en 16:9, en 1080p ou 1440p, pour la fiche ; puis passez l’appareil sur Mobile et exportez une version en 9:16 ou 4:5 de la mise en page pour téléphone, pour X, Instagram ou TikTok.

Le Panoramique statique lit la page une fois et fait descendre un cadre dessus. C’est rapide et parfaitement régulier, mais tout ce qui s’anime au défilement reste figé dans l’état où il était au moment de la lecture. Activez « Stabiliser les animations » et les effets d’entrée sont d’abord amenés à leur état final, pour que rien ne soit saisi à moitié apparu. La Capture en direct joue vraiment les effets. Son rendu prend nettement plus de temps et ajoute 13 crédits à l’export.

• Utilisez la Capture en direct quand le mouvement fait partie de ce que vous vendez, ce qui est le cas de la plupart des templates Framer.
• Utilisez le Panoramique statique avec « Stabiliser les animations » pour les brouillons rapides, pour les pages dont les animations ne sont que des entrées, ou pour la version mobile, où la place à l’écran est comptée.

• Un cadre de navigateur. Safari ou Chrome, clair ou sombre, pour qu’on reconnaisse un site web au premier coup d’œil.
• Un fond. De la marge autour de la fenêtre, avec une couleur, un dégradé ou l’un des 36 préréglages. Des coins arrondis et une ombre douce donnent l’allure d’une photo produit plutôt que d’une capture d’écran.
• Clair et sombre. Si le template suit le thème du système, forcez Clair ou Sombre dans « Thème de couleur » et exportez une version de chaque.
• Une première image propre. Restez une seconde sur l’en-tête avant le début du défilement. Les places de marché et les réseaux sociaux utilisent souvent la première image comme miniature.