À propos de ce modèle
Playful Idea résout le problème de pied de page pour une agence ou un studio à partir d’un seul brief capturé. La couleur se réduit à #F0EEFA en fond et quasi-noir #080909 pour le texte, composée en Epilogue. La livraison est en un seul fichier HTML autonome, capturée en 1564x1080 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 2.54167s de transitions et un fond vidéo en boucle. C’est la référence qu’il faut pour un design de pied de page destiné à une agence ou un studio, quand le premier écran doit sembler intentionnel.
Conçu pour
- Écrivez votre propre titre, puis reconstruisez ce design de pied de page en un seul fichier HTML autonome avec les mesures intactes.
- Mettez un breakpoint à 700px dans la note de passation pour que la prochaine reconstruction n’ait pas à reparcourir la page.
- Équipes qui reprennent un design de pied de page agence repéré chez un concurrent et veulent un seul fichier HTML autonome dans le brief avant que quiconque choisisse un framework.
Ce qui est inclus
- Une navigation sur une seule ligne. La navigation tient sur une seule rangée, sans second niveau en dessous. Sous 700px, les liens se replient dans une surcouche plein écran. Sous 700px, les liens se replient au lieu de passer sur une seconde ligne.
- Un média sans surcouche. Un clip de 6,9s en 1564x1080 fait le travail atmosphérique, le brief fixe son cadrage et laisse la typographie intacte par-dessus. Une image d’attente en 1564x1080 tient la composition quand la lecture automatique est indisponible, la mise en page ne s’effondre donc jamais.
- La pastille d’annonce. Un badge, un message. La pastille se place au-dessus du titre en Epilogue au plus petit palier, et rien d’autre ne vient concurrencer cette position. La pastille occupe le plus petit palier du brief, elle se lit donc comme un libellé et non comme un second titre.
- L’échelle est bornée, pas étagée. La typographie est dimensionnée avec un clamp entre 14px et 17px plutôt qu’avec des paliers fixes, la ligne display reste donc proportionnée entre les breakpoints au lieu de sauter. Les contrôles restent assez grands pour être touchés et le texte garde son ordre de lecture à toute largeur.
Animation et interaction
La scène est le visuel
Un canvas WebGL fait le travail visuel sur le cadre 1564x1080, avec la typographie posée par-dessus ou à côté. Prévoyez un budget pour le rendu, car c’est l’élément qui coûtera le plus de frames sur une machine modeste.
Le son est derrière un contrôle
Le brief inclut de l’audio pour la composition en 1564x1080, coupé jusqu’à ce que le lecteur le demande, donc la page ne se met jamais à parler toute seule. L’audio est traité comme une couche optionnelle et non comme une partie de la composition.
Les chiffres derrière pied de page
C’est ce qui rend la référence réutilisable, une typographie de 14px à 17px, des sections de 100vh, une grille de 2 colonnes, des angles de 100px et des pas d’espacement de 30px. Rien n’est laissé à un réglage par défaut, une substitution qui garde ces chiffres garde donc la composition. Rien dans le design de pied de page ne dépend d’une valeur par défaut.
Par où commencer dans Playful Idea
Comparez avec un départ sur page blanche. Ici, le cadre (1564x1080) est fixé et le travail sur une typographie de 14px à 17px et des sections de 100vh est déjà fait, donc l’essentiel est de substituer, pas de composer. Gardez le cadre et l’échelle, le sujet est la partie qui doit changer.
L’ordre de pied de page
Le compromis demande de la patience, car la page retient le détail qu’une grille balayable livrerait tout de suite. Ce qu’elle gagne, c’est un premier écran où l’ordre de la navigation, le titre, le badge d’annonce, la ligne de statistiques et le clip de fond ne prête pas à confusion. Un lecteur agence reçoit l’offre avant les options.
Questions fréquentes
Puis-je reconstruire ce type de pied de page de Playful Idea avec une autre stack?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Playful Idea 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.
Pourquoi le prompt de Playful Idea n’est-il pas reproduit ici?
Tout ce qui est cité sur la page provient du brief capturé de 30 665 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Que recevez-vous en copiant le brief de Playful Idea?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1564x1080, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
