À propos de ce modèle
Planor donne à un produit IA ou SaaS un premier écran fini et les valeurs qui l’ont produit. La palette est orange #634635 en fond et blanc #E5E7EB pour le texte, composée en Inter. La livraison est en un seul fichier HTML autonome, capturée en 1964x1402 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 0.2s de transitions et un fond vidéo en boucle, assez discrète pour que le texte reste au premier plan. Gardez-la ouverte pendant la rédaction, car le brief de 3 036 caractères est la partie qui se transfère à votre page.
Conçu pour
- Prestataires qui récupèrent un design de section hero et veulent voir un seul fichier HTML autonome dans le dépôt avant le premier commit.
- Si la reconstruction part de un seul fichier HTML autonome, relevez d’abord un corps display fixe de 58px et des pas d’espacement de 30px et laissez la palette tranquille jusqu’à ce que la grille tienne.
- La page sert aux développeurs front-end qui reconstruisent un design de section hero pour un produit IA ou SaaS en un seul fichier HTML autonome et cherchent les chiffres derrière le rendu.
Ce qui est inclus
- Une navigation sur une seule ligne. La navigation tient sur une seule rangée, sans second niveau en dessous. Une surcouche mobile prend le relais sous le breakpoint tablette. La barre se pose sur la composition 1964x1402 sans fond propre, la vidéo court donc bord à bord en dessous. Si votre page compte plus de sections, regroupez-les au lieu d’élargir la barre.
- Des valeurs vérifiables. Rien dans la mise en page n’est laissé à l’impression, le brief cite un corps display fixe de 58px, des pas d’espacement de 30px et des transitions de 0.2s et le build doit atteindre ces valeurs. Le brief énonce des valeurs et non des proportions, la composition garde donc ses relations quand le texte change de longueur.
- Les liens avant l’action. La barre se superpose à section hero au lieu de repousser le contenu, la composition garde donc toute la hauteur du premier écran. Reprenez ce motif quand il vous faut une navigation qui tient sous un premier écran chargé.
- Les tailles sont dans le brief, pas dans une échelle. Les espacements sont cités de la même façon (un corps display fixe de 58px, des pas d’espacement de 30px et des transitions de 0.2s), et non comme une échelle qui grandit toute seule.
Animation et interaction
La boucle fait l’ambiance
Le mouvement d’ambiance est un clip de 6,4s en 1964x1402, qui boucle discrètement derrière le texte au lieu de réagir au pointeur. Le clip est assez court pour boucler sans couture visible, ce qui compte plus que sa résolution.
Assez rapide pour être voulu
L’animation des contrôles est courte et répétable, 0.2s à chaque changement d’état. L’easing est spécifié avec la durée (0.2s), donc une reconstruction ne peut pas substituer discrètement une autre sensation. Une durée par comportement.
L’ordre de section hero
Le brief fait 3 036 caractères et nomme explicitement l’ordre de lecture, la navigation, le titre et le clip de fond, avec un corps display fixe de 58px et des pas d’espacement de 30px entre eux. Un lecteur SaaS reçoit l’offre avant les options.
Le réagencement de section hero
On ne règle pas un écran étroit en le réduisant. Ce brief traite le changement dans la typographie et la navigation, la navigation se replie en menu mobile. Un simple écrasement aurait coûté moins cher et n’aurait pas tenu.
Par où commencer dans Planor
Le brief nomme Inter et l’échelle qui l’accompagne. Substituez une police aux mêmes proportions et la composition survit. Gardez le cadre et l’échelle, le sujet est la partie qui doit changer.
Questions fréquentes
Quelle part de Planor dépend de un seul fichier HTML autonome?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Planor a été réalisé avec cette pile technique. Le brief ne décrit que des positions, des tailles et des durées, donc il se reconstruit dans n’importe quel framework capable de composer du texte et de placer des éléments.
Que contient réellement le brief derrière Planor?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1964x1402, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Puis-je utiliser Planor dans un projet client?
Le brief est une description, pas une autorisation de redistribuer les ressources d’un tiers. Gardez la structure et les chiffres, remplacez les médias et les marques, et citez la source si un client demande d’où vient la mise en page. La référence a été capturée en 1964x1402.
