À propos de ce modèle
Audio Showcase est un design de section hero pour une marque lifestyle, livré avec les instructions qui l’ont produit. « Press 04. Vernal woods » est la ligne que la mise en page doit porter. La palette repose sur bleu #216CD1 en fond et gris #C7D5D5 pour le texte, et la page est composée en Helvetica, Arial. 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.7s de transitions et cubic-bezier(0.22, 1, 0.36, 1), assez discrète pour que le texte reste au premier plan. Si vous préparez un brief pour section hero lifestyle, partez de cette composition et remplacez le sujet.
Conçu pour
- Les fondateurs qui briefent une agence utiliseront le cadre 640x474 comme critère de recette pour la première série.
- Quiconque briefe un modèle sur un design de section hero utilisera le prompt de 6 927 caractères comme point de départ.
- 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 Audio Showcase.
Ce qui est inclus
- Repli des liens à une largeur. Une barre fine se pose en tête de section hero, avec le nom de marque à gauche et les liens composés en Helvetica, Arial, si bien que la composition se lit d’abord comme du contenu, la barre ensuite. Une surcouche mobile prend le relais sous le breakpoint tablette. La barre se pose sur la composition 640x474 sans fond propre, la vidéo court donc bord à bord en dessous.
- Rangée du haut, une action. Une seule action par barre. La référence a été capturée en 640x474.
- Une seule échelle, texte et cadre. Les valeurs sont la spécification, des pas d’espacement de 20px, des transitions de 0.7s et un easing cubic-bezier(0.22, 1, 0.36, 1), relevées sur 640x474 et non déduites d’une capture d’écran. La typographie et la mise en page partagent les mêmes pas, rien ne dérive donc quand l’une des deux est remplacée.
- La preuve en haut de l’écran. Les chiffres sont composés comme du texte et non dans une carte, avec Helvetica, Arial au corps display et des libellés un palier en dessous. Le palier des libellés est cité dans le brief, il reste donc sous les chiffres après une substitution.
Animation et interaction
Des durées en millisecondes
Les changements d’état sont fixés à 0.7s, 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.7s), donc une reconstruction ne peut pas substituer discrètement une autre sensation.
La profondeur par le rendu
La pièce maîtresse est rendue en direct (un canvas WebGL) plutôt que livrée en image, donc la composition en 640x474 réagit au viewport au lieu de rester derrière lui. Le brief garde l’interface sobre autour du canvas pour que la scène soit le seul spectacle.
Pourquoi le brief lifestyle tient
La retenue coûte de la place pour la preuve dans le premier écran. Ce brief accepte ce coût et dépense le premier écran sur l’offre, en fixant des pas d’espacement de 20px et des transitions de 0.7s pour qu’une section de preuve s’ajoute plus bas sans reprise. Elle donne à un lecteur lifestyle le chemin le plus court vers l’offre.
Comment Audio Showcase ordonne la première lecture
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, le badge d’annonce, la ligne de statistiques et la grille de cartes et dans l’espacement réglé par des pas d’espacement de 20px et des transitions de 0.7s. Un lecteur lifestyle reçoit l’offre avant les options.
Le réagencement de section hero
La plupart du travail responsive s’arrête à masquer des éléments. Ici, la mise en page change de forme, la navigation se replie en menu mobile et l’animation prévoit une variante de mouvement réduit, et rien d’important n’est supprimé pour faire tenir le premier écran. L’échelle change avec le viewport, la séquence non.
Questions fréquentes
Quelle est la longueur du prompt derrière Audio Showcase?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 640x474, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Puis-je reconstruire ce type de section hero de Audio Showcase avec une autre stack?
La fiche indique React et Tailwind CSS pour la provenance, parce que Audio Showcase 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 Audio Showcase est animée?
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 0.7s en cubic-bezier(0.22, 1, 0.36, 1). Le brief en consigne les valeurs pour qu’un portage n’ait pas à les deviner.
