À propos de ce modèle
CozyPaws conserve sa trace de décision, puisque le brief de section hero fait 6 443 caractères. La palette se limite à blanc #EFFDF0 en fond, vert profond #1A3D1A pour le texte et orange vif #E86A10 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 limite à 0.8s de transitions, cubic-bezier(0.16, 1, 0.3, 1) et un fond vidéo en boucle. Traitez-la comme le brief de section hero pour une marque e-commerce, à faire tenir sous une reconstruction et pas seulement au premier regard.
Conçu pour
- Les fondateurs qui briefent une agence utiliseront le cadre 1460x1080 comme critère de recette pour la première série.
- Ce design est taillé pour les agences qui facturent à la série et veulent valider des sections de 70vh et des pas d’espacement de 60px avant la première.
- Ce design de section hero sert aux fondateurs qui ont besoin d’un seul écran pour prouver que le texte e-commerce peut porter 4,8s de vidéo en boucle.
Ce qui est inclus
- En haut, marque, liens et action unique. La rangée concentre son contraste sur un seul élément, l’action en #E86A10, tandis que le nom de marque et les liens restent sur la couleur d’encre. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #E86A10 est le seul élément de la barre à porter du gras.
- Des tailles fixées par le brief. Typographie et espacements sortent ici de la même liste, des sections de 70vh, des pas d’espacement de 60px, des transitions de 0.8s et un easing cubic-bezier(0.16, 1, 0.3, 1). Chaque valeur correspond à un seul rôle, un palier de taille, un espacement, un rayon ou une transition.
- La vidéo au calque inférieur. Le fond est une seule boucle de 4,8s en 1460x1080, recadrée en cover et laissée sans voile. Tout le reste flotte au-dessus, sur un calque supérieur. La boucle est assez courte (4,8s) pour que l’œil la lise comme une texture et non comme une timeline.
- Le corps display porte le ton. Les paliers de taille et l’interlettrage du brief donnent le ton ici, avec Inter à un corps display serré, puis une chute nette vers le texte secondaire. Le palier de légende est assez petit pour se placer sous un chiffre sans changer le rythme de la page. Gardez les paliers de taille même si vous changez de fonte.
Animation et interaction
Des durées courtes et nommées
Les changements d’état sont fixés à 0.8s, donc le retour des contrôles est une valeur de design et non un défaut du navigateur. L’easing est spécifié avec la durée (0.8s), donc une reconstruction ne peut pas substituer discrètement une autre sensation. Si vous changez l’easing, changez-le partout.
Le survol là où il sert
Chaque élément interactif ne fait qu’une chose (des états de survol sur les boutons et les liens plutôt que sur chaque carte), et c’est ce qui rend les états prévisibles. Les états viennent de la palette de la page et non d’un défaut de composant.
Les chiffres derrière section hero
La page contient plus de chiffres qu’elle n’en a l’air, et une reconstruction doit garder des sections de 70vh, des pas d’espacement de 60px, des transitions de 0.8s et un easing cubic-bezier(0.16, 1, 0.3, 1) en priorité, le reste peut bouger. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Comment CozyPaws ordonne la première lecture
Si votre page ouvre aujourd’hui sur les fonctionnalités, voici l’ordre à copier, la navigation, le titre, le badge d’annonce, la ligne de statistiques et la grille de cartes devant, le détail d’appui ensuite, et des sections de 70vh et des pas d’espacement de 60px pour régler la distance. Un lecteur e-commerce reçoit l’offre avant les options.
L’argument de section hero
6 443 caractères de brief produisent un écran sans remplissage. Les valeurs y sont explicites (des sections de 70vh et des pas d’espacement de 60px), et c’est pourquoi la composition tient encore quand les mots changent. CozyPaws énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Questions fréquentes
Le prompt de CozyPaws est-il une spécification aboutie ou un simple point de départ?
Comptez 6 443 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.
Pourquoi la fiche mentionne-t-elle React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que CozyPaws 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 CozyPaws est animée?
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 0.8s avec cubic-bezier(0.16, 1, 0.3, 1). 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.
