Faire un site web 3D en 15 minutes

Un mockup 3D animé au scroll avec Spline et Webflow

L’objectif est repris des landing pages d’Apple : un iPhone en 3D qui remonte depuis le bas de l’écran pendant le défilement, s’incline en arrivant à hauteur du texte, et réagit au survol de la souris. Deux outils suffisent, Spline pour la scène 3D et Webflow pour l’intégration et l’animation.

Spline s’utilise avec un compte gratuit, largement suffisant ici. Le dashboard donne accès à une bibliothèque de templates et à une communauté de scènes réutilisables : plutôt que de modéliser un téléphone, on part d’un modèle existant.

Compte Spline

Gratuit

Plans payants, dès

15 $ / mois

Un site 3D, à partir de

2 000 €

Les plans payants servent surtout à travailler en équipe. Le tarif d’un site 3D, lui, rend la compétence rentable à apprendre.

Préparer la scène dans Spline

L’interface ressemble à celle de Figma ou de Framer : panneau des calques à gauche, barre d’outils en haut, panneau de style à droite. Le nettoyage du template se fait dans cet ordre.

1. Supprimer le texte livré avec la scène et passer le fond en transparent.
2. Retirer le sol, qui projette une ombre dont on n’a pas besoin.
3. Passer la vue en perspective plutôt qu’en orthographique : le rendu est plus réaliste.
4. Supprimer les deux événements déjà présents dans le template, puisque l’animation sera jouée par Webflow et pas par Spline.

Reste à poser le point de départ : le mockup est couché avec une rotation de moins 90 degrés sur l’axe X, puis de 90 degrés sur l’axe Z, avant d’ajuster le zoom et sa position en hauteur. C’est la position dans laquelle il entrera dans l’écran.

Intégrer la scène 3D dans Webflow

Webflow propose un élément dédié, Spline Scene, qu’on place dans la hero section en position absolute (le parent doit être en relative) et en pleine largeur. Il ne reste qu’à coller dans cet élément le lien du viewer exporté depuis Spline.

Ce que tu vois dans Spline est ce qui s’affiche dans Webflow, à condition de cliquer sur Update viewer après chaque changement, puis de recharger la scène côté Webflow.

Les play settings, indispensables

Dans les réglages d’export, on retire le fond, on garde le page scroll pour que la page continue de défiler, et on désactive orbit, soft orbit, zoom et pan pour que le visiteur ne puisse pas déplacer l’objet. Le hover reste actif, avec une intensité réduite de moitié : c’est le léger mouvement de suivi au survol. Enfin, les mouse events passent en global, pour que l’interaction se joue sur toute la fenêtre et pas seulement sur la scène.

Animer la scène au scroll dans Webflow

L’animation est posée sur le conteneur de défilement, haut de 200 vh, avec le déclencheur while scrolling in view. Dans la timeline, on ajoute l’intégration Spline, qui expose ses propriétés de mouvement et de rotation.

Premier réglage, la montée : un déplacement sur l’axe X ramené à zéro en fin de course. La valeur est négative, et c’est logique, le mockup a été retourné dans Spline, ce qui inverse le sens de l’axe. Une valeur autour de moins 510 place correctement le point de départ.

Deuxième réglage, l’inclinaison. Une étape intermédiaire est dupliquée pour conserver les valeurs déjà posées et ne changer que la rotation sur l’axe X : le téléphone arrive à plat, puis bascule sur la fin du parcours. Le principe à retenir est là : toutes les étapes doivent porter des valeurs cohérentes, sinon l’objet saute d’une position à l’autre.

Reste le calage. Si l’animation démarre trop tard et se termine trop tard, les bornes d’animation et un offset de 20 % recadrent le début et la fin sur la portion de page réellement parcourue. Un smoothing à 80 % suffit à rendre le mouvement fluide.

Adapter la 3D au mobile

Sur petit écran, le mockup déborde : l’animation fonctionne mais l’objet est bien trop gros. La correction se fait dans Spline, pas dans Webflow. En cliquant sur le fond de la scène, une option d’auto zoom redimensionne l’objet en fonction de la hauteur de l’écran. Un update du viewer, et le rendu suit.

Le contrôle se fait dans les outils de développement du navigateur sur le site en preview, l’éditeur Webflow n’étant pas le bon endroit pour juger d’une scène 3D en responsive.

Conclusion

Intégrer de la 3D dans un site Webflow ne demande ni modélisation ni code : un template Spline nettoyé, des play settings verrouillés pour que la scène n’attrape pas le scroll, et l’animation confiée à Webflow, là où elle se règle finement.