À propos de ce modèle
Avant toute reconstruction de landing page pour une marque e-commerce, lisez Coffee Rewards, qui publie ensemble la composition et la spécification. Le titre affiché est « Plum Parfait Latte », et le reste de landing page s’organise autour de lui. La couleur se réduit à orange profond #070402 en fond et #EDE4D8 pour le texte, composée en Helvetica Now Display. La livraison tient en Vite, une seule page, sans plugin ni outillage de build entre vous et le design. L’animation se limite à 0.7s de transitions, cubic-bezier(0.16, 1, 0.3, 1) et un fond vidéo en boucle, assez discrète pour que le texte reste au premier plan. Servez-vous-en comme référence quand vous construisez un design de landing page pour une marque e-commerce et que vous voulez une composition finie plutôt qu’un point de départ.
Conçu pour
- Prestataires qui récupèrent un design de landing page et veulent voir un cadre 1482x1080 dans le dépôt avant le premier commit.
- Ce design de landing page sert aux fondateurs qui ont besoin d’un seul écran pour prouver que le texte e-commerce peut porter 5,9s de vidéo en boucle.
- Quiconque briefe un modèle sur un design de landing page utilisera le prompt de 5 054 caractères comme point de départ.
Ce qui est inclus
- Mesuré, pas estimé à l’œil. La liste reste courte (des pas d’espacement de 16px, des transitions de 0.7s et un easing cubic-bezier(0.16, 1, 0.3, 1)), c’est pourquoi tout le système se vérifie à la main. Chaque valeur correspond à un seul rôle, un palier de taille, un espacement, un rayon ou une transition.
- L’image d’attente compte. Le média est un seul clip de 5,9s recadré en cover dans le cadre 1482x1080, il ne laisse donc jamais de bandes noires, quelle que soit la largeur. La boucle est assez courte (5,9s) pour que l’œil la lise comme une texture et non comme une timeline.
- L’échelle chute nettement. La typographie est Helvetica Now Display, 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 chiffres partagent la fonte d’interface, statistiques et libellés appartiennent donc au même système.
- Des tailles fixées par le brief. Les espacements sont cités de la même façon (des pas d’espacement de 16px, des transitions de 0.7s et un easing cubic-bezier(0.16, 1, 0.3, 1)), et non comme une échelle qui grandit toute seule.
Animation et interaction
Une boucle, pas une timeline
Un clip de 5,9s suffit à toute la couche d’ambiance, il joue derrière le texte, boucle sans coupure visible et ne réagit jamais au pointeur. Le clip est en sourdine et en inline, donc la première image est disponible sans interaction.
Des durées courtes et nommées
Une seule durée couvre les interactions (0.7s en cubic-bezier(0.16, 1, 0.3, 1)), et c’est ce qui fait que survol et pression se lisent comme un seul système. L’easing est spécifié avec la durée (0.7s), donc une reconstruction ne peut pas substituer discrètement une autre sensation. Ne livrez pas le défaut du navigateur.
L’argument de landing page
Une couche teintée sur le média aurait été la solution facile. Le brief s’en passe. Le média est une boucle de 5,9s en 1482x1080. Le texte tient quand même, parce que le cadre reste calme grâce à des pas d’espacement de 16px et des transitions de 0.7s. Elle donne à un lecteur e-commerce le chemin le plus court vers l’offre.
Ce qui bouge dans Coffee Rewards
Une bibliothèque d’animations prêtes à l’emploi donnerait plus de mouvement. Le brief en demande moins, 0.7s de transitions, une boucle média de 5,9s et un canvas animé, sans rien de décoratif en plus. Rien ne s’anime pour lui-même dans le design de landing page.
Les chiffres derrière landing page
Le brief est une spécification, pas un moodboard. Il fixe des pas d’espacement de 16px, des transitions de 0.7s et un easing cubic-bezier(0.16, 1, 0.3, 1), puis nomme le média en 1482x1080 avec une boucle de 5,9s. Ce niveau de détail explique pourquoi le design survit à une reconstruction, changez le texte et les relations tiennent toujours. Rien dans le design de landing page ne dépend d’une valeur par défaut.
Questions fréquentes
Le prompt de Coffee Rewards 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 1482x1080, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Puis-je reconstruire ce type de landing page de Coffee Rewards avec une autre stack?
Non. Le brief est une spécification, pas une liste de dépendances. Il a été écrit pour Vite, mais la même composition se reconstruit avec ce que vous utilisez déjà. La stack est nommée pour que vous sachiez comment la référence a été produite.
Puis-je utiliser Coffee Rewards 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 1482x1080.
