À propos de ce modèle
Mind AI donne à un produit de santé ou de bien-être un premier écran fini et les valeurs qui l’ont produit. La palette est #F6EAF2 en fond, #000000 pour le texte et indigo #A069C9 pour les accents, composée en Questrial. La livraison est en un seul fichier HTML autonome, capturée en 1920x1414 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 4.042s de transitions, cubic-bezier(.16,1.3,1) et un fond vidéo en boucle. Gardez-la ouverte pendant la rédaction, car le brief de 37 004 caractères est la partie qui se transfère à votre page.
Conçu pour
- Toute personne qui utilise un générateur IA et veut un brief contenant déjà un easing cubic-bezier(.16,1.3,1) au lieu de laisser le modèle décider.
- Empruntez la structure de landing page telle quelle et remplacez les textes ligne par ligne en vous appuyant sur un seul fichier HTML autonome.
- Ce design de landing page vise les équipes qui connaissent déjà un seul fichier HTML autonome et veulent simplement retrouver un breakpoint à 520px par écrit.
Ce qui est inclus
- Un bandeau de nav volontairement fin. La rangée concentre son contraste sur un seul élément, l’action en #A069C9, tandis que le nom de marque et les liens restent sur la couleur d’encre. Sous 520px, les liens se replient dans une surcouche plein écran. Les libellés tiennent sur une ligne à 520px, et l’élément actif se signale par la graisse et non par une pastille.
- Un seul clip fait le travail. Un clip de 5s en 1920x1414 fait le travail atmosphérique, le brief fixe son cadrage et laisse la typographie intacte par-dessus. La boucle est assez courte (5s) pour que l’œil la lise comme une texture et non comme une timeline. Exportez en 1920x1414 ou plus large pour garder un cadrage honnête.
- Fluide là où il faut. Le brief utilise un clamp entre 14px et 28px pour le titre, ce qui évite qu’une ligne longue casse mal. L’échelle étant bornée, la ligne display ne saute jamais d’un breakpoint à l’autre.
- Repli des liens à une largeur. Si votre page compte plus de sections, regroupez-les au lieu d’élargir la barre. La référence a été capturée en 1920x1414.
Animation et interaction
Une ambiance sans bibliothèque de scroll
Le clip de fond tourne 5s en 1920x1414 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. Parce qu’il est en sourdine, la boucle peut tourner sous le texte sans concurrencer le son ni l’attention.
Un canvas, pas une image
Le premier écran est construit par le navigateur plutôt que livré comme une image (un canvas WebGL). Le brief ne prévoit aucun échange d’image, donc la scène fait partie du premier rendu.
Le réagencement de landing page
Une échelle de bureau fixe aurait été plus simple. Le brief ajoute un clamp entre 14px et 28px, et c’est ce qui garde la ligne d’affichage proportionnée entre les largeurs. C’est la hiérarchie qui survit à la réorganisation.
Ce qui tient la route pour Santé
Mind AI est la référence de landing page pour un produit de santé ou de bien-être, et elle répond au problème que ce public a réellement. La palette reste disciplinée (#F6EAF2 et indigo #A069C9) et la typographie est composée en Questrial, donc rien dans la composition ne dépend d’une tendance empruntée. Quand vous briefez un build, c’est la partie à copier, une promesse au corps display et le détail de soutien tenu en dessous. Elle donne à un lecteur santé le chemin le plus court vers l’offre.
L’ordre de landing page
Placez votre propre texte dans le design de landing page et la séquence tient toujours, car les éléments de la navigation, le titre, le badge d’annonce, la ligne de statistiques et la liste de fonctionnalités ne sont pas interchangeables. Un lecteur santé reçoit l’offre avant les options.
Questions fréquentes
Pourquoi la fiche mentionne-t-elle un seul fichier HTML autonome?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Mind AI 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 Mind AI?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1920x1414, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Puis-je garder les transitions de Mind AI en changeant les durées?
Les transitions sont rattachées à des états de l’interface plutôt qu’à une chronologie de scroll, et elles se résolvent dans la plage 4.042s avec cubic-bezier(.16,1.3,1). Le brief en consigne les valeurs pour qu’un portage n’ait pas à les deviner.
