À propos de ce modèle
Quantum Lucid donne à un produit IA ou SaaS un premier écran fini et les valeurs qui l’ont produit. La couleur se réduit à neutre #F2F2F2 en fond, quasi-noir #000000 pour le texte et assombri #38C6EC pour les accents, composée en Figtree. La livraison est en un seul fichier HTML autonome, capturée en 1920x1412 pour que le cadre soit fixé avant la première ligne de code. L’animation se cantonne à 1200ms de transitions, cubic-bezier(.22, 1.36, 1) et un fond vidéo en boucle. Gardez-la ouverte pendant la rédaction, car le brief de 20 249 caractères est la partie qui se transfère à votre page.
Conçu pour
- Mettez un easing cubic-bezier(.22, 1.36, 1) dans la note de passation pour que la prochaine reconstruction n’ait pas à reparcourir la page.
- Ce design de landing page sert aux équipes qui doivent justifier un seul fichier HTML autonome auprès de quelqu’un qui n’était pas à la réunion de lancement.
- Ce design de landing page vise les équipes qui connaissent déjà un seul fichier HTML autonome et veulent simplement retrouver un breakpoint à 216px par écrit.
Ce qui est inclus
- Un bandeau de nav volontairement fin. Les liens tiennent sur une ligne à un seul corps, et l’action en #38C6EC ferme la rangée à droite, l’œil finit donc là où la navigation s’arrête. Sous 216px, les liens se replient au lieu de passer sur une seconde ligne.
- Vidéo plein cadre, aucun panneau. La vidéo en 1920x1412 tourne en boucle 6,7s derrière le texte, muette et en lecture inline, sans aucun voile entre les deux. Une image d’attente en 1920x1412 tient la composition quand la lecture automatique est indisponible, la mise en page ne s’effondre donc jamais.
- Deux fontes, des rôles clairs. Ici, la typographie est le système de style, avec Figtree au corps display, la même fonte sur toute l’interface, et aucune seconde couleur d’accent pour faire le travail. Un changement de fonte reste sûr tant que les tailles et les graisses restent là où le brief les a placées.
- Les liens avant l’action. Limitez-vous à quatre ou cinq liens, la rangée est dimensionnée pour ce nombre. La référence a été capturée en 1920x1412.
Animation et interaction
Rythme court, timings cohérents
Les transitions sont fixées à 1200ms en cubic-bezier(.22, 1.36, 1), et c’est la durée à laquelle les contrôles sont tenus. Rien n’attend une position de scroll, donc la page répond dès que vous la touchez.
Du survol, mais avec parcimonie
La page ne répond que là où l’on peut agir (des états de survol sur les boutons et les liens plutôt que sur chaque carte et des onglets ou un accordéon qui échangent le contenu sur place). Les cibles interactives sont assez grandes pour être touchées et le traitement du pointeur reste cohérent entre elles. Gardez les effets de pointeur sur les contrôles.
Pourquoi le brief SaaS tient
La plupart des pages SaaS ajoutent une section de plus quand le premier écran est faible. Celle-ci fait l’inverse et retire des options, la navigation, le titre, le badge d’annonce, la ligne de statistiques et la grille de cartes dans cet ordre, sans rien qui répète l’offre. Elle donne à un lecteur SaaS le chemin le plus court vers l’offre.
Comment Quantum Lucid ordonne la première lecture
Quand un lecteur SaaS arrive sur un écran unique, il balaie avant de lire. La mise en page y répond en réglant la navigation, le titre, le badge d’annonce, la ligne de statistiques et la grille de cartes pour le balayage, des sections de 100vh et des angles de 26px gardant chaque étape distincte. Un lecteur SaaS reçoit l’offre avant les options.
Adapter landing page à votre marque
Comparez avec un départ sur page blanche. Ici, le cadre (1920x1412) est fixé et le travail sur des sections de 100vh et des angles de 26px est déjà fait, donc l’essentiel est de substituer, pas de composer. Si un nouvel élément n’aide pas à expliquer la promesse ou l’action suivante, sa place est sous la ligne de flottaison.
Questions fréquentes
Quelle part de Quantum Lucid dépend de un seul fichier HTML autonome?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Quantum Lucid 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 Quantum Lucid?
Comptez 20 249 caractères pour le brief capturé, qui décrit le cadre, l’échelle typographique, la palette et les transitions. Le copier vous donne ce texte tel quel, et l’envoyer à Studio prépare la même demande avec la page déjà décrite.
Qu’est-ce qui déclenche les animations de Quantum Lucid?
Les entrées et les changements d’état se situent dans la plage de 1200ms en cubic-bezier(.22, 1.36, 1) complétée d’une variante de mouvement réduit dans le brief. Ils sont déclenchés par des changements d’état plutôt que par une bibliothèque de scroll, et ils ne retardent jamais la lecture du texte.
