À propos de ce modèle
Cyber Layer est un design de landing page pour un produit IA ou SaaS, livré avec les instructions qui l’ont produit. La palette repose sur rouge #B01617 en fond et éclairci #E6E6E6 pour le texte, et la page est composée en Space Grotesk. La livraison est en un seul fichier HTML autonome, capturée en 1460x1080 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 1000ms 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 14 235 caractères est la partie qui se transfère à votre page.
Conçu pour
- Si vous briefez un modèle plutôt qu’un designer, partez de la structure de landing page et laissez le prompt porter un easing cubic-bezier(.16,1.3,1).
- Ce design de landing page vise les équipes qui connaissent déjà un seul fichier HTML autonome et veulent simplement retrouver un seul fichier HTML autonome par écrit.
- Des équipes Studio qui briefent un build et cherchent un breakpoint à 599px pour avoir une matière sur laquelle réagir.
Ce qui est inclus
- Une navigation sans fond. Une barre fine se pose en tête de landing page, avec le nom de marque à gauche et les liens composés en Space Grotesk, si bien que la composition se lit d’abord comme du contenu, la barre ensuite. Sous 599px, les liens se replient dans une surcouche plein écran. Sous 599px, les liens se replient au lieu de passer sur une seconde ligne.
- Un seul clip fait le travail. La composition se construit par-dessus le clip 1460x1080 et non à côté, le média n’obtient donc jamais de panneau ni de bordure. Exportez en 1460x1080 ou plus large et le recadrage en cover continue de fonctionner.
- L’échelle est bornée, pas étagée. Les changements de largeur sont gérés dans la typographie même, un clamp entre 25px et 82px porte le titre du téléphone au desktop sans composition mobile séparée. Le menu mobile fait partie du même brief, l’état replié est donc dessiné lui aussi.
- Repli des liens à une largeur. La barre compte une poignée d’éléments, elle se reconstruit donc sans bibliothèque de composants. La référence a été capturée en 1460x1080.
Animation et interaction
La profondeur par le rendu
Le visuel est produit à l’exécution (un canvas WebGL) au lieu d’être chargé comme une image fixe, donc le cadre 1460x1080 compte une ressource de moins. La scène réagit au viewport au lieu de rester derrière lui comme une image.
Une durée pour les contrôles
Les changements d’état sont fixés à 1000ms, donc le retour des contrôles est une valeur de design et non un défaut du navigateur. Les valeurs sont assez courtes pour se lire comme un retour d’information et non comme une animation. Reprenez ces durées dans votre intégration.
Comment Cyber Layer ordonne la première lecture
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, la ligne de statistiques, le clip de fond et le pied de page ne sont pas interchangeables. Un lecteur SaaS reçoit l’offre avant les options.
Adapter landing page à votre marque
Quand vous intégrez vos propres médias, gardez le cadrage et l’ordre des calques. Le média est une boucle de 7s en 1460x1080. C’est ce placement qui garde le texte lisible. Gardez le cadrage des médias, il travaille autant que la typographie.
Les chiffres derrière landing page
Une capture d’écran dit à quoi ressemble la page, le brief dit pourquoi, et l’écart entre les deux se comble avec des sections de 100vh, des pas d’espacement de 82px, des transitions de 1000ms, un easing cubic-bezier(.16,1.3,1) et un breakpoint à 599px. Rien dans le design de landing page ne dépend d’une valeur par défaut.
Questions fréquentes
Puis-je reconstruire ce type de landing page de Cyber Layer avec une autre stack?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Cyber Layer 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.
Que contient réellement le brief derrière Cyber Layer?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1460x1080, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Quelle part de Cyber Layer est animée?
Les entrées et les changements d’état se situent dans la plage de 1000ms avec cubic-bezier(.16,1.3,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.
