À propos de ce modèle
Aetheris Voyage est un design de section hero pour une marque de voyage, livré avec les instructions qui l’ont produit. Elle ouvre sur « Venture Past Our Sky Across the Universe » et donne à cette ligne tout le cadre au lieu de la réduire à une carte. La palette repose sur noir #181719 en fond et orange sourd #ECD9C1 pour le texte, et la page est composée en Instrument Serif. La livraison est en React et Tailwind CSS, capturée en 800x570 pour que le cadre soit fixé avant la première ligne de code. L’animation se cantonne à 100ms de transitions et un fond vidéo en boucle. Traitez-la comme le brief de section hero pour une marque de voyage, à faire tenir sous une reconstruction et pas seulement au premier regard.
Conçu pour
- Des responsables marketing produit qui ont besoin qu’une section hero reste lisible avec 8,8s de vidéo en boucle derrière le texte.
- Quiconque briefe un modèle sur un design de section hero utilisera le prompt de 10 190 caractères comme point de départ.
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de section hero dont le titre doit rester aussi long que celui de Aetheris Voyage.
Ce qui est inclus
- Une ligne, aucun tiroir. Le nom de marque tient le bord gauche et les liens courent à sa droite, le tout composé en Instrument Serif pour que la barre appartienne à la page en dessous plutôt qu’à un système séparé. La barre se pose sur la composition 800x570 sans fond propre, la vidéo court donc bord à bord en dessous.
- Mesuré contre le viewport. Rien ici n’est estimé à l’œil. La spécification fixe des pas d’espacement de 10px et des transitions de 100ms, et le reste de la mise en page découle de ces valeurs. Les valeurs sont citées depuis le prompt capturé plutôt que déduites, elles survivent donc à un nouveau rendu.
- Une barre sans superflu. La barre tient sur une rangée de texte et une action, mesurée à des pas d’espacement de 10px et des transitions de 100ms pour se lire comme un filet et non comme un bandeau.
- Une seule échelle, texte et cadre. Les espacements sont cités de la même façon (des pas d’espacement de 10px et des transitions de 100ms), et non comme une échelle qui grandit toute seule.
Animation et interaction
Une ambiance sans bibliothèque de scroll
Le clip de fond tourne 8,8s en 800x570 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.
Des changements d’état minutés
Les transitions sont fixées à 100ms, et c’est la durée à laquelle les contrôles sont tenus. Si l’easing change, la durée doit être revue avec lui. Si vous changez l’easing, changez-le partout.
Comment Aetheris Voyage ordonne la première lecture
S’engager sur un seul parcours de lecture ferme les autres. Le brief l’accepte, fige la navigation, le titre, le badge d’annonce, la ligne de statistiques et la grille de cartes en place et dépense des pas d’espacement de 10px et des transitions de 100ms pour rendre le trajet évident. Un lecteur voyage reçoit l’offre avant les options.
Le réagencement de section hero
Quand le texte est long, c’est la mise en page étroite qui casse en premier. Ici, un clamp entre 11px et 10px absorbe le changement, et l’échelle est fluide plutôt que par paliers. Les deux états sont décrits dans le même brief.
Par où commencer dans Aetheris Voyage
Là où un thème vous donne des composants, ce brief vous donne une composition, des pas d’espacement de 10px et des transitions de 100ms et un cadre média, le sujet restant à votre charge. La substitution coûte moins cher que la composition, et c’est tout l’intérêt.
Questions fréquentes
Le prompt de Aetheris Voyage 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 800x570, 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 Aetheris Voyage avec une autre stack?
La fiche indique React et Tailwind CSS pour la provenance, parce que Aetheris Voyage 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.
Puis-je utiliser Aetheris Voyage 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 800x570.
