À propos de ce modèle
Orbit Flora résout le problème de landing page pour une marque lifestyle à partir d’un seul brief capturé. La palette repose sur #161616 en fond, #FFFFFF pour le texte et magenta #FD86DB pour les accents, et la page est composée en Inter. La livraison est en un seul composant, capturée en 1454x1080 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 620ms de transitions, cubic-bezier(.16, 1.3, 1) et un fond vidéo en boucle, assez discrète pour que le texte reste au premier plan. Elle est surtout utile quand le texte de landing page Lifestyle change sans qu’une refonte soit nécessaire.
Conçu pour
- Ce design de landing page sert aux équipes qui doivent justifier un easing cubic-bezier(.16, 1.3, 1) auprès de quelqu’un qui n’était pas à la réunion de lancement.
- Les chefs de produit qui doivent chiffrer la reconstruction liront un seul composant comme le périmètre du travail.
- Si la référence n’est qu’un point de départ, les designers peuvent garder un breakpoint à 900px et reconstruire le reste du design de landing page.
Ce qui est inclus
- Rangée du haut, une action. La barre est l’élément le plus discret de la composition, avec le nom de marque, une courte rangée de liens et une action en #FD86DB, le tout au plus petit corps de l’échelle du brief. Les libellés tiennent sur une ligne à 900px, et l’élément actif se signale par la graisse et non par une pastille. Si votre page compte plus de sections, regroupez-les au lieu d’élargir la barre.
- La boucle sert de fond. Un unique clip muet en boucle remplit le cadre en 1454x1080 sur 8,2s, cadré en cover avec le texte empilé par-dessus. Le brief écarte toute surcouche du fond vidéo pour ne pas en ternir les couleurs. La boucle est assez courte (8,2s) pour que l’œil la lise comme une texture et non comme une timeline.
- Le comportement est défini par largeur. La typographie est dimensionnée avec un clamp entre 57px et 34px plutôt qu’avec des paliers fixes, la ligne display reste donc proportionnée entre les breakpoints au lieu de sauter. La typographie change de taille, pas de rôle, à mesure que le viewport se rétrécit.
- La typographie porte le ton. La typographie est Inter, et le brief assigne un rôle à la fonte plutôt que de mélanger pour varier. Graisses, interlettrage et paliers de taille sont spécifiés, la hiérarchie survit donc à un remplacement. L’interlignage suit les paliers de taille plutôt qu’une valeur globale unique.
Animation et interaction
Une scène plutôt qu’une image
La profondeur vient du rendu plutôt que de l’illustration (un canvas WebGL). Le rendu porte ses propres couleurs, donc la palette autour reste discrète. Gardez l’interface plate autour.
Le timing reste dans le brief
Les transitions sont fixées à 620ms en cubic-bezier(.16, 1.3, 1), et c’est la durée à laquelle les contrôles sont tenus. Comme les valeurs sont courtes, une reconstruction qui les allonge se voit tout de suite.
Comment Orbit Flora ordonne la première lecture
Le compromis demande de la patience, car la page retient le détail qu’une grille balayable livrerait tout de suite. Ce qu’elle gagne, c’est un premier écran où l’ordre de la navigation, le badge d’annonce et la ligne de statistiques ne prête pas à confusion. Un lecteur lifestyle reçoit l’offre avant les options.
Adapter landing page à votre marque
La plupart des gens commencent par la couleur d’accent. Commencez plutôt par la promesse, réécrivez la ligne affichée, puis retestez magenta #FD86DB sur vos propres médias. Votre accent doit passer le même test de contraste que celui de la référence.
Pourquoi cette composition fonctionne pour lifestyle
Supposez que votre média soit plus fort que votre texte. C’est le cas pour lequel cette composition est faite. Le média est une boucle de 8,2s en 1454x1080. Le cadre reste sobre et le lecteur reste sur le texte grâce à des sections de 55vh et des pas d’espacement de 34px. Elle donne à un lecteur lifestyle le chemin le plus court vers l’offre.
Questions fréquentes
Faut-il un seul composant pour reconstruire Orbit Flora?
La fiche indique un seul composant pour la provenance, parce que Orbit Flora 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.
Comment cette fiche de Orbit Flora est-elle organisée?
Tout ce qui est cité sur la page provient du brief capturé de 9 402 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Le prompt de Orbit Flora est-il une spécification aboutie ou un simple point de départ?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1454x1080, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
