À propos de ce modèle
Cross-Border est un design de landing page pour une entreprise industrielle, livré avec les instructions qui l’ont produit. « Complete the form and our team will contact you soon » est la ligne que la mise en page doit porter. La palette repose sur jaune vif #FFDA00 en fond, noir #1A1A1A pour le texte et sarcelle profond #002A35 pour les accents, et la page est composée en Helvetica, Arial. La fiche nomme la stack qui a produit la page (React et Tailwind CSS) au lieu de la passer sous silence. Le budget d’animation est 0.6s de transitions et un fond vidéo en boucle. Elle est surtout utile quand le texte de landing page Industrie change sans qu’une refonte soit nécessaire.
Conçu pour
- Les ingénieurs qui veulent que ce design de landing page tienne sur une connexion lente utiliseront 1440x1080 et l’échelle typographique comme budget de poids.
- Ce design de landing page répond à celui qui construit et veut connaître le rôle exact de des sections de 12vh et des pas d’espacement de 20px dans la mise en page.
- Ce design de landing page sert aux fondateurs qui ont besoin d’un seul écran pour prouver que le texte industrie peut porter 5,8s de vidéo en boucle.
Ce qui est inclus
- Une ligne, aucun tiroir. Les liens tiennent sur une ligne à un seul corps, et l’action en #002A35 ferme la rangée à droite, l’œil finit donc là où la navigation s’arrête. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #002A35 est le seul élément de la barre à porter du gras.
- Les tailles sont dans le brief, pas dans une échelle. La liste reste courte (des sections de 12vh, des pas d’espacement de 20px et des transitions de 0.6s), c’est pourquoi tout le système se vérifie à la main. La plus petite et la plus grande valeur de cette liste bornent la plage dans laquelle travaille la composition.
- L’image d’attente compte. La composition se construit par-dessus le clip 1440x1080 et non à côté, le média n’obtient donc jamais de panneau ni de bordure. Une image d’attente en 1440x1080 tient la composition quand la lecture automatique est indisponible, la mise en page ne s’effondre donc jamais.
- Une seule fonte, employée avec rigueur. Les paliers de taille et l’interlettrage du brief donnent le ton ici, avec Helvetica, Arial à un corps display serré, puis une chute nette vers le texte secondaire. Remplacer la fonte est possible, mais les proportions doivent survivre à la substitution.
Animation et interaction
Une ambiance sans bibliothèque de scroll
Le mouvement d’ambiance est un clip de 5,8s en 1440x1080, qui boucle discrètement derrière le texte au lieu de réagir au pointeur. La boucle est rognée en cover, ce qui veut dire que la composition ne dépend pas d’un format d’image précis.
Des durées courtes et nommées
Chaque changement d’état de la spécification porte une durée, les transitions se règlent autour de 0.6s. Rien n’est laissé au réglage par défaut du navigateur, et c’est pourquoi la page semble conçue plutôt qu’animée. L’easing est spécifié avec la durée (0.6s), donc une reconstruction ne peut pas substituer discrètement une autre sensation.
Pourquoi le brief industrie tient
Si cela fonctionne pour une entreprise industrielle, c’est que la page ne demande jamais au lecteur de reconstituer le message. La page le dit sans détour, « Complete the form and our team will contact you soon ». Mise en page, typographie et couleur sont décidées (jaune vif #FFDA00 et sarcelle profond #002A35, composées en Helvetica, Arial), le premier écran se lit donc comme un argument terminé et non comme un tas de pièces. Cross-Border énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Lire Cross-Border comme une spécification
Le coût d’une échelle fixe est une marge d’improvisation plus faible, car la composition reste cohérente grâce à des sections de 12vh et des pas d’espacement de 20px et un nouvel élément doit s’ajuster plutôt que se poser. Rien dans le design de landing page ne dépend d’une valeur par défaut.
Ce qui bouge dans Cross-Border
Copiez le schéma plutôt que les valeurs, gardez 0.6s de transitions, une boucle média de 5,8s et des états de survol et de clic et laissez votre marque fixer les durées. Rien ne s’anime pour lui-même dans le design de landing page.
Questions fréquentes
Quelle est la longueur du prompt derrière Cross-Border?
Comptez 6 698 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.
Comment cette fiche de Cross-Border est-elle organisée?
Tout ce qui est cité sur la page provient du brief capturé de 6 698 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Faut-il React et Tailwind CSS pour reconstruire Cross-Border?
La fiche indique React et Tailwind CSS pour la provenance, parce que Cross-Border 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.
