À propos de ce modèle
PROMPT donne à une agence ou un studio un premier écran fini et les valeurs qui l’ont produit. La palette se limite à noir #000000 en fond et blanc #FFFFFF pour le texte, et la typographie est Inter Tight. La livraison tient en React et Tailwind CSS, une seule page, sans plugin ni outillage de build entre vous et le design. L’animation se résume à 80ms de transitions et un fond vidéo en boucle. Gardez-la ouverte pendant la rédaction, car le brief de 13 186 caractères est la partie qui se transfère à votre page.
Conçu pour
- Reprenez le cadre 1472x1080 et des sections de 100vh et des pas d’espacement de 32px de ce design de section hero avant tout le reste.
- Des responsables marketing produit qui ont besoin qu’une section hero reste lisible avec 5,7s de vidéo en boucle derrière le texte.
- 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 PROMPT.
Ce qui est inclus
- Un bandeau de nav volontairement fin. La barre tient sur une rangée de texte et une action, mesurée à des sections de 100vh et des pas d’espacement de 32px pour se lire comme un filet et non comme un bandeau. La barre se pose sur la composition 1472x1080 sans fond propre, la vidéo court donc bord à bord en dessous.
- Le balayage prime sur la lecture. La grille fait la structure, des panneaux de même taille, composés en Inter Tight, disposés pour que l’œil aille vers la droite plutôt que vers le bas. L’accent dans la grille ne marque qu’un élément au plus, les panneaux ne se concurrencent donc pas.
- La preuve sur une seule rangée. Une bande de chiffres compacte porte les affirmations qui exigeraient sinon un paragraphe, ce qui évite de transformer section hero en liste de fonctionnalités. Les libellés sont composés à une seule taille, un libellé long ne change donc pas la hauteur de la rangée. Supprimez un chiffre avant de réduire le libellé.
- Un pied de page qui porte la marque. Les liens sont regroupés en colonnes avec le nom de marque dans son propre bloc, ce qui garde lisible un pied de page long au lieu de le transformer en liste. Les colonnes s’alignent sur la même grille que la page au-dessus, le pied de page paraît donc issu du même design. Regroupez les liens, ne les déversez pas.
Animation et interaction
Une branche plus calme est prévue
Le brief prévoit une branche prefers-reduced-motion, donc l’animation d’entrée et de boucle peut être coupée sans perdre la mise en page. Copiez cette branche telle quelle dans votre build. La branche fait partie du brief et non d’une réflexion après coup. La référence a été capturée en 1472x1080.
Des changements d’état minutés
Le budget d’animation est faible et explicite, 80ms, appliqué aux changements d’état plutôt qu’aux entrées. La même durée est réutilisée sur tous les contrôles, ce qui garde les interactions dans un seul système.
Pourquoi le brief agence tient
La plupart des pages agence ajoutent une section de plus quand le premier écran est faible. Celle-ci fait l’inverse et retire des options, la navigation, le badge d’annonce, la ligne de statistiques, la grille de cartes et la liste de fonctionnalités dans cet ordre, sans rien qui répète l’offre. PROMPT énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
L’ordre de section hero
Si votre page ouvre aujourd’hui sur les fonctionnalités, voici l’ordre à copier, la navigation, le badge d’annonce, la ligne de statistiques, la grille de cartes et la liste de fonctionnalités devant, le détail d’appui ensuite, et des sections de 100vh et des pas d’espacement de 32px pour régler la distance. Un lecteur agence reçoit l’offre avant les options.
Le réagencement de section hero
Responsive signifie ici que l’échelle change et que la séquence non, la section est tenue à 100vh, la navigation se replie en menu mobile et l’animation prévoit une variante de mouvement réduit, et l’ordre de lecture reste là où le brief l’a placé. Rien d’important n’est supprimé en largeur étroite.
Questions fréquentes
Quelle est la longueur du prompt derrière PROMPT?
Comptez 13 186 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.
Puis-je reconstruire ce type de section hero de PROMPT avec une autre stack?
La fiche indique React et Tailwind CSS pour la provenance, parce que PROMPT 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.
Puis-je garder les transitions de PROMPT en changeant les durées?
L’animation est décrite avec le même niveau de détail que la mise en page, et les changements d’état se stabilisent dans la plage 80ms. Portez la composition d’abord et les durées ensuite, car il est plus facile de les caler une fois la mise en page en place.
