À propos de ce modèle
Task Engine donne à une marque e-commerce un premier écran fini et les valeurs qui l’ont produit. La couleur se réduit à blanc #F0F0F0 en fond et noir #0D0D0D pour le texte, composée en Plus Jakarta Sans. La livraison est en un seul fichier HTML autonome, capturée en 2104x1080 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 2400ms de transitions, cubic-bezier(.16,1.3,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 landing page e-commerce, partez de cette composition et remplacez le sujet.
Conçu pour
- Mettez un easing cubic-bezier(.16,1.3,1) dans la note de passation pour que la prochaine reconstruction n’ait pas à reparcourir la page.
- Équipes qui montent un design de landing page pour une marque e-commerce et doivent consigner un seul fichier HTML autonome par écrit avant de chiffrer.
- Cette composition convient aux agences qui défendent des projets e-commerce et doivent citer un breakpoint à 700px dès la première réponse au client.
Ce qui est inclus
- Mesuré, pas estimé à l’œil. La liste reste courte (des sections de 100vh, des pas d’espacement de 30px, des transitions de 2400ms et un easing cubic-bezier(.16,1.3,1)), c’est pourquoi tout le système se vérifie à la main. La plus petite et la plus grande valeur de cette liste bornent la plage dans laquelle travaille la composition.
- Le média derrière la typographie. La vidéo en 2104x1080 tourne en boucle 10,6s derrière le texte, muette et en lecture inline, sans aucun voile entre les deux. La boucle est assez courte (10,6s) pour que l’œil la lise comme une texture et non comme une timeline.
- La typographie fait le style. La typographie est Plus Jakarta Sans en haut de l’échelle, le texte secondaire tombe bien en dessous, la hiérarchie n’a donc pas besoin de couleur pour se lire. Les graisses sont spécifiées par rôle, la hiérarchie ne dépend donc pas d’une approximation au moment du build.
- Les chiffres portés jusqu’au build. Les espacements sont cités de la même façon (des sections de 100vh, des pas d’espacement de 30px, des transitions de 2400ms et un easing cubic-bezier(.16,1.3,1)), et non comme une échelle qui grandit toute seule.
Animation et interaction
Des durées courtes et nommées
Ici, l’animation se mesure en millisecondes, 2400ms avec cubic-bezier(.16,1.3,1). C’est tout le budget d’animation, et il est dépensé sur des changements d’état plutôt que sur une timeline de scroll. Rien n’attend une position de scroll, donc la page répond dès que vous la touchez.
Une boucle, pas une timeline
Le clip de fond tourne 10,6s en 2104x1080 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. Le clip est assez court pour boucler sans couture visible, ce qui compte plus que sa résolution.
Pourquoi le brief e-commerce tient
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 10,6s en 2104x1080. Le cadre reste sobre et le lecteur reste sur le texte grâce à des sections de 100vh et des pas d’espacement de 30px. Task Engine énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Le réagencement de landing page
Responsive signifie ici que l’échelle change et non la hiérarchie, la mise en page bascule à 700px, la section est tenue à 100vh et l’animation prévoit une variante de mouvement réduit. Le texte reste au-dessus de la ligne de flottaison, les contrôles restent assez grands pour être touchés et le mouvement réduit est respecté. C’est la hiérarchie qui survit à la réorganisation.
Par où commencer dans Task Engine
Si votre marque porte une palette plus lourde, testez-la sur le cadre avant de valider. blanc #F0F0F0 porte la page, donc un accent plus sombre demande plus de contraste que dans la référence. La composition est la partie réutilisable, et elle survit à une autre marque.
Questions fréquentes
Quelle part de Task Engine dépend de un seul fichier HTML autonome?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Task Engine 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 Task Engine n’est-il pas reproduit ici?
Tout ce qui est cité sur la page provient du brief capturé de 14 503 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Le prompt de Task Engine est-il une spécification aboutie ou un simple point de départ?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 2104x1080, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
