À propos de ce modèle
Organic Odyssey est un exemple de section hero SaaS, construit à partir d’un seul brief écrit, et cette page documente ce brief. La page affiche son propre titre, « An odyssey through delicate living forms », et la composition est construite autour de ces mots exacts. La palette est noir #000000 en fond, composée en Geist. La fiche nomme la stack qui a produit la page (React et Tailwind CSS) au lieu de la passer sous silence. L’animation se résume à 300ms de transitions. Gardez-la ouverte pendant la rédaction, car le brief de 4 802 caractères est la partie qui se transfère à votre page.
Conçu pour
- Les ingénieurs qui veulent que ce design de section hero tienne sur une connexion lente utiliseront 640x470 et l’échelle typographique comme budget de poids.
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de section hero dont le titre doit rester aussi long que celui de Organic Odyssey.
- Si votre typographie n’est pas Geist, les développeurs front-end doivent remesurer le titre avant de retoucher le timing de l’entrée.
Ce qui est inclus
- Une barre sans superflu. La barre tient sur une rangée de texte et une action, mesurée à des pas d’espacement de 20px et des transitions de 300ms pour se lire comme un filet et non comme un bandeau. La barre se pose sur la composition 640x470 sans fond propre, la vidéo court donc bord à bord en dessous.
- L’échelle est le style. La ligne display est composée en Geist à une taille fixée par le brief, le titre devient donc un élément de composition et non un paragraphe. Les paliers de taille sont des valeurs fixes, c’est ce qui permet de changer de fonte en gardant la même hiérarchie.
- Les liens avant l’action. Testez la barre sur vos propres médias avant de lui donner un fond. La référence a été capturée en 640x470.
- Rien n’est hérité ici. La mise en page travaille sur des valeurs absolues plutôt que sur des ratios (des pas d’espacement de 20px et des transitions de 300ms). Chaque valeur correspond à un seul rôle, un palier de taille, un espacement, un rayon ou une transition. Gardez les valeurs qui semblent arbitraires.
Animation et interaction
Le titre s’assemble seul
L’animation d’entrée est dépensée sur un seul élément (le titre est cadencé caractère par caractère au lieu d’apparaître d’un bloc en fondu), et c’est ce qui évite à un premier écran chargé de paraître surchargé. Si la technique est retirée, le contenu est là et la mise en page ne bouge pas.
Des durées courtes et nommées
Une seule durée couvre les interactions (300ms), et c’est ce qui fait que survol et pression se lisent comme un seul système. Les durées sont assez courtes pour que le retour se lise comme une réponse et non comme une animation. Les timings font partie du design, pas d’une passe de finition.
Le réagencement de section hero
Comparé à une mise en page mobile qui masque des sections, cet exemple les garde et change leur forme, la navigation se replie en menu mobile. La lecture automatique et l’animation sont traitées honnêtement, la page communique donc encore quand elles sont indisponibles.
L’ordre de section hero
Une mise en page pilotée par les fonctionnalités énumère ce que fait le produit, celle-ci conduit le lecteur vers une seule décision. Le trajet se voit dans la navigation, le titre, la ligne de statistiques et le clip de fond et dans l’espacement réglé par des pas d’espacement de 20px et des transitions de 300ms. Un lecteur SaaS reçoit l’offre avant les options.
Lire Organic Odyssey comme une spécification
Comparez avec un template qui traite ses espacements comme une préférence. Ici, les mêmes valeurs sont nommées (des pas d’espacement de 20px et des transitions de 300ms), donc une modification les respecte ou casse visiblement la composition. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Questions fréquentes
Quelle est la longueur du prompt derrière Organic Odyssey?
Comptez 4 802 caractères pour le brief capturé, qui décrit le cadre, l’échelle typographique, la palette et les transitions. Le copier vous donne ce texte tel quel, et l’envoyer à Studio prépare la même demande avec la page déjà décrite.
Faut-il React et Tailwind CSS pour reconstruire Organic Odyssey?
La fiche indique React et Tailwind CSS pour la provenance, parce que Organic Odyssey 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 se comportent les transitions de 300ms dans Organic Odyssey?
Les transitions sont rattachées à des états de l’interface plutôt qu’à une chronologie de scroll, et elles se résolvent dans la plage 300ms. Le brief en consigne les valeurs pour qu’un portage n’ait pas à les deviner.
