À propos de ce modèle
Tenlas Footer conserve sa trace de décision, puisque le brief de pied de page fait 6 053 caractères. Elle ouvre sur « Take control of your productivity today » et donne à cette ligne tout le cadre au lieu de la réduire à une carte. La palette est noir #050505 en fond, blanc #F5F5F2 pour le texte et jaune vif #DBFF00 pour les accents, composée en Inter. La construction repose sur Tailwind et JavaScript vanilla. Chaque mesure y est écrite, et c’est ce qui la rend réutilisable. L’animation se résume à 50ms 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é à un produit IA ou SaaS, quand le premier écran doit sembler intentionnel.
Conçu pour
- Transmettez Tailwind et JavaScript vanilla à l’ingénieur avec le cadrage 1920x1556 joint, puis laissez-le reconstruire.
- Ce design de pied de page sert aux designers qui doivent transmettre à un ingénieur un build en Tailwind et JavaScript vanilla et veulent l’animation écrite noir sur blanc.
- Si la reconstruction part de Tailwind et JavaScript vanilla, relevez d’abord une typographie de 14px à 18px et des sections de 50vh et laissez la palette tranquille jusqu’à ce que la grille tienne.
Ce qui est inclus
- Une barre de navigation discrète. La barre est l’élément le plus discret de la composition, avec le nom de marque, une courte rangée de liens et une action en #DBFF00, le tout au plus petit corps de l’échelle du brief. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #DBFF00 est le seul élément de la barre à porter du gras. Testez la barre sur vos propres médias avant de lui donner un fond.
- Mesuré contre le viewport. Rien dans la mise en page n’est laissé à l’impression, le brief cite une typographie de 14px à 18px, des sections de 50vh, des pas d’espacement de 18px et des transitions de 50ms et le build doit atteindre ces valeurs. Les valeurs étant fixes, une substitution change l’aspect sans changer le rythme.
- La boucle sert de fond. Le brief spécifie la vidéo en 1920x1556 avec une boucle de 8,8s, et chaque élément de texte est placé contre ce cadre. La boucle est assez courte (8,8s) pour que l’œil la lise comme une texture et non comme une timeline.
- En haut, marque, liens et action unique. La barre se pose sur la composition 1920x1556 sans fond propre, la vidéo court donc bord à bord en dessous.
Animation et interaction
Tout le budget d’animation
Une seule durée couvre les interactions (50ms), et c’est ce qui fait que survol et pression se lisent comme un seul système. Les timings courts font que la page semble conçue, un réglage par défaut trop lent annulerait la composition.
Le survol là où il sert
L’interaction reste locale à chaque contrôle (des états de survol sur les boutons et les liens plutôt que sur chaque carte), donc rien d’autre sur la page ne bouge. Les cibles interactives sont assez grandes pour être touchées et le traitement du pointeur reste cohérent entre elles. Moins d’états, tous spécifiés.
Adapter pied de page à votre marque
Le compromis porte sur ce qui reste reconnaissable. Gardez trop de Tenlas Footer et la page se lit comme celle d’un autre, gardez les chiffres et changez le contenu, et elle se lit comme la vôtre. Le cadre et l’échelle sont ce qu’il faut laisser tranquilles.
Ce qui bouge dans Tenlas Footer
Vous pourriez poser une bibliothèque de presets sur cette composition, elle paraîtrait plus chargée, pas meilleure. Le brief garde 50ms de transitions, une boucle média de 8,8s et une apparition au scroll et dépense le budget là. Rien ne s’anime pour lui-même dans le design de pied de page.
Lire Tenlas Footer comme une spécification
Démontez la composition et les valeurs continuent de décrire pied de page, avec une typographie de 14px à 18px et des sections de 50vh pour le cadre et le rythme en dessous. Rien dans le design de pied de page ne dépend d’une valeur par défaut.
Questions fréquentes
Pourquoi la fiche mentionne-t-elle Tailwind et JavaScript vanilla?
La fiche indique Tailwind et JavaScript vanilla pour la provenance, parce que Tenlas 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.
Quelle est la longueur du prompt derrière Tenlas Footer?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1920x1556, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Comment gérer les médias de Tenlas Footer dans un projet client?
Le brief est une description, pas une autorisation de redistribuer les ressources d’un tiers. Gardez la structure et les chiffres, remplacez les médias et les marques, et citez la source si un client demande d’où vient la mise en page. La référence a été capturée en 1920x1556.
