À propos de ce modèle
Prisma Creative Studio est la référence landing page pour une agence ou un studio, et le brief qui l’accompagne est une spécification de construction complète, pas un mood board. Le titre affiché est « I have skills in color grading, visual effects, and narrative design », et le reste de landing page s’organise autour de lui. La palette se limite à noir #101010 en fond et blanc #E1E0CC pour le texte, et la typographie est Instrument Serif. La fiche nomme la stack qui a produit la page (React et Tailwind CSS) au lieu de la passer sous silence. La page s’en tient à 0.08s de transitions. C’est la référence qu’il faut pour un design de landing page destiné à une agence ou un studio, quand le premier écran doit sembler intentionnel.
Conçu pour
- Équipes growth qui rhabillent un design de landing page pour une agence ou un studio et veulent garder le cadre 455x800 pendant que le texte de l’offre change.
- Quiconque briefe un modèle sur un design de landing page utilisera le prompt de 8 432 caractères comme point de départ.
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de landing page dont le titre doit rester aussi long que celui de Prisma Creative Studio.
Ce qui est inclus
- En haut, marque, liens et action unique. La barre tient sur une rangée de texte et une action, mesurée à des pas d’espacement de 10px et des transitions de 0.08s pour se lire comme un filet et non comme un bandeau. La barre se pose sur la composition 455x800 sans fond propre, la vidéo court donc bord à bord en dessous.
- L’échelle est le style. Les fontes reçoivent des rôles au lieu d’être mélangées, Instrument Serif porte à la fois le display et l’interface. La fonte est associée à des tailles fixes, ce qui maintient le lien entre la ligne display et le texte d’interface.
- Une ligne, aucun tiroir. Si votre page compte plus de sections, regroupez-les au lieu d’élargir la barre. La référence a été capturée en 455x800.
- Une seule échelle, texte et cadre. Les tailles sont citées plutôt qu’héritées, des pas d’espacement de 10px et des transitions de 0.08s. Changez la fonte ou le texte, ces relations tiennent toujours. Aucune valeur intermédiaire n’est inventée entre les valeurs nommées, la liste de mesures est tout le système.
Animation et interaction
Une durée pour les contrôles
L’animation des contrôles est courte et répétable, 0.08s à chaque changement d’état. L’easing est spécifié avec la durée (0.08s), donc une reconstruction ne peut pas substituer discrètement une autre sensation.
Un seul comportement de scroll
C’est la position de scroll, et non un minuteur, qui pilote la composition, les calques de fond se déplacent à une vitesse différente du premier plan. Rien dans l’effet ne change l’ordre de lecture des sections. Testez avec le mouvement réduit activé.
Le réagencement de landing page
Une échelle de bureau fixe aurait été plus simple. Le brief ajoute un clamp entre 100px et 10px, et c’est ce qui garde la ligne d’affichage proportionnée entre les largeurs. La version mobile est une décision, pas un repli.
Pourquoi cette composition fonctionne pour agence
La promesse est faite une fois, à la taille d’affichage. « I have skills in color grading, visual effects, and narrative design » fait ce travail dès la première image. Tout le reste de landing page s’ordonne autour d’elle, la navigation, le badge d’annonce, la grille de cartes et le clip de fond, et aucune seconde promesse ne vient disputer la première lecture. Elle donne à un lecteur agence le chemin le plus court vers l’offre.
Par où commencer dans Prisma Creative Studio
Changez d’abord le texte et les médias, la couleur ensuite, la mise en page en dernier. Le cadre 455x800 et l’échelle Instrument Serif tiennent la page, faites donc vos substitutions autour d’eux plutôt qu’à travers eux. Gardez le cadre et l’échelle, le sujet est la partie qui doit changer.
Questions fréquentes
Le prompt de Prisma Creative Studio est-il une spécification aboutie ou un simple point de départ?
Comptez 8 432 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 Prisma Creative Studio 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.
Qu’est-ce qui déclenche les animations de Prisma Creative Studio?
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.08s. Le brief en consigne les valeurs pour qu’un portage n’ait pas à les deviner.
