À propos de ce modèle
Interactive Discovery conserve sa trace de décision, puisque le brief de section hero fait 6 894 caractères. La palette se limite à noir #000000 en fond, blanc #FFFFFF pour le texte et orange vif #E8702A pour les accents, et la typographie est Inter. La fiche nomme la stack qui a produit la page (React et Tailwind CSS) au lieu de la passer sous silence. L’animation se cantonne à 1.1s de transitions et cubic-bezier(0.16,1,0.3,1). Servez-vous-en comme référence quand vous construisez un design de section hero pour une entreprise industrielle et que vous voulez une composition finie plutôt qu’un point de départ.
Conçu pour
- Si vous briefez un modèle plutôt qu’un designer, partez de la structure de section hero et laissez le prompt porter un cadre 640x474.
- Partez de des sections de 100vh et des pas d’espacement de 28px et laissez la palette suivre, car ce sont les espacements qui font lire ce design de section hero.
- Ce design de section hero est calibré pour les chefs de produit qui veulent une reconstruction qui réutilise #E8702A plutôt que d’inventer une palette.
Ce qui est inclus
- Une barre sans superflu. La navigation est une bande fine et non un bandeau, avec le nom de marque à gauche, les liens vers le centre droit et une action en #E8702A, le tout posé en tête de section hero, sans fond propre. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #E8702A est le seul élément de la barre à porter du gras.
- Les chiffres portés jusqu’au build. Le brief fixe des sections de 100vh, des pas d’espacement de 28px, des transitions de 1.1s et un easing cubic-bezier(0.16,1,0.3,1) et laisse le reste à l’arrangement, l’inverse d’une échelle qui grandit toute seule. Aucune valeur intermédiaire n’est inventée entre les valeurs nommées, la liste de mesures est tout le système. Les chiffres sont le design, le reste est de l’arrangement.
- Le texte d’abord, la décoration ensuite. Toute la composition tient sur un écran et est livrée en React et Tailwind CSS, avec le texte, les médias et les contrôles nommés dans le brief. La page est une seule composition en 640x474, c’est pourquoi elle tient quand le texte change.
- Rangée du haut, une action. Limitez-vous à quatre ou cinq liens, la rangée est dimensionnée pour ce nombre. La référence a été capturée en 640x474.
Animation et interaction
Il respecte reduced-motion
Le mouvement réduit est spécifié plutôt qu’ajouté après coup, activé, l’entrée s’arrête et la composition garde son état final. Le retour d’information des interactions fonctionne encore en mouvement réduit, seules les entrées sont retirées.
Un canvas vivant au centre
Un canvas WebGL est le seul spectacle de la page, et l’interface est disposée pour ne pas lui faire concurrence. L’interface autour reste plate, ce qui laisse le rendu porter la profondeur.
Les timings derrière section hero
Le budget d’animation est énoncé, 1.1s de transitions, des états de survol et de clic et un canvas animé. Rien ne bouge dans le design de section hero sans une valeur attachée. Rien ne s’anime pour lui-même dans le design de section hero.
Comment Interactive Discovery ordonne la première lecture
Ici, l’ordre est le design, car la séquence de la navigation, le badge d’annonce et la ligne de statistiques met l’offre avant la preuve, et l’écart entre eux tient à des sections de 100vh et des pas d’espacement de 28px. Un lecteur industrie reçoit l’offre avant les options.
Adapter section hero à 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 orange vif #E8702A sur vos propres médias. La substitution coûte moins cher que la composition, et c’est tout l’intérêt.
Questions fréquentes
Quelle est la longueur du prompt derrière Interactive Discovery?
Comptez 6 894 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.
Quelle part de Interactive Discovery dépend de React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Interactive Discovery 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.
Quelle part de Interactive Discovery est animée?
Les entrées et les changements d’état se situent dans la plage de 1.1s avec cubic-bezier(0.16,1,0.3,1) complétée d’une variante de mouvement réduit dans le brief. Ils sont déclenchés par des changements d’état plutôt que par une bibliothèque de scroll, et ils ne retardent jamais la lecture du texte.
