À propos de ce modèle
Fastshot résout le problème de landing page pour un produit IA ou SaaS à partir d’un seul brief capturé. « Describe an app. We'll build it » est la ligne que la mise en page doit porter. La couleur se réduit à bleu profond #0A0D12 en fond et indigo sourd #9C86CE pour les accents, composée en Inter. La livraison est en un seul fichier HTML autonome, capturée en 1920x1406 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 1.00s de transitions, cubic-bezier(.4,0.2,1) et un fond vidéo en boucle. Gardez-la ouverte pendant la rédaction, car le brief de 15 844 caractères est la partie qui se transfère à votre page.
Conçu pour
- Prestataires qui récupèrent un design de landing page et veulent voir un easing cubic-bezier(.4,0.2,1) dans le dépôt avant le premier commit.
- Si la reconstruction part de un seul fichier HTML autonome, relevez d’abord des sections de 100vh et des angles de 4px et laissez la palette tranquille jusqu’à ce que la grille tienne.
- La page sert aux développeurs front-end qui reconstruisent un design de landing page pour un produit IA ou SaaS en un seul fichier HTML autonome et cherchent les chiffres derrière le rendu.
Ce qui est inclus
- Une navigation sur une seule ligne. La barre est l’élément le plus discret de la composition, avec le nom de marque, une courte rangée de liens et une action en #9C86CE, le tout au plus petit corps de l’échelle du brief. Sous 599px, les liens se replient au lieu de passer sur une seconde ligne.
- Le média derrière la typographie. Le média fait un travail d’ambiance et non de récit, une seule boucle de 7,5s en 1920x1406 derrière tout le reste. Une image d’attente en 1920x1406 tient la composition quand la lecture automatique est indisponible, la mise en page ne s’effondre donc jamais.
- L’échelle est le style. La typographie est Inter en haut de l’échelle, le texte secondaire tombe bien en dessous, la hiérarchie n’a donc pas besoin de couleur pour se lire. La fonte display n’est employée qu’à une seule taille, elle n’entre donc jamais en concurrence avec elle-même.
- Une barre de navigation discrète. Les libellés tiennent sur une ligne à 599px, et l’élément actif se signale par la graisse et non par une pastille.
Animation et interaction
Tout le budget d’animation
Les contrôles répondent en 1.00s, assez vite pour que la page réagisse dès qu’on la touche, et non après. L’easing est spécifié avec la durée (1.00s), donc une reconstruction ne peut pas substituer discrètement une autre sensation. Reprenez ces durées dans votre intégration.
La boucle fait l’ambiance
Le clip de fond tourne 7,5s en 1920x1406 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. Le clip est en sourdine et en inline, donc la première image est disponible sans interaction.
Le réagencement de landing page
Responsive signifie ici que l’échelle change et que la séquence non, l’échelle est fluide plutôt que par paliers, la mise en page bascule à 599px et la section est tenue à 100vh, et l’ordre de lecture reste là où le brief l’a placé. La mise en page étroite est une décision et non un écrasement, et la hiérarchie y survit.
Ce qui fonctionne dans landing page
15 844 caractères de brief produisent un écran sans remplissage. Les valeurs y sont explicites (des sections de 100vh et des angles de 4px), et c’est pourquoi la composition tient encore quand les mots changent. Fastshot énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Les chiffres derrière landing page
On ne règle pas une composition à l’œil quand deux personnes la reconstruisent. Le brief tranche en énonçant des sections de 100vh, des angles de 4px, des pas d’espacement de 18px, des transitions de 1.00s et un easing cubic-bezier(.4,0.2,1) une seule fois. Rien dans le design de landing page ne dépend d’une valeur par défaut.
Questions fréquentes
Faut-il un seul fichier HTML autonome pour reconstruire Fastshot?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Fastshot 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 recevez-vous en copiant le brief de Fastshot?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1920x1406, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Comment gérer les médias de Fastshot 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 1920x1406.
