À propos de ce modèle
Lisez Luminex comme une spécification de section hero, dont les valeurs ont été écrites avant la construction de la page. La palette est bleu profond #010A12 en fond, blanc #CFDDD8 pour le texte et bleu #143F62 pour les accents. La livraison est en React, capturée en 800x600 pour que le cadre soit fixé avant la première ligne de code. Cette référence s’adresse à un produit IA ou SaaS qui veut un premier écran réglé avant le début du build.
Conçu pour
- Cette base est calibrée pour un fondateur seul qui livre un design de section hero pour un produit IA ou SaaS, sans design system derrière.
- Quiconque briefe un modèle sur un design de section hero utilisera le prompt de 162 caractères comme point de départ.
- Cette page est dimensionnée pour les chefs de produit qui veulent un design de section hero cadré sur un sprint et aucun nouveau visuel à produire.
Ce qui est inclus
- Une barre sans superflu. Une courte suite de liens et une seule action se posent au-dessus de section hero, tenues à un cadre 800x600 pour ne jamais concurrencer la composition en dessous. La barre se pose sur la composition 800x600 sans fond propre, la vidéo court donc bord à bord en dessous. La barre compte une poignée d’éléments, elle se reconstruit donc sans bibliothèque de composants.
- La saturation à un seul endroit. La palette se réduit à un fond et un signal (bleu profond #010A12 et bleu #143F62), la seconde couleur étant réservée aux actions. Le contraste entre #143F62 et bleu profond #010A12 est ce qui rend l’accent lisible en petite taille.
- Les liens avant l’action. Reprenez ce motif quand il vous faut une navigation qui tient sous un premier écran chargé.
- Une couleur avec un rôle défini. Tout le reste repose sur bleu profond #010A12, ce qui garde lisible une palette saturée.
Animation et interaction
Une animation qui reste discrète
Il n’y a aucune bibliothèque de scroll ici, la composition en 800x600 reste immobile et seuls les éléments qui vous répondent bougent. Seuls les éléments qui répondent au pointeur bougent.
Presque aucune animation
Le brief laisse l’animation de côté et laisse la mise en page en 800x600 porter la page, les états de survol et d’appui étant les seuls changements. Gardez le mouvement sur les contrôles.
Comment Luminex ordonne la première lecture
Rien ici ne concurrence la première décision. Le contenu d’appui attend sous la ligne de flottaison, et rien d’autre que la navigation n’occupe le haut de la page. Un lecteur SaaS reçoit l’offre avant les options.
Le réagencement de section hero
La composition desktop est résolue contre 800x600, et la mise en page étroite est dessinée au lieu d’être héritée, l’échelle est fluide plutôt que par paliers. L’animation dispose d’une branche reduced-motion et le média porte une image d’attente, la page communique donc encore quand la lecture automatique est indisponible. L’ordre est la dernière chose à changer.
Par où commencer dans Luminex
Là où un thème vous donne des composants, ce brief vous donne une composition, un cadre 800x600 et un cadre média, le sujet restant à votre charge. Réécrivez la ligne affichée avant de toucher à la couleur.
Questions fréquentes
Puis-je publier une page reconstruite d’après Luminex sans mentionner la source?
Le prompt a été publié publiquement par motionsites.ai, et l’aperçu affiché ici est leur rendu. Utilisez-le comme référence pour la structure et l’animation, vérifiez les conditions du site source, puis reconstruisez la composition avec vos propres textes, médias et palette avant de la livrer.
Le prompt de Luminex 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 800x600, 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 section hero de Luminex avec une autre stack?
La fiche indique React pour la provenance, parce que Luminex 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.
