À propos de ce modèle
Peakflow Footer est la référence pied de page pour un produit IA ou SaaS, et le brief qui l’accompagne est une spécification de construction complète, pas un mood board. La couleur se réduit à noir #111111 en fond et blanc #FAFAFA pour le texte, composée en Inter. La fiche nomme la stack qui a produit la page (Tailwind CSS) au lieu de la passer sous silence. L’animation se limite à 100ms de transitions, cubic-bezier(0.5, 0, 0, 1) et un fond vidéo en boucle, assez discrète pour que le texte reste au premier plan. Si vous préparez un brief pour pied de page SaaS, partez de cette composition et remplacez le sujet.
Conçu pour
- Équipes qui montent un design de pied de page pour un produit IA ou SaaS et doivent consigner un cadre 1920x1470 par écrit avant de chiffrer.
- Les responsables de studio qui mènent plusieurs projets de front utiliseront ce design de pied de page comme le motif que toutes les autres pages recopient.
- Des responsables marketing produit qui ont besoin qu’une pied de page reste lisible avec 7,9s de vidéo en boucle derrière le texte.
Ce qui est inclus
- Mesuré, pas estimé à l’œil. Rien ici n’est estimé à l’œil. La spécification fixe des pas d’espacement de 30px, des transitions de 100ms et un easing cubic-bezier(0.5, 0, 0, 1), et le reste de la mise en page découle de ces valeurs. Les valeurs étant fixes, une substitution change l’aspect sans changer le rythme.
- Un seul média porte l’ambiance. Un unique clip muet en boucle remplit le cadre en 1920x1470 sur 7,9s, cadré en cover avec le texte empilé par-dessus. Le brief écarte toute surcouche du fond vidéo pour ne pas en ternir les couleurs. Une image d’attente en 1920x1470 tient la composition quand la lecture automatique est indisponible, la mise en page ne s’effondre donc jamais.
- L’échelle chute nettement. La typographie est Inter, et le brief assigne un rôle à la fonte plutôt que de mélanger pour varier. Graisses, interlettrage et paliers de taille sont spécifiés, la hiérarchie survit donc à un remplacement. Les paliers de taille sont des valeurs fixes, c’est ce qui permet de changer de fonte en gardant la même hiérarchie. Une seule fonte, des rôles clairs.
- Un champ, une action. Il n’y a qu’une décision à prendre ici, remplir le formulaire ou partir. Tout le reste de l’écran soutient cette décision. Les états d’erreur et de focus sont spécifiés au lieu d’être laissés au navigateur.
Animation et interaction
Une boucle, pas une timeline
Le clip de fond tourne 7,9s en 1920x1470 sur une boucle sans fin, en sourdine et en inline, donc la page reste en mouvement pendant que l’attention du lecteur est sur le texte. Aucune bibliothèque de scroll n’est nécessaire, parce que le seul mouvement d’ambiance est le média lui-même. Rien d’autre sur la page n’anime en continu, donc le média est le seul élément qui demande l’attention.
Tout le budget d’animation
Le brief fixe la transition à 100ms, donc une reconstruction ne peut pas lui substituer un défaut plus lent. Les durées sont assez courtes pour que le retour se lise comme une réponse et non comme une animation. Des changements d’état rapides, aucune timeline de scroll.
Ce qui fonctionne dans pied de page
Supposez que votre média soit plus fort que votre texte. C’est le cas pour lequel cette composition est faite. Le média est une boucle de 7,9s en 1920x1470. Le cadre reste sobre et le lecteur reste sur le texte grâce à des pas d’espacement de 30px et des transitions de 100ms. Elle donne à un lecteur SaaS le chemin le plus court vers l’offre.
Les chiffres derrière pied de page
Les chiffres précis vieillissent, car une valeur qui convient à 1920x1470 ne conviendra pas forcément à votre cadre. Le brief énonce quand même des pas d’espacement de 30px et des transitions de 100ms, parce qu’une valeur énoncée se change plus facilement qu’une valeur implicite. Rien dans le design de pied de page ne dépend d’une valeur par défaut.
Les timings derrière pied de page
L’animation est ici un ensemble de décisions et non une bibliothèque, 100ms de transitions, une boucle média de 7,9s et une apparition au scroll, et rien ne s’anime au scroll. Le résultat est une page qui semble écrite, des durées courtes, une seule entrée et des changements d’état qui confirment une action au lieu de la décorer. Rien ne s’anime pour lui-même dans le design de pied de page.
Questions fréquentes
Comment cette fiche de Peakflow Footer est-elle organisée?
Tout ce qui est cité sur la page provient du brief capturé de 3 693 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Que contient réellement le brief derrière Peakflow Footer?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1920x1470, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Faut-il Tailwind CSS pour reconstruire Peakflow Footer?
La fiche indique Tailwind CSS pour la provenance, parce que Peakflow Footer 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.
